Update app-header.tsx

Fixed active element mark on the navigation bar. 
replaced the div element (which were outside and nav ling) by border

Author: Batmandakh

resources/js/components/app-header.tsx

@@ -161,30 +161,32 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
                                         key={index}
                                         className="relative flex h-full items-center"
                                     >
-                                        <Link
-                                            href={item.href}
-                                            className={cn(
-                                                navigationMenuTriggerStyle(),
-                                                page.url ===
-                                                    (typeof item.href ===
-                                                    'string'
-                                                        ? item.href
-                                                        : item.href.url) &&
-                                                    activeItemStyles,
-                                                'h-9 cursor-pointer px-3',
-                                            )}
+                                        <div className={
+                                            page.url === item.href.url && ("h-full flex items-center border-b border-black dark:border-white")
+                                        }
                                         >
-                                            {item.icon && (
-                                                <Icon
-                                                    iconNode={item.icon}
-                                                    className="mr-2 h-4 w-4"
-                                                />
-                                            )}
-                                            {item.title}
-                                        </Link>
-                                        {page.url === item.href && (
-                                            <div className="absolute bottom-0 left-0 h-0.5 w-full translate-y-px bg-black dark:bg-white"></div>
-                                        )}
+                                            <Link
+                                                href={item.href}
+                                                className={cn(
+                                                    navigationMenuTriggerStyle(),
+                                                    page.url ===
+                                                        (typeof item.href ===
+                                                        'string'
+                                                            ? item.href
+                                                            : item.href.url) &&
+                                                        activeItemStyles,
+                                                    'h-9 cursor-pointer px-3',
+                                                )}
+                                            >
+                                                {item.icon && (
+                                                    <Icon
+                                                        iconNode={item.icon}
+                                                        className="mr-2 h-4 w-4"
+                                                    />
+                                                )}
+                                                {item.title}
+                                            </Link>
+                                        </div>
                                     </NavigationMenuItem>
                                 ))}
                             </NavigationMenuList>