admin/metatron-open-seo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(sidebar): keep hover and active nav backgrounds visually distinct (#84)

Browse Source
This commit is contained in:
Maria Zuheros 2026-07-14 21:33:10 +01:00 committed by GitHub
parent 927e931e51
commit b44dd6e1a7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/client/components/Sidebar.tsx
View File

@ -32,10 +32,16 @@ interface SidebarProps {
const navItemBaseClass = const navItemBaseClass =
"relative flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm text-base-content/70"; "relative flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm text-base-content/70";
const navItemClass = `${navItemBaseClass} transition-colors hover:bg-base-300/50 hover:text-base-content`; // Hover uses a lighter tint than the active background (bg-base-300/50) so a
// hovered item next to the active one stays visually distinct instead of
// merging into a single block.
const navItemClass = `${navItemBaseClass} transition-colors hover:bg-base-300/30 hover:text-base-content`;
const navItemActiveProps = { const navItemActiveProps = {
className: "bg-base-300/50 font-medium text-base-content", // Keep the active tint on hover so the active item does not fall back to the
// lighter hover background of navItemClass.
className:
"bg-base-300/50 hover:bg-base-300/50 font-medium text-base-content",
}; };
function SidebarNavLink({ function SidebarNavLink({