Fix: Active indicator in app header layout (#48)

Author: joschuba

resources/js/components/AppHeader.vue

@@ -32,11 +32,11 @@ const props = withDefaults(defineProps<Props>(), {
 const page = usePage();
 const auth = computed(() => page.props.auth);
 
-const isCurrentRoute = (url: string) => {
-    return page.url === url;
-};
+const isCurrentRoute = computed(() => (url: string) => page.url === url);
 
-const activeItemStyles = computed(() => (url: string) => (isCurrentRoute(url) ? 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100' : ''));
+const activeItemStyles = computed(
+    () => (url: string) => (isCurrentRoute.value(url) ? 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100' : ''),
+);
 
 const mainNavItems: NavItem[] = [
     {
@@ -125,7 +125,10 @@ const rightNavItems: NavItem[] = [
                                         {{ item.title }}
                                     </NavigationMenuLink>
                                 </Link>
-                                <div class="absolute bottom-0 left-0 h-0.5 w-full translate-y-px bg-black dark:bg-white"></div>
+                                <div
+                                    v-if="isCurrentRoute(item.href)"
+                                    class="absolute bottom-0 left-0 h-0.5 w-full translate-y-px bg-black dark:bg-white"
+                                ></div>
                             </NavigationMenuItem>
                         </NavigationMenuList>
                     </NavigationMenu>