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 ?