@@ -63,7 +63,7 @@ const prod = useRouteQuery<string, boolean>('prod', 'false', {
6363 <UIcon name =" i-logos-vueuse" class =" size-8"
6464 </div >
6565
66- <div class =" flex gap-2 items-center"
66+ <div class =" hidden lg: flex gap-2 items-center"
6767 <USwitch v-model =" ssr" label =" SSR"
6868 <USwitch v-model =" prod" label =" Prod"
6969 <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', {
8787 />
8888 </UTooltip >
8989 </div >
90+ <div class =" lg:hidden"
91+ <USlideover title =" Settings"
92+ <UButton icon =" i-lucide-menu" color =" neutral" variant =" outline"
93+ <template #body >
94+ <section class =" flex flex-col gap-2 items-center justify-center"
95+ <div class =" flex gap-2"
96+ <USwitch v-model =" ssr" label =" SSR"
97+ <USwitch v-model =" prod" label =" Prod"
98+ </div >
99+ <div class =" flex gap-2"
100+ <USelectMenu v-model =" vueUseVersion" :items =" vueUseVersionsSorted" class =" w-32" icon =" i-logos-vueuse" :loading =" loadingVersions"
101+ <USelectMenu v-model =" vueVersion" :items =" vueVersionsSorted" class =" w-32" icon =" i-logos-vue" :loading =" loadingVersions"
102+ <UButton icon =" i-lucide-refresh-ccw" size =" md" color =" primary" variant =" soft" @click =" fetchVersions"
103+ </div >
104+ </section >
105+ </template >
106+ </USlideover >
107+ <UTooltip text =" Open on GitHub"
108+ <UButton
109+ color =" neutral" variant =" ghost"
110+ :icon =" colorMode.preference === 'dark' ? 'i-heroicons-moon' : 'i-heroicons-sun'"
111+ aria-label =" color mode"
112+ @click =" toggleColorMode"
113+ />
114+ <UButton
115+ color =" neutral"
116+ variant =" ghost"
117+ to =" https://github.com/vueuse"
118+ target =" _blank"
119+ icon =" i-simple-icons-github"
120+ aria-label =" GitHub"
121+ />
122+ </UTooltip >
123+ </div >
90124 </header >
91125
92126 <main class =" h-[calc(100vh-var(--header-height))]"
0 commit comments