Menubar ui

Title
Match menu theme to light/dark mode

Summary
Align the slide-out menu styling with the active site theme so it no longer stays dark in light mode. The menu now uses theme-aware colors for background, text, borders, hover states, and popovers to match light/dark appearance automatically.

Changes

1. Updated menu container to use bg-background and text-foreground instead of hardcoded dark colors.
2. Replaced dark-only borders and hover styles with theme tokens (border-border, bg-muted, text-muted-foreground).
3. Updated role dropdown and help popover to use bg-popover / text-popover-foreground with theme-aware borders.
4. Adjusted active/hover states to use bg-primary/10 and bg-muted for consistent contrast in both themes.

Files Updated

1. src/components/AppLayout.tsx

Behavior Before
Menu was always dark, even when the app theme was light.

Behavior After
Menu follows the app theme: light in light mode, dark in dark mode.

Testing

1. Manual: toggle theme and open the menu; verify background/text/hover styles adapt correctly.