refactor: Navigation

nuxt/components/Header.vue

@@ -1,18 +1,7 @@
 <script setup lang="ts">
-const links = [{
+import ColorPicker from '~/components/color-picker/ColorPicker.vue'
-  label: 'Documentation',
+
-  icon: 'i-heroicons-book-open',
+const links = []
-  to: 'https://ui.nuxt.com/getting-started',
-}, {
-  label: 'Pro',
-  icon: 'i-heroicons-square-3-stack-3d',
-  to: 'https://ui.nuxt.com/pro',
-}, {
-  label: 'Releases',
-  icon: 'i-heroicons-rocket-launch',
-  to: 'https://github.com/nuxt/ui/releases',
-  target: '_blank',
-}]
 </script>
 
 <template>
@@ -22,6 +11,7 @@ const links = [{
     </template>
 
     <template #right>
+      <ColorPicker />
       <UColorModeButton />
       <UserDropdown />
     </template>

nuxt/components/Logo.vue

@@ -1,5 +1,5 @@
 <template>
   <div>
-    <span class="text-primary">Nuxt</span> Breeze
+    <span class="text-primary">Chapter</span> Stack
   </div>
 </template>

nuxt/components/Navigation.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
-const links = [
+import type { NavigationTree } from '#ui-pro/types'
+
+const authStore = useAuthStore()
+
+const links: NavigationTree[] = [
+  {
+    label: 'Dashboard',
+    to: '/',
+    icon: 'i-heroicons-home',
+  },
   {
     label: 'Bücher',
     icon: 'i-heroicons-book-open',
@@ -11,12 +20,27 @@ const links = [
       },
     ],
   },
-  {
-    label: 'People',
-    to: '/login',
-    icon: 'i-heroicons-user-group',
-  },
 ]
+
+if (authStore.user?.roles.includes('admin')) {
+  links.push({
+    label: 'Admin',
+    to: '/admin',
+    icon: 'i-heroicons-cog-solid',
+    children: [
+      {
+        label: 'Übersicht',
+        to: '/admin',
+        icon: 'i-heroicons-eye',
+      },
+      {
+        label: 'Votes',
+        to: '/admin/votes',
+        icon: 'i-heroicons-star',
+      },
+    ],
+  })
+}
 </script>
 
 <template>

nuxt/components/UserDropdown.vue

@@ -1,15 +1,23 @@
 <script setup lang="ts">
-const links = [
+const authStore = useAuthStore()
-  {
+
-    label: 'Account',
+const links = [{
-    to: '/account',
+  label: 'Account',
-    icon: 'i-heroicons-user-solid',
+  to: '/account',
-  },
+  icon: 'i-heroicons-user-solid',
-  {
+}, {
   label: 'Logout',
   to: '/logout',
   icon: 'i-heroicons-arrow-left-on-rectangle',
 }]
+
+if (authStore.user?.roles.includes('admin')) {
+  links.push({
+    label: 'Admin',
+    to: '/admin',
+    icon: 'i-heroicons-cog-solid',
+  })
+}
 </script>
 
 <template>

nuxt/components/color-picker/ColorPicker.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import colors from '#tailwind-config/theme/colors'
+
+const appConfig = useAppConfig()
+const colorMode = useColorMode()
+
+// Computed
+
+const primaryColors = computed(() => appConfig.ui.colors.filter(color => color !== 'primary').map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
+const primary = computed({
+  get() {
+    return primaryColors.value.find(option => option.value === appConfig.ui.primary)
+  },
+  set(option) {
+    appConfig.ui.primary = option.value
+
+    window.localStorage.setItem('nuxt-ui-primary', appConfig.ui.primary)
+  },
+})
+
+const grayColors = computed(() => ['slate', 'cool', 'zinc', 'neutral', 'stone'].map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
+const gray = computed({
+  get() {
+    return grayColors.value.find(option => option.value === appConfig.ui.gray)
+  },
+  set(option) {
+    appConfig.ui.gray = option.value
+
+    window.localStorage.setItem('nuxt-ui-gray', appConfig.ui.gray)
+  },
+})
+</script>
+
+<template>
+  <UPopover mode="hover" :popper="{ strategy: 'absolute' }" :ui="{ width: 'w-[156px]' }">
+    <template #default="{ open }">
+      <UButton color="gray" variant="ghost" square :class="[open && 'bg-gray-50 dark:bg-gray-800']" aria-label="Color picker">
+        <UIcon name="i-heroicons-swatch-20-solid" class="text-primary-500 dark:text-primary-400 size-5" />
+      </UButton>
+    </template>
+
+    <template #panel>
+      <div class="p-2">
+        <div class="grid grid-cols-5 gap-px">
+          <ColorPickerPill v-for="color in primaryColors" :key="color.value" :color="color" :selected="primary" @select="primary = color" />
+        </div>
+
+        <hr class="my-2 border-gray-200 dark:border-gray-800">
+
+        <div class="grid grid-cols-5 gap-px">
+          <ColorPickerPill v-for="color in grayColors" :key="color.value" :color="color" :selected="gray" @select="gray = color" />
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>

nuxt/components/color-picker/ColorPickerPill.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineProps<{ color: { value: string, hex: string }, selected: { value: string } }>()
+defineEmits(['select'])
+</script>
+
+<template>
+  <UTooltip :text="color.value" class="capitalize" :open-delay="500">
+    <UButton
+      color="white"
+      square
+      :ui="{
+        color: {
+          white: {
+            solid: 'ring-0 bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800',
+            ghost: 'hover:bg-gray-50 dark:hover:bg-gray-800/50',
+          },
+        },
+      }"
+      :variant="color.value === selected.value ? 'solid' : 'ghost'"
+      @click.stop.prevent="$emit('select')"
+    >
+      <span class="inline-block size-3 rounded-full" :style="{ backgroundColor: color.hex }" />
+    </UButton>
+  </UTooltip>
+</template>