From f2c6389b21cde99735d594f6033049f1131c4c64 Mon Sep 17 00:00:00 2001 From: matteoscrugli Date: Mon, 22 Dec 2025 21:42:10 +0100 Subject: [PATCH] Add active state highlighting to user menu MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Highlight user menu trigger when on pages accessible from dropdown (admin/*, settings, api-keys) - Add .active styling for dropdown menu items (current page) - Use NavLink end prop on /admin to prevent false positive matches - Support auto accent color overrides for light backgrounds 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- frontend/src/components/UserMenu.tsx | 11 +++++- frontend/src/styles/Sidebar.css | 55 ++++++++++++++++++++++++++++ 2 files changed, 64 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/UserMenu.tsx b/frontend/src/components/UserMenu.tsx index c2b485a..8afe89e 100644 --- a/frontend/src/components/UserMenu.tsx +++ b/frontend/src/components/UserMenu.tsx @@ -1,5 +1,5 @@ import { useState, useRef, useEffect } from 'react'; -import { NavLink, useNavigate } from 'react-router-dom'; +import { NavLink, useNavigate, useLocation } from 'react-router-dom'; import { useAuth } from '../contexts/AuthContext'; import { useTranslation } from '../contexts/LanguageContext'; import { useTheme } from '../contexts/ThemeContext'; @@ -12,9 +12,15 @@ export default function UserMenu({ onOpenChange }: { onOpenChange?: (isOpen: boo const { theme, toggleTheme, darkModeLocation, languageLocation, showDarkModeToggle, showLanguageToggle, hasInitializedSettings: themeInitialized } = useTheme(); const { isCollapsed, isMobileOpen, closeMobileMenu, sidebarMode } = useSidebar(); const { viewMode } = useViewMode(); + const location = useLocation(); const [isOpen, setIsOpen] = useState(false); const menuRef = useRef(null); + // Check if we're on an admin page or settings page (pages accessible from this menu) + const isMenuPageActive = location.pathname.startsWith('/admin') || + location.pathname === '/settings' || + location.pathname === '/api-keys'; + useEffect(() => { onOpenChange?.(isOpen); }, [isOpen, onOpenChange]); @@ -68,6 +74,7 @@ export default function UserMenu({ onOpenChange }: { onOpenChange?: (isOpen: boo