HideyoshiNakazone/hideyoshi-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vitor Hideyoshi
2026-04-10 23:35:03 -03:00
parent 4980395bdf
commit 242395a739
2 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/ui/components/internal/header/desktop-header/base-desktop-header.tsx
View File

@@ -6,6 +6,7 @@ export type HeaderLinksProps = {
href: string; href: string;
label: string; label: string;
condition: boolean; condition: boolean;
active?: boolean;
}>; }>;
}; };
@@ -26,7 +27,7 @@ export const BaseDesktopHeader = ({
<Link <Link
key={link.href} key={link.href}
href={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.label}
</Link> </Link>

9
src/ui/components/internal/header/desktop-header/dynamic-desktop-header.tsx
View File

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