refactor: update navbar and mobile menu styles for improved accessibility
- Replaced primary color references with foreground color for hover and focus states in Navbar and MainMobileMenu components. - Adjusted padding in the mobile menu's bottom buttons for better layout consistency. - Switched the global CSS import from theme.css to theme-blue.css for updated styling.
This commit is contained in:
javayhu
parent
41b6d0b63b
commit
a853c56994
@ -136,7 +136,7 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
|
||||
className="fixed w-full inset-0 z-50 mt-[72px] overflow-y-auto
|
||||
bg-background backdrop-blur-md animate-in fade-in-0"
|
||||
>
|
||||
<div className="size-full flex flex-col items-start space-y-4 px-4">
|
||||
<div className="size-full flex flex-col items-start space-y-4">
|
||||
{/* action buttons */}
|
||||
{userLoggedIn ? null : (
|
||||
<div className="w-full flex flex-col gap-4">
|
||||
@ -199,9 +199,10 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
|
||||
className={cn(
|
||||
'flex w-full items-center justify-between text-left',
|
||||
'bg-transparent text-muted-foreground',
|
||||
'hover:bg-transparent hover:text-primary focus:bg-transparent focus:text-primary',
|
||||
'hover:bg-transparent hover:text-foreground',
|
||||
'focus:bg-transparent focus:text-foreground',
|
||||
isActive &&
|
||||
'font-semibold bg-transparent text-primary'
|
||||
'font-semibold bg-transparent text-foreground'
|
||||
)}
|
||||
>
|
||||
<span className="text-base">{item.title}</span>
|
||||
@ -235,9 +236,10 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
|
||||
buttonVariants({ variant: 'ghost' }),
|
||||
'group h-auto w-full justify-start gap-4 p-1',
|
||||
'bg-transparent text-muted-foreground',
|
||||
'hover:bg-transparent hover:text-primary focus:bg-transparent focus:text-primary',
|
||||
'hover:bg-transparent hover:text-foreground',
|
||||
'focus:bg-transparent focus:text-foreground',
|
||||
isSubItemActive &&
|
||||
'font-semibold bg-transparent text-primary'
|
||||
'font-semibold bg-transparent text-foreground'
|
||||
)}
|
||||
onClick={onLinkClicked}
|
||||
>
|
||||
@ -245,9 +247,10 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
|
||||
className={cn(
|
||||
'flex size-8 shrink-0 items-center justify-center transition-colors',
|
||||
'bg-transparent text-muted-foreground',
|
||||
'group-hover:bg-transparent group-hover:text-primary group-focus:bg-transparent group-focus:text-primary',
|
||||
'group-hover:bg-transparent group-hover:text-foreground',
|
||||
'group-focus:bg-transparent group-focus:text-foreground',
|
||||
isSubItemActive &&
|
||||
'bg-transparent text-primary'
|
||||
'bg-transparent text-foreground'
|
||||
)}
|
||||
>
|
||||
{subItem.icon ? subItem.icon : null}
|
||||
@ -256,9 +259,10 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
|
||||
<span
|
||||
className={cn(
|
||||
'text-sm text-muted-foreground',
|
||||
'group-hover:bg-transparent group-hover:text-primary group-focus:bg-transparent group-focus:text-primary',
|
||||
'group-hover:bg-transparent group-hover:text-foreground',
|
||||
'group-focus:bg-transparent group-focus:text-foreground',
|
||||
isSubItemActive &&
|
||||
'font-semibold bg-transparent text-primary'
|
||||
'font-semibold bg-transparent text-foreground'
|
||||
)}
|
||||
>
|
||||
{subItem.title}
|
||||
@ -267,9 +271,10 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
|
||||
<p
|
||||
className={cn(
|
||||
'text-xs text-muted-foreground',
|
||||
'group-hover:bg-transparent group-hover:text-primary/80 group-focus:bg-transparent group-focus:text-primary/80',
|
||||
'group-hover:bg-transparent group-hover:text-foreground/80',
|
||||
'group-focus:bg-transparent group-focus:text-foreground/80',
|
||||
isSubItemActive &&
|
||||
'bg-transparent text-primary/80'
|
||||
'bg-transparent text-foreground/80'
|
||||
)}
|
||||
>
|
||||
{subItem.description}
|
||||
@ -280,9 +285,10 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
|
||||
<ArrowUpRightIcon
|
||||
className={cn(
|
||||
'size-4 shrink-0 text-muted-foreground',
|
||||
'group-hover:bg-transparent group-hover:text-primary group-focus:bg-transparent group-focus:text-primary',
|
||||
'group-hover:bg-transparent group-hover:text-foreground',
|
||||
'group-focus:bg-transparent group-focus:text-foreground',
|
||||
isSubItemActive &&
|
||||
'bg-transparent text-primary'
|
||||
'bg-transparent text-foreground'
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
@ -302,8 +308,9 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
|
||||
buttonVariants({ variant: 'ghost' }),
|
||||
'w-full justify-start',
|
||||
'bg-transparent text-muted-foreground',
|
||||
'hover:bg-transparent hover:text-primary focus:bg-transparent focus:text-primary',
|
||||
isActive && 'font-semibold bg-transparent text-primary'
|
||||
'hover:bg-transparent hover:text-foreground',
|
||||
'focus:bg-transparent focus:text-foreground',
|
||||
isActive && 'font-semibold bg-transparent text-foreground'
|
||||
)}
|
||||
onClick={onLinkClicked}
|
||||
>
|
||||
@ -316,7 +323,7 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
|
||||
</ul>
|
||||
|
||||
{/* bottom buttons */}
|
||||
<div className="flex w-full items-center justify-between gap-4 border-t border-border/50 py-4">
|
||||
<div className="flex w-full items-center justify-between gap-4 border-t border-border/50 p-4">
|
||||
<LocaleSelector />
|
||||
<ThemeSwitcherHorizontal />
|
||||
</div>
|
||||
|
||||
@ -33,9 +33,9 @@ interface NavBarProps {
|
||||
const customNavigationMenuTriggerStyle = cn(
|
||||
navigationMenuTriggerStyle(),
|
||||
'relative bg-transparent text-muted-foreground',
|
||||
'hover:bg-transparent hover:text-primary focus:bg-transparent focus:text-primary',
|
||||
'data-[active]:font-semibold data-[active]:bg-transparent data-[active]:text-primary',
|
||||
'data-[state=open]:bg-transparent data-[state=open]:text-primary'
|
||||
'hover:bg-transparent hover:text-foreground focus:bg-transparent focus:text-foreground',
|
||||
'data-[active]:font-semibold data-[active]:bg-transparent data-[active]:text-foreground',
|
||||
'data-[state=open]:bg-transparent data-[state=open]:text-foreground'
|
||||
);
|
||||
|
||||
export function Navbar({ scroll }: NavBarProps) {
|
||||
@ -125,9 +125,10 @@ export function Navbar({ scroll }: NavBarProps) {
|
||||
className={cn(
|
||||
'flex size-8 shrink-0 items-center justify-center transition-colors',
|
||||
'bg-transparent text-muted-foreground',
|
||||
'group-hover:bg-transparent group-hover:text-primary group-focus:bg-transparent group-focus:text-primary',
|
||||
'group-hover:bg-transparent group-hover:text-foreground',
|
||||
'group-focus:bg-transparent group-focus:text-foreground',
|
||||
isSubItemActive &&
|
||||
'bg-transparent text-primary'
|
||||
'bg-transparent text-foreground'
|
||||
)}
|
||||
>
|
||||
{subItem.icon ? subItem.icon : null}
|
||||
@ -136,9 +137,10 @@ export function Navbar({ scroll }: NavBarProps) {
|
||||
<div
|
||||
className={cn(
|
||||
'text-sm font-medium text-muted-foreground',
|
||||
'group-hover:bg-transparent group-hover:text-primary group-focus:bg-transparent group-focus:text-primary',
|
||||
'group-hover:bg-transparent group-hover:text-foreground',
|
||||
'group-focus:bg-transparent group-focus:text-foreground',
|
||||
isSubItemActive &&
|
||||
'bg-transparent text-primary'
|
||||
'bg-transparent text-foreground'
|
||||
)}
|
||||
>
|
||||
{subItem.title}
|
||||
@ -147,9 +149,10 @@ export function Navbar({ scroll }: NavBarProps) {
|
||||
<div
|
||||
className={cn(
|
||||
'text-sm text-muted-foreground',
|
||||
'group-hover:bg-transparent group-hover:text-primary/80 group-focus:bg-transparent group-focus:text-primary/80',
|
||||
'group-hover:bg-transparent group-hover:text-foreground/80',
|
||||
'group-focus:bg-transparent group-focus:text-foreground/80',
|
||||
isSubItemActive &&
|
||||
'bg-transparent text-primary/80'
|
||||
'bg-transparent text-foreground/80'
|
||||
)}
|
||||
>
|
||||
{subItem.description}
|
||||
@ -160,9 +163,10 @@ export function Navbar({ scroll }: NavBarProps) {
|
||||
<ArrowUpRightIcon
|
||||
className={cn(
|
||||
'size-4 shrink-0 text-muted-foreground',
|
||||
'group-hover:bg-transparent group-hover:text-primary group-focus:bg-transparent group-focus:text-primary',
|
||||
'group-hover:bg-transparent group-hover:text-foreground',
|
||||
'group-focus:bg-transparent group-focus:text-foreground',
|
||||
isSubItemActive &&
|
||||
'bg-transparent text-primary'
|
||||
'bg-transparent text-foreground'
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
/* @import "./theme-blue.css"; */
|
||||
/* @import "./theme-violet.css"; */
|
||||
/* @import "./theme-zinc.css"; */
|
||||
@import "./theme.css";
|
||||
@import "./theme-blue.css";
|
||||
|
||||
/* please notice that sidebar theme need to be set manually */
|
||||
/* https://ui.shadcn.com/docs/components/sidebar#theming */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user