@@ -48,7 +48,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
4848 const getInitials = useInitials ( ) ;
4949 return (
5050 < >
51- < div className = "border-sidebar-border/80 border-b " >
51+ < div className = "border-b border- sidebar-border/80" >
5252 < div className = "mx-auto flex h-16 items-center px-4 md:max-w-7xl" >
5353 { /* Mobile Menu */ }
5454 < div className = "lg:hidden" >
@@ -58,7 +58,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
5858 < Menu className = "h-5 w-5" />
5959 </ Button >
6060 </ SheetTrigger >
61- < SheetContent side = "left" className = "bg-sidebar flex h-full w-64 flex-col items-stretch justify-between" >
61+ < SheetContent side = "left" className = "flex h-full w-64 flex-col items-stretch justify-between bg-sidebar " >
6262 < SheetTitle className = "sr-only" > Navigation Menu</ SheetTitle >
6363 < SheetHeader className = "flex justify-start text-left" >
6464 < AppLogoIcon className = "h-6 w-6 fill-current text-black dark:text-white" />
@@ -138,7 +138,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
138138 href = { item . href }
139139 target = "_blank"
140140 rel = "noopener noreferrer"
141- className = "group text-accent-foreground ring-offset-background hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring ml-1 inline-flex h-9 w-9 items-center justify-center rounded-md bg-transparent p-0 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
141+ className = "group ml-1 inline-flex h-9 w-9 items-center justify-center rounded-md bg-transparent p-0 text-sm font-medium text-accent-foreground ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
142142 >
143143 < span className = "sr-only" > { item . title } </ span >
144144 { item . icon && < Icon iconNode = { item . icon } className = "size-5 opacity-80 group-hover:opacity-100" /> }
@@ -171,7 +171,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
171171 </ div >
172172 </ div >
173173 { breadcrumbs . length > 1 && (
174- < div className = "border-sidebar-border/70 flex w-full border-b" >
174+ < div className = "flex w-full border-b border-sidebar-border/70 " >
175175 < div className = "mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl" >
176176 < Breadcrumbs breadcrumbs = { breadcrumbs } />
177177 </ div >
0 commit comments