HotPlate/discord-rpg-concept
1
0
Fork 0
forked from syntaxbullet/aurorabot
Code Pull Requests Activity

fix: update sub-navigation item colors for active, hover, and default states

Browse Source
This commit is contained in:
syntaxbullet
2026-01-16 16:27:23 +01:00
parent 58f261562a
commit 3c1334b30e
3 changed files with 33 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/components/layout/app-sidebar.tsx
View File

@@ -46,7 +46,7 @@ function NavItemWithSubMenu({ item }: { item: NavItem }) {
<SidebarMenuButton
tooltip={item.title}
className={cn(
"transition-all duration-200 ease-in-out font-medium",
"transition-all duration-200 ease-in-out font-medium py-4 min-h-10",
item.isActive
? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary"
: "text-muted-foreground hover:text-foreground hover:bg-white/5"
@@ -65,14 +65,17 @@ function NavItemWithSubMenu({ item }: { item: NavItem }) {
{item.title}
</div>
{item.subItems?.map((subItem) => (
<DropdownMenuItem key={subItem.title} asChild>
<DropdownMenuItem key={subItem.title} asChild className="group/dropitem">
<Link
to={subItem.url}
className={cn(
"cursor-pointer py-4 min-h-10",
subItem.isActive && "text-primary bg-primary/10"
"cursor-pointer py-4 min-h-10 flex items-center gap-2",
subItem.isActive
? "text-primary bg-primary/10"
: "text-muted-foreground hover:text-inherit"
)}
>
<subItem.icon className={cn("size-4", subItem.isActive ? "text-primary" : "text-muted-foreground group-hover/dropitem:text-inherit")} />
{subItem.title}
</Link>
</DropdownMenuItem>
@@ -91,7 +94,7 @@ function NavItemWithSubMenu({ item }: { item: NavItem }) {
<SidebarMenuButton
tooltip={item.title}
className={cn(
"transition-all duration-200 ease-in-out font-medium",
"transition-all duration-200 ease-in-out font-medium py-4 min-h-10",
item.isActive
? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary"
: "text-muted-foreground hover:text-foreground hover:bg-white/5"
@@ -112,13 +115,14 @@ function NavItemWithSubMenu({ item }: { item: NavItem }) {
asChild
isActive={subItem.isActive}
className={cn(
"transition-all duration-200",
"transition-all duration-200 py-4 min-h-10 group/subitem",
subItem.isActive
? "text-primary bg-primary/10"
: "text-muted-foreground hover:text-foreground"
: "text-muted-foreground hover:text-inherit"
)}
>
<Link to={subItem.url}>
<subItem.icon className={cn("size-4", subItem.isActive ? "text-primary" : "text-muted-foreground group-hover/subitem:text-inherit")} />
<span>{subItem.title}</span>
</Link>
</SidebarMenuSubButton>

3
web/src/components/ui/sidebar.tsx
View File

@@ -686,8 +686,7 @@ function SidebarMenuSubButton({
data-size={size}
data-active={isActive}
className={cn(
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
"ring-sidebar-ring active:bg-sidebar-accent active:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
size === "sm" && "text-xs",
size === "md" && "text-sm",
"group-data-[collapsible=icon]:hidden",

16
web/src/contexts/navigation-context.tsx
View File

@@ -1,10 +1,11 @@
import * as React from "react"
import { useLocation, type Location } from "react-router-dom"
import { Home, Palette, ShieldCheck, Users, Settings, BarChart3, Scroll, type LucideIcon } from "lucide-react"
import { Home, Palette, ShieldCheck, Settings, LayoutDashboard, Trophy, SlidersHorizontal, Coins, Cog, UserCog, type LucideIcon } from "lucide-react"
export interface NavSubItem {
title: string
url: string
icon: LucideIcon
isActive?: boolean
}
@@ -43,9 +44,8 @@ const NAV_CONFIG: NavConfigItem[] = [
url: "/admin",
icon: ShieldCheck,
subItems: [
{ title: "Overview", url: "/admin/overview" },
{ title: "Quests", url: "/admin/quests" },
{ title: "Overview", url: "/admin/overview", icon: LayoutDashboard },
{ title: "Quests", url: "/admin/quests", icon: Trophy },
]
},
{
@@ -53,10 +53,10 @@ const NAV_CONFIG: NavConfigItem[] = [
url: "/settings",
icon: Settings,
subItems: [
{ title: "General", url: "/settings/general" },
{ title: "Economy", url: "/settings/economy" },
{ title: "Systems", url: "/settings/systems" },
{ title: "Roles", url: "/settings/roles" },
{ title: "General", url: "/settings/general", icon: SlidersHorizontal },
{ title: "Economy", url: "/settings/economy", icon: Coins },
{ title: "Systems", url: "/settings/systems", icon: Cog },
{ title: "Roles", url: "/settings/roles", icon: UserCog },
]
},
]