feat: add active state to header links for improved navigation feedback

src/ui/components/internal/header/desktop-header/base-desktop-header.tsx

@@ -6,6 +6,7 @@ export type HeaderLinksProps = {
         href: string;
         label: string;
         condition: boolean;
+        active?: boolean;
     }>;
 };
 
@@ -26,7 +27,7 @@ export const BaseDesktopHeader = ({
                         <Link
                             key={link.href}
                             href={link.href}
-                            className='text-xl font-normal transition-colors hover:font-bold hover:text-primary'
+                            className={`text-xl font-normal transition-colors hover:font-bold hover:text-primary${link.active ? ' underline underline-offset-4' : ''}`}
                         >
                             {link.label}
                         </Link>

src/ui/components/internal/header/desktop-header/dynamic-desktop-header.tsx

@@ -4,8 +4,11 @@ import { getSessionData } from '@/lib/session/session-storage';
 import { BaseDesktopHeader } from '@/ui/components/internal/header/desktop-header/base-desktop-header';
 import { UserButton } from '@/ui/components/internal/user-profile/user-profile-button';
 import { useQuery } from '@tanstack/react-query';
+import { usePathname } from 'next/navigation';
 
 export const DynamicDesktopHeader = () => {
+    const pathname = usePathname();
+
     const { data: sessionData } = useQuery({
         queryKey: ['sessionData'],
         queryFn: async () => {
@@ -15,9 +18,9 @@ export const DynamicDesktopHeader = () => {
     const user = sessionData?.user;
 
     const links = [
-        { href: '/home', label: 'Home', condition: true },
-        { href: '/about', label: 'About', condition: true },
-        { href: '/admin', label: 'Admin', condition: !!user },
+        { href: '/home', label: 'Home', condition: true, active: pathname === '/home' },
+        { href: '/about', label: 'About', condition: true, active: pathname === '/about' },
+        { href: '/admin', label: 'Admin', condition: !!user, active: pathname === '/admin' },
     ];
 
     const userButton = !!user ? <UserButton user={user} /> : <div />;