add time overview page

resources/js/Components/NavigationSidebarItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Component } from 'vue';
+import { Link } from '@inertiajs/vue3';
 
 defineProps<{
     title: string;
@@ -11,13 +12,13 @@ defineProps<{
 
 <template>
     <li>
-        <a
+        <Link
             :href="href"
             :class="[
                 current
                     ? 'bg-menu-active text-white'
-                    : 'text-indigo-200 hover:text-white hover:bg-menu-active',
-                'group flex gap-x-3 rounded-md px-3 py-2 transition leading-6 font-medium',
+                    : 'text-muted hover:text-white hover:bg-menu-active ',
+                'group flex gap-x-2 rounded-md px-2 py-1.5 transition leading-6 font-semibold text-sm items-center',
             ]">
             <component
                 :is="icon"
@@ -25,10 +26,10 @@ defineProps<{
                     current
                         ? 'text-icon-active'
                         : 'text-icon-default group-hover:text-icon-active',
-                    'transition h-6 w-6 shrink-0',
+                    'transition h-5 w-5 shrink-0',
                 ]"
                 aria-hidden="true" />
             {{ title }}
-        </a>
+        </Link>
     </li>
 </template>