Working

src/components/header/ColorModeButton.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  },
+})
+</script>
+
+<template>
+  <UButton
+    :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+    variant="solid"
+    aria-label="Theme"
+    color="primary"
+    square
+    size="sm"
+    @click="isDark = !isDark"
+  />
+</template>

src/components/header/ColorPicker.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useColorStore } from '~/store/color'
+import { ColorsTheme } from '~~/types'
+
+const colors = Object.values(ColorsTheme)
+
+const { setColor, getColor } = useColorStore()
+</script>
+
+<template>
+  <UPopover
+    :open-delay="60"
+    :close-delay="10"
+    :ui="{
+      background: 'bg-white dark:bg-stone-900',
+      ring: 'ring-1 ring-gray-200 dark:ring-stone-800',
+    }"
+  >
+    <UButton trailing-icon="i-heroicons-swatch-20-solid" variant="ghost" color="primary" size="sm" />
+
+    <template #panel>
+      <div class="p-2">
+        <div class="grid grid-cols-5 gap-px">
+          <UTooltip v-for="color in colors" :key="color" :text="color" class="capitalize" :open-delay="500">
+            <UButton
+              color="gray"
+              square
+              :ui="{
+                color: {
+                  gray: {
+                    solid: 'bg-gray-100 dark:bg-stone-800',
+                    ghost: 'hover:bg-gray-50 dark:hover:bg-stone-800/50',
+                  },
+                },
+              }"
+              :variant="color === getColor ? 'solid' : 'ghost'"
+              @click.stop.prevent="setColor(color)"
+            >
+              <span class="inline-block w-3 h-3 rounded-full" :class="`bg-${color}-500`" />
+            </UButton>
+          </UTooltip>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>

src/components/header/Header.vue

@@ -0,0 +1,15 @@
+<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">
+    <Logo />
+    <NavBar />
+    <div class="flex gap-2">
+      <ClientOnly>
+        <div class="flex items-center 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">
+          <ColorPicker />
+          <ColorModeButton />
+        </div>
+        <MobileNavBar />
+      </ClientOnly>
+    </div>
+  </div>
+</template>

src/components/header/Logo.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div>
+    LOGO
+  </div>
+</template>
+
+<style>
+
+</style>

src/components/header/MobileNavBar.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div class="md:hidden">
+    <div class="p-1 rounded-md bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
+      <UButton
+        variant="ghost"
+        color="primary"
+        size="sm"
+        icon="i-ph-list-bold"
+        @click="isOpen = true"
+      />
+    </div>
+
+    <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>
+        </template>
+
+        Content
+
+        <template #footer>
+          Footer
+        </template>
+      </UCard>
+    </USlideover>
+  </div>
+</template>
+
+<style>
+
+</style>

src/components/header/NavBar.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+
+function getTextColor() {
+  return `!text-${appConfig.ui.primary}-500`
+}
+
+const items = [
+  [{
+    label: 'Talents',
+    to: '/talents',
+    icon: 'i-ph-users-bold',
+  },
+  {
+    label: 'bookmarks',
+    to: '/bookmarks',
+    icon: 'i-ph-bookmark-simple-bold',
+  }],
+]
+</script>
+
+<template>
+  <header class="hidden md:block pointer-events-auto">
+    <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
+      </UButton>
+      <UButton to="/about" size="sm" variant="ghost" color="white">
+        About
+      </UButton>
+
+      <UButton to="/blog" size="sm" variant="ghost" color="white">
+        Articles
+      </UButton>
+      <UButton to="/work" size="sm" variant="ghost" color="white">
+        Projects
+      </UButton>
+      <UButton to="/uses" size="sm" variant="ghost" color="white">
+        Uses
+      </UButton>
+      <UDropdown mode="hover" :items="items" :popper="{ placement: 'bottom' }">
+        <UButton size="sm" variant="ghost" color="white">
+          Other
+        </UButton>
+      </UDropdown>
+      <UButton to="/contact" size="sm" variant="ghost" color="white">
+        Contact
+      </UButton>
+    </div>
+  </header>
+</template>
+
+<style lang="scss">
+.router-link-exact-active {
+  @apply bg-white/60 dark:bg-black
+}
+</style>