songtianlun/prmbr-image-mksaas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update navbar component styles to use accent foreground for active and hover states

Browse Source
This commit is contained in:
javayhu 2025-08-24 21:01:36 +08:00
parent cb9c3132fd
commit 610346055f
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/layout/navbar.tsx
View File

@ -37,8 +37,8 @@ const customNavigationMenuTriggerStyle = cn(
'relative bg-transparent text-muted-foreground cursor-pointer', 'relative bg-transparent text-muted-foreground cursor-pointer',
'hover:bg-accent hover:text-accent-foreground', 'hover:bg-accent hover:text-accent-foreground',
'focus:bg-accent focus:text-accent-foreground', 'focus:bg-accent focus:text-accent-foreground',
'data-active:font-semibold data-active:bg-transparent data-active:text-foreground', 'data-active:font-semibold data-active:bg-transparent data-active:text-accent-foreground',
'data-[state=open]:bg-transparent data-[state=open]:text-foreground' 'data-[state=open]:bg-transparent data-[state=open]:text-accent-foreground'
); );
export function Navbar({ scroll }: NavBarProps) { export function Navbar({ scroll }: NavBarProps) {
@ -132,10 +132,10 @@ export function Navbar({ scroll }: NavBarProps) {
className={cn( className={cn(
'flex size-8 shrink-0 items-center justify-center transition-colors', 'flex size-8 shrink-0 items-center justify-center transition-colors',
'bg-transparent text-muted-foreground', 'bg-transparent text-muted-foreground',
'group-hover:bg-transparent group-hover:text-foreground', 'group-hover:bg-transparent group-hover:text-accent-foreground',
'group-focus:bg-transparent group-focus:text-foreground', 'group-focus:bg-transparent group-focus:text-accent-foreground',
isSubItemActive && isSubItemActive &&
'bg-transparent text-foreground' 'bg-transparent text-accent-foreground'
)} )}
> >
{subItem.icon ? subItem.icon : null} {subItem.icon ? subItem.icon : null}
@ -144,10 +144,10 @@ export function Navbar({ scroll }: NavBarProps) {
<div <div
className={cn( className={cn(
'text-sm font-medium text-muted-foreground', 'text-sm font-medium text-muted-foreground',
'group-hover:bg-transparent group-hover:text-foreground', 'group-hover:bg-transparent group-hover:text-accent-foreground',
'group-focus:bg-transparent group-focus:text-foreground', 'group-focus:bg-transparent group-focus:text-accent-foreground',
isSubItemActive && isSubItemActive &&
'bg-transparent text-foreground' 'bg-transparent text-accent-foreground'
)} )}
> >
{subItem.title} {subItem.title}
@ -156,10 +156,10 @@ export function Navbar({ scroll }: NavBarProps) {
<div <div
className={cn( className={cn(
'text-sm text-muted-foreground', 'text-sm text-muted-foreground',
'group-hover:bg-transparent group-hover:text-foreground/80', 'group-hover:bg-transparent group-hover:text-accent-foreground/80',
'group-focus:bg-transparent group-focus:text-foreground/80', 'group-focus:bg-transparent group-focus:text-accent-foreground/80',
isSubItemActive && isSubItemActive &&
'bg-transparent text-foreground/80' 'bg-transparent text-accent-foreground/80'
)} )}
> >
{subItem.description} {subItem.description}
@ -170,10 +170,10 @@ export function Navbar({ scroll }: NavBarProps) {
<ArrowUpRightIcon <ArrowUpRightIcon
className={cn( className={cn(
'size-4 shrink-0 text-muted-foreground', 'size-4 shrink-0 text-muted-foreground',
'group-hover:bg-transparent group-hover:text-foreground', 'group-hover:bg-transparent group-hover:text-accent-foreground',
'group-focus:bg-transparent group-focus:text-foreground', 'group-focus:bg-transparent group-focus:text-accent-foreground',
isSubItemActive && isSubItemActive &&
'bg-transparent text-foreground' 'bg-transparent text-accent-foreground'
)} )}
/> />
)} )}