<UButton
        :icon="isDark ? 'i-ph-moon-stars-duotone w-5 h5' : 'i-ph-sun-dim-duotone w-5 h5'"
        color="gray"
        class="no-hover-effect"
        variant="ghost"
        aria-label="Theme"
        @click="isDark = !isDark"
    ></UButton>

<UButton
        :icon="isDark ? 'i-ph-moon-stars-duotone w-5 h5' : 'i-ph-sun-dim-duotone w-5 h5'"
        color="gray"
        class="no-hover-effect"
        variant="ghost"
        aria-label="Theme"
        @click="isDark = !isDark"
    ></UButton>

<script setup lang="ts">
const route = useRoute()
const links = [
  // Links array including 'DarkMode', 'Home', 'Search', etc.
]
</script>

<template>
  <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800">
    <template #default="{link}">
      <div v-if="link.label === 'DarkMode'">
        <span><DarkModeToggle /></span>
      </div>
      <div v-else>
        <span class="group-hover:text-primary relative">{{link.label}}</span>
      </div>
    </template>
  </UHorizontalNavigation>
</template>

<script setup lang="ts">
const route = useRoute()
const links = [
  // Links array including 'DarkMode', 'Home', 'Search', etc.
]
</script>

<template>
  <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800">
    <template #default="{link}">
      <div v-if="link.label === 'DarkMode'">
        <span><DarkModeToggle /></span>
      </div>
      <div v-else>
        <span class="group-hover:text-primary relative">{{link.label}}</span>
      </div>
    </template>
  </UHorizontalNavigation>
</template>