Working

src/components/header/ColorPicker.vue

@@ -14,6 +14,7 @@ const { setColor, getColor } = useColorStore()
     :ui="{
       background: 'bg-white dark:bg-stone-900',
       ring: 'ring-1 ring-gray-200 dark:ring-stone-800',
+      container: 'z-30',
     }"
   >
     <UButton trailing-icon="i-heroicons-swatch-20-solid" variant="ghost" color="primary" size="sm" />

src/components/header/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-container flex justify-between py-6 sticky top-0 left-0 bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
+  <header class="w-container z-30 flex justify-between py-6 sticky top-0 left-0 bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
     <Logo />
     <NavBar />
     <div class="flex gap-2">
@@ -11,5 +11,5 @@
         <MobileNavBar />
       </ClientOnly>
     </div>
-  </div>
+  </header>
 </template>

src/components/header/MobileNavBar.vue

@@ -1,5 +1,61 @@
 <script lang="ts" setup>
 const isOpen = ref(false)
+
+const router = useRouter()
+router.afterEach(() => isOpen.value = false)
+
+const navs = [
+  {
+    label: 'Home',
+    to: '/',
+    icon: 'i-ph-house-bold',
+  },
+  {
+    label: 'About',
+    to: '/about',
+    icon: 'i-ph-person-arms-spread-bold',
+  },
+  {
+    label: 'Articles',
+    to: '/writing',
+    icon: 'i-ph-pencil-bold',
+  },
+  {
+    label: 'Projects',
+    to: '/work',
+    icon: 'i-ph-flask-bold',
+  },
+  {
+    label: 'Uses',
+    to: '/uses',
+    icon: 'i-ph-tree-evergreen-bold',
+  },
+  {
+    label: 'Talents',
+    to: '/talents',
+    icon: 'i-ph-shooting-star-bold',
+  },
+  {
+    label: 'Bookmarks',
+    to: '/bookmarks',
+    icon: 'i-ph-bookmarks-bold',
+  },
+  {
+    label: 'Ask Me',
+    to: '/ama',
+    icon: 'i-octicon-comment-discussion-16',
+  },
+  {
+    label: 'Contact',
+    to: '/contact',
+    icon: 'i-ph-push-pin-bold',
+  },
+]
+
+const route = useRoute()
+function isRoute(path: string) {
+  return route.path === path
+}
 </script>
 
 <template>
@@ -17,12 +73,30 @@ const isOpen = ref(false)
     <USlideover v-model="isOpen">
       <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
         <template #header>
-          <div>
-            Header
+          <div class="flex justify-between items-center">
+            <div>Logo</div>
+            <UButton
+              size="md"
+              icon="i-ic-round-close"
+              :ui="{ rounded: 'rounded-full' }"
+              @click.prevent="isOpen = false"
+            />
           </div>
         </template>
 
-        Content
+        <div class="flex flex-col space-y-2">
+          <UButton
+            v-for="nav in navs"
+            :key="nav.label"
+            size="sm"
+            :variant="isRoute(nav.to) ? 'solid' : 'ghost'"
+            color="primary"
+            :to="nav.to"
+            :icon="nav.icon"
+          >
+            {{ nav.label }}
+          </UButton>
+        </div>
 
         <template #footer>
           Footer

src/components/header/NavBar.vue

@@ -1,10 +1,4 @@
 <script setup lang="ts">
-const appConfig = useAppConfig()
-
-function getTextColor() {
-  return `!text-${appConfig.ui.primary}-500`
-}
-
 const items = [
   [{
     label: 'Talents',
@@ -12,15 +6,20 @@ const items = [
     icon: 'i-ph-users-bold',
   },
   {
-    label: 'bookmarks',
+    label: 'Bookmarks',
     to: '/bookmarks',
     icon: 'i-ph-bookmark-simple-bold',
+  },
+  {
+    label: 'Ask Me',
+    to: '/ama',
+    icon: 'i-octicon-comment-discussion-16',
   }],
 ]
 </script>
 
 <template>
-  <header class="hidden md:block pointer-events-auto">
+  <nav class="hidden md:block pointer-events-auto z-50">
     <div class="flex items-center h-10 rounded-md p-1 gap-1 relative bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
       <UButton to="/" size="sm" variant="ghost" color="white">
         Home
@@ -28,8 +27,7 @@ const items = [
       <UButton to="/about" size="sm" variant="ghost" color="white">
         About
       </UButton>
-
-      <UButton to="/blog" size="sm" variant="ghost" color="white">
+      <UButton to="/writing" size="sm" variant="ghost" color="white">
         Articles
       </UButton>
       <UButton to="/work" size="sm" variant="ghost" color="white">
@@ -47,10 +45,10 @@ const items = [
         Contact
       </UButton>
     </div>
-  </header>
+  </nav>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .router-link-exact-active {
   @apply bg-white/60 dark:bg-black
 }