diff --git a/src/ui/components/internal/header/desktop-header/base-desktop-header.tsx b/src/ui/components/internal/header/desktop-header/base-desktop-header.tsx index 6362b53..1808eb5 100644 --- a/src/ui/components/internal/header/desktop-header/base-desktop-header.tsx +++ b/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.label} diff --git a/src/ui/components/internal/header/desktop-header/dynamic-desktop-header.tsx b/src/ui/components/internal/header/desktop-header/dynamic-desktop-header.tsx index 6904dac..498896c 100644 --- a/src/ui/components/internal/header/desktop-header/dynamic-desktop-header.tsx +++ b/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 ? :
;