fix: mobile menu

.vitepress/theme/components/header/MobileMenu.vue

@@ -3,6 +3,8 @@ import { DrawerClose, DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, Dr
 import type { NavigationType } from './navigation-types'
 
 defineProps<{ navigation: NavigationType }>()
+
+const baseUrl = import.meta.env.BASE_URL
 </script>
 
 <template>
@@ -11,42 +13,30 @@ defineProps<{ navigation: NavigationType }>()
       <div i-nimiq:hamburger-menu rotate-y-180 />
     </DrawerTrigger>
     <DrawerPortal>
-      <DrawerOverlay fixed inset-0 bg-neutral-0 op-6 z-101 />
+      <DrawerOverlay fixed inset-0 bg="darkblue/20" z-101 />
       <DrawerContent
         z-101
         flex="~ col" mt-24 h-full max-h="96%" fixed bottom-0 left-0 right-0
       >
         <div p-24 bg-neutral-100 rounded-t-24 flex-1 relative flex="~ col">
-          <DrawerClose absolute top-16 right-16 z-1>
-            <div close-btn text-32 />
+          <DrawerClose absolute top-16 right-16 z-1 grid>
+            <div close-btn text-32 pt-8 />
           </DrawerClose>
           <DrawerTitle sr-only>
             Nimiq Developer Center
           </DrawerTitle>
 
-          <nav>
-            <ul>
-              <li v-for="({ key, main, items }) in navigation.items" :key mt-40 first:mt-0>
+          <nav mt-24>
+            <ul flex="~ wrap gap-40">
+              <li v-for="({ key, main, items }) in navigation.items" :key>
                 <ul>
                   <li>
-                    <a
-                      :href="main.href" focusable block px-16 py-12 rounded-6 border-subtle un-text="17 white/90" lh="22" class="arrow"
-                    >
+                    <a :href="`${baseUrl}${main.href}`" px-16 py-12 un-text="17 neutral-900" lh="22" arrow>
                       {{ key }}
                     </a>
                   </li>
-                  <!-- <li v-for="({ description, href, title }) in items" :key="title" mt-12>
-                    <a :href="href" focusable block px-16 py-12 un-text="19 neutral-800 hocus:900" rounded-6 border-subtle bg-neutral-200>
-                      <h3 text="19 neutral-800" lh="22" arrow>
-                        {{ title }}
-                      </h3>
-                      <p text="15 neutral-800/80" mt-4>
-                        {{ description }}
-                      </p>
-                    </a>
-                  </li> -->
                   <li v-for="({ href, title }) in items" :key="title" mt-12>
-                    <a :href="href" focusable block px-16 py-6 un-text="14 neutral-800 hocus:900" rounded-6 border-subtle lh-14 class="arrow">
+                    <a :href="`${baseUrl}${href}`" block px-16 py-6 un-text="14 neutral-800 hocus:neutral-900" rounded-6 lh-14>
                       {{ title }}
                     </a>
                   </li>
@@ -55,6 +45,11 @@ defineProps<{ navigation: NavigationType }>()
             </ul>
           </nav>
 
+          <div flex="~ gap-16 items-center" mt-40 mx-16>
+            <span label text-14>Appearance</span>
+            <ThemeSwitcher />
+          </div>
+
           <Community mt-auto :community="navigation.community" />
         </div>
       </DrawerContent>

.vitepress/theme/index.ts

@@ -1,7 +1,7 @@
 // https://vitepress.dev/guide/custom-theme
-import Theme from 'vitepress/theme'
 import 'uno.css'
 import './style.css'
+import Theme from 'vitepress/theme'
 import { h, nextTick, onMounted, watch } from 'vue'
 import { useRoute } from 'vitepress'
 import mediumZoom from 'medium-zoom'