Working

src/components/CommandPalette.vue

@@ -1,130 +0,0 @@
-<script setup lang="ts">
-const isOpen = ref(false)
-const commandPaletteRef = ref()
-
-const router = useRouter()
-const color = useColorMode()
-
-const quickLinks = [
-  { id: 'twitter', label: 'Twitter', icon: 'i-ph-twitter-logo-bold' },
-  { id: 'github', label: 'GitHub', icon: 'i-ph-github-logo-bold' },
-]
-
-const navigations = [
-  { id: 'home', label: 'Home', icon: 'i-ph-house-bold', to: '/', shortcuts: ['H'] },
-  { id: 'about', label: 'About', icon: 'i-ph-user-bold', to: '/about', shortcuts: ['A'] },
-  { id: 'blog', label: 'Blog', icon: 'i-ph-book-bold', to: '/blog', shortcuts: ['B'] },
-  { id: 'work', label: 'Work', icon: 'i-ph-wrench-bold', to: '/work', shortcuts: ['W'] },
-]
-
-const toast = useToast()
-
-const isDark = computed(() => color.preference === 'dark')
-const controls = [
-  {
-    id: 'color',
-    label: 'Toggle Color Mode',
-    icon: isDark ? 'i-ph-moon-bold' : 'i-ph-sun-bold',
-    click: () => {
-      color.preference = color.value === 'dark' ? 'light' : 'dark'
-      toast.add({
-        color: 'primary',
-        title: 'Color mode switched!',
-        icon: isDark.value ? 'i-ph-moon-bold' : 'i-ph-sun-bold',
-      })
-    },
-    shortcuts: ['C'],
-  },
-]
-
-const groups = [{
-  key: 'navigation',
-  label: 'Navigation',
-  inactive: 'Navigation',
-  commands: navigations,
-}, {
-  key: 'quickLinks',
-  label: 'Quick Links',
-  inactive: 'Quick Links',
-  commands: quickLinks,
-}, {
-  key: 'controls',
-  label: 'Controls',
-  inactive: 'Controls',
-  commands: controls,
-}]
-
-const { usingInput } = useShortcuts()
-const canToggleModal = computed(() => isOpen.value || !usingInput.value)
-
-defineShortcuts({
-  meta_k: {
-    usingInput: true,
-    whenever: [canToggleModal],
-    handler: () => {
-      isOpen.value = !isOpen.value
-    },
-  },
-  escape: {
-    usingInput: true,
-    whenever: [isOpen],
-    handler: () => { isOpen.value = false },
-  },
-})
-
-function onSelect(option: any) {
-  if (option.click) {
-    option.click()
-    isOpen.value = false
-  }
-
-  else if (option.to) { router.push(option.to) }
-
-  else if (option.href) { window.open(option.href, '_blank') }
-}
-
-onKeyStroke(true, (event: KeyboardEvent) => {
-  if (!isOpen.value && !usingInput.value) {
-    switch (event.key) {
-      case 'A':
-      case 'a':
-        router.push('/about')
-        break
-      case 'H':
-      case 'h':
-        router.push('/')
-        break
-      case 'W':
-      case 'w':
-        router.push('/work')
-        break
-      case 'B':
-      case 'b':
-        router.push('/blog')
-        break
-      case 'C':
-      case 'c':
-        color.preference = color.value === 'dark' ? 'light' : 'dark'
-        toast.add({
-          color: 'primary',
-          title: 'Color mode switched!',
-          icon: isDark.value ? 'i-ph-moon-bold' : 'i-ph-sun-bold',
-        })
-        break
-    }
-  }
-})
-</script>
-
-<template>
-  <UModal v-model="isOpen">
-    <UCommandPalette
-      ref="commandPaletteRef"
-      :groups="groups"
-      icon=""
-      :autoselect="false"
-      placeholder="Search for apps and commands"
-      @update:model-value="onSelect"
-    />
-  </UModal>
-</template>

src/components/header/NavBar.vue

@@ -22,27 +22,27 @@ const items = [
 <template>
   <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">
+      <UButton to="/" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path === '/' }">
         Home
       </UButton>
-      <UButton to="/about" size="sm" variant="ghost" color="white">
+      <UButton to="/about" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path.includes('/about') }">
         About
       </UButton>
       <UButton to="/writing" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path.includes('/writing') }">
         Articles
       </UButton>
-      <UButton to="/work" size="sm" variant="ghost" color="white">
+      <UButton to="/work" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path.includes('/work') }">
         Projects
       </UButton>
-      <UButton to="/uses" size="sm" variant="ghost" color="white">
+      <UButton to="/uses" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path.includes('/uses') }">
         Uses
       </UButton>
       <UDropdown mode="hover" :items="items" :popper="{ placement: 'bottom' }">
-        <UButton size="sm" variant="ghost" color="white">
+        <UButton size="sm" variant="ghost" color="white" class="duration-300">
           Other
         </UButton>
       </UDropdown>
-      <UButton to="/contact" size="sm" variant="ghost" color="white">
+      <UButton to="/contact" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path.includes('/contact') }">
         Contact
       </UButton>
     </div>