From 677c1ff1e98ac5e93b7954823c31967b476255c5 Mon Sep 17 00:00:00 2001
From: OrbisK <robin.kehl@singular-it.de>
Date: Sun, 13 Apr 2025 22:10:12 +0200
Subject: [PATCH 1/2] feat: add simple mobile menu

---
 app/layouts/default.vue | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index f5236a5..2adad32 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -63,7 +63,7 @@ const prod = useRouteQuery<string, boolean>('prod', 'false', {
         <UIcon name="i-logos-vueuse" class="size-8" />VueUse Playground
       </div>
 
-      <div class="flex gap-2 items-center">
+      <div class="hidden lg:flex gap-2 items-center">
         <USwitch v-model="ssr" label="SSR" />
         <USwitch v-model="prod" label="Prod" />
         <USelectMenu v-model="vueUseVersion" :items="vueUseVersionsSorted" class="w-32" icon="i-logos-vueuse" :loading="loadingVersions" />
@@ -87,6 +87,40 @@ const prod = useRouteQuery<string, boolean>('prod', 'false', {
           />
         </UTooltip>
       </div>
+      <div class="lg:hidden">
+        <USlideover title="Settings">
+          <UButton icon="i-lucide-menu" color="neutral" variant="outline" />
+          <template #body>
+            <section class="flex flex-col gap-2 items-center justify-center">
+              <div class="flex gap-2">
+                <USwitch v-model="ssr" label="SSR" />
+                <USwitch v-model="prod" label="Prod" />
+              </div>
+              <div class="flex gap-2">
+                <USelectMenu v-model="vueUseVersion" :items="vueUseVersionsSorted" class="w-32" icon="i-logos-vueuse" :loading="loadingVersions" />
+                <USelectMenu v-model="vueVersion" :items="vueVersionsSorted" class="w-32" icon="i-logos-vue" :loading="loadingVersions" />
+                <UButton icon="i-lucide-refresh-ccw" size="md" color="primary" variant="soft" @click="fetchVersions" />
+              </div>
+            </section>
+          </template>
+        </USlideover>
+        <UTooltip text="Open on GitHub">
+          <UButton
+            color="neutral" variant="ghost"
+            :icon="colorMode.preference === 'dark' ? 'i-heroicons-moon' : 'i-heroicons-sun'"
+            aria-label="color mode"
+            @click="toggleColorMode"
+          />
+          <UButton
+            color="neutral"
+            variant="ghost"
+            to="https://github.com/vueuse"
+            target="_blank"
+            icon="i-simple-icons-github"
+            aria-label="GitHub"
+          />
+        </UTooltip>
+      </div>
     </header>
 
     <main class="h-[calc(100vh-var(--header-height))]">

From d1322a7efcb531e617f11b67542c888691c196f6 Mon Sep 17 00:00:00 2001
From: OrbisK <robin.kehl@singular-it.de>
Date: Sun, 13 Apr 2025 22:34:55 +0200
Subject: [PATCH 2/2] feat: add link to directly open an issue on github with
 reproduction link

---
 app/layouts/default.vue | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 2adad32..3c5618b 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -54,6 +54,17 @@ const ssr = useRouteQuery<string, boolean>('ssr', 'false', {
 const prod = useRouteQuery<string, boolean>('prod', 'false', {
   transform: stringToBooleanTransformer,
 })
+
+const currentHref = shallowRef(location.href)
+const route = useRoute()
+
+watch(() => route.fullPath, () => {
+  currentHref.value = location.href
+})
+
+const issueLink = computed(() => {
+  return `https://github.com/vueuse/vueuse/issues/new?template=bug_report.yml&reproduction=${encodeURIComponent(currentHref.value)}`
+})
 </script>
 
 <template>
@@ -86,6 +97,16 @@ const prod = useRouteQuery<string, boolean>('prod', 'false', {
             aria-label="GitHub"
           />
         </UTooltip>
+        <UTooltip text="Report an issue on GitHub">
+          <UButton
+            color="neutral"
+            variant="ghost"
+            :to="issueLink"
+            target="_blank"
+            icon="i-pajamas-issue-new"
+            aria-label="Issue via GitHub"
+          />
+        </UTooltip>
       </div>
       <div class="lg:hidden">
         <USlideover title="Settings">
@@ -101,6 +122,16 @@ const prod = useRouteQuery<string, boolean>('prod', 'false', {
                 <USelectMenu v-model="vueVersion" :items="vueVersionsSorted" class="w-32" icon="i-logos-vue" :loading="loadingVersions" />
                 <UButton icon="i-lucide-refresh-ccw" size="md" color="primary" variant="soft" @click="fetchVersions" />
               </div>
+              <UButton
+                color="neutral"
+                variant="ghost"
+                :to="issueLink"
+                target="_blank"
+                icon="i-pajamas-issue-new"
+                aria-label="Issue via GitHub"
+              >
+                Report an issue on GitHub
+              </UButton>
             </section>
           </template>
         </USlideover>