Making progress converting template

app/components/Header.vue

@@ -51,7 +51,6 @@ const onScroll = () => {
             <div class="lg:hidden">
               <NavLinksMobile :links="links" />
             </div>
-            <ColorModeSwitch />
           </div>
         </div>
       </div>

app/components/NavLinksMobile.vue

@@ -1,53 +1,40 @@
-<script setup lang="ts">
-import { Bars2Icon } from "@heroicons/vue/20/solid";
-
-const { links } = defineProps<{
-  links: { name: string; to: string }[];
-}>();
-</script>
 <template>
-  <nuxt-ui-dropdown as="div" class="inline-block text-left z-10">
-    <div>
-        <nuxt-ui-dropdown-toggle class="border rounded-full px-2 py-2 text-zinc-500 border-zinc-500 hover:bg-white hover:text-zinc-900 hover:border-zinc-900 active:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-yellow-700 focus-visible:ring-opacity-75"
-      >
-        <span class="sr-only">Menu</span>
-        <Bars2Icon class="h-4 w-4" aria-hidden="true" />
-        </nuxt-ui-dropdown-toggle>
-    </div>
+  <div>
+    <v-btn icon @click="dialog = true">
+      <v-icon>mdi-menu</v-icon>
+    </v-btn>
 
-    <transition
-      enter-active-class="transition duration-100 ease-out"
-      enter-from-class="transform scale-95 opacity-0"
-      enter-to-class="transform scale-100 opacity-100"
-      leave-active-class="transition duration-75 ease-in"
-      leave-from-class="transform scale-100 opacity-100"
-      leave-to-class="transform scale-95 opacity-0"
-    >
-      <nuxt-ui-dropdown-menu
-        class="absolute right-0 mt-4 w-56 origin-top-right divide-y divide-zinc-100 dark:divide-zinc-700 rounded-xl bg-white dark:bg-black shadow-lg ring-1 ring-black dark:ring-white ring-opacity-5 dark:ring-opacity-5 focus:outline-none"
-      >
-        <div class="px-2 py-2 w-full">
-          <nuxt-ui-dropdown-item
-            v-for="(link, index) in links"
-            :key="index"
-            v-slot="{ close }"
+    <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
+      <v-card>
+        <v-toolbar dark color="primary">
+          <v-btn icon @click="dialog = false">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+          <v-toolbar-title>Menu</v-toolbar-title>
+        </v-toolbar>
+
+        <v-list>
+          <v-list-item
+            v-for="link in links"
+            :key="link.to"
+            @click="navigate(link.to)"
           >
-            <NuxtLink
-              :class="[
-                $route.path === link.to
-                  ? 'bg-zinc-200 dark:bg-zinc-900 text-zinc-900 dark:text-zinc-200'
-                  : 'text-zinc-900 dark:text-zinc-200',
-                'group block w-full items-center rounded-xl text-sm',
-              ]"
-              :to="link.to"
-            >
-              <span @click.native="close" class="truncate px-4 py-2 block">{{
-                link.name
-              }}</span>
-            </NuxtLink>
-          </nuxt-ui-dropdown-item>
-        </div>
-      </nuxt-ui-dropdown-menu>
-    </transition>
-  </nuxt-ui-dropdown>
+            <v-list-item-title>{{ link.name }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-card>
+    </v-dialog>
+  </div>
 </template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+const props = defineProps<{ links: { name: string; to: string }[] }>()
+const dialog = ref(false)
+const router = useRouter()
+
+function navigate(to: string) {
+  dialog.value = false
+  router.push(to)
+}
+</script>

app/layouts/default.vue

@@ -17,7 +17,7 @@
           src="img/bg-glow.png"
           aria-hidden="true"
           class="w-[44rem]"
-          format="webp"
+          format="png"
           width="944"
           height="586"
         />