feat: add simple mobile menu (#11)

Author: OrbisK

app/layouts/default.vue

@@ -49,16 +49,27 @@ 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>
   <UApp>
-    <header class="flex items-center justify-around h-(--header-height)">
+    <header class="flex items-center justify-between px-6 h-(--header-height)">
       <div class="flex gap-2 items-center">
         <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" />
@@ -81,6 +92,60 @@ 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">
+        <UButton
+          color="neutral" variant="ghost"
+          :icon="colorMode.preference === 'dark' ? 'i-heroicons-moon' : 'i-heroicons-sun'"
+          aria-label="color mode"
+          @click="toggleColorMode"
+        />
+        <UTooltip text="Open on GitHub">
+          <UButton
+            color="neutral"
+            variant="ghost"
+            to="https://github.com/vueuse"
+            target="_blank"
+            icon="i-simple-icons-github"
+            aria-label="GitHub"
+          />
+        </UTooltip>
+        <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>
+              <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>
       </div>
     </header>