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

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

@@ -46,7 +46,7 @@ function NavItemWithSubMenu({ item }: { item: NavItem }) {
<SidebarMenuButton <SidebarMenuButton
tooltip={item.title} tooltip={item.title}
className={cn( 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 item.isActive
? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary" ? "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" : "text-muted-foreground hover:text-foreground hover:bg-white/5"
@@ -65,14 +65,17 @@ function NavItemWithSubMenu({ item }: { item: NavItem }) {
{item.title} {item.title}
</div> </div>
{item.subItems?.map((subItem) => ( {item.subItems?.map((subItem) => (
<DropdownMenuItem key={subItem.title} asChild> <DropdownMenuItem key={subItem.title} asChild className="group/dropitem">
<Link <Link
to={subItem.url} to={subItem.url}
className={cn( className={cn(
"cursor-pointer py-4 min-h-10", "cursor-pointer py-4 min-h-10 flex items-center gap-2",
subItem.isActive && "text-primary bg-primary/10" 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} {subItem.title}
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
@@ -89,20 +92,20 @@ function NavItemWithSubMenu({ item }: { item: NavItem }) {
<SidebarMenuItem className="flex flex-col"> <SidebarMenuItem className="flex flex-col">
<CollapsibleTrigger asChild> <CollapsibleTrigger asChild>
<SidebarMenuButton <SidebarMenuButton
tooltip={item.title} tooltip={item.title}
className={cn( 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 item.isActive
? "bg-primary/10 text-primary shadow-[inset_4px_0_0_0_hsl(var(--primary))] hover:bg-primary/15 hover:text-primary" ? "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" : "text-muted-foreground hover:text-foreground hover:bg-white/5"
)} )}
> >
<item.icon className={cn("size-5", item.isActive && "text-primary fill-primary/20")} /> <item.icon className={cn("size-5", item.isActive && "text-primary fill-primary/20")} />
<span className={cn("group-data-[collapsible=icon]:hidden", item.isActive && "text-primary")}> <span className={cn("group-data-[collapsible=icon]:hidden", item.isActive && "text-primary")}>
{item.title} {item.title}
</span> </span>
<ChevronRight className="ml-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 group-data-[collapsible=icon]:hidden" /> <ChevronRight className="ml-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 group-data-[collapsible=icon]:hidden" />
</SidebarMenuButton> </SidebarMenuButton>
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"> <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
<SidebarMenuSub> <SidebarMenuSub>
@@ -112,13 +115,14 @@ function NavItemWithSubMenu({ item }: { item: NavItem }) {
asChild asChild
isActive={subItem.isActive} isActive={subItem.isActive}
className={cn( className={cn(
"transition-all duration-200", "transition-all duration-200 py-4 min-h-10 group/subitem",
subItem.isActive subItem.isActive
? "text-primary bg-primary/10" ? "text-primary bg-primary/10"
: "text-muted-foreground hover:text-foreground" : "text-muted-foreground hover:text-inherit"
)} )}
> >
<Link to={subItem.url}> <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> <span>{subItem.title}</span>
</Link> </Link>
</SidebarMenuSubButton> </SidebarMenuSubButton>

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

@@ -686,8 +686,7 @@ function SidebarMenuSubButton({
data-size={size} data-size={size}
data-active={isActive} data-active={isActive}
className={cn( 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", "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",
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
size === "sm" && "text-xs", size === "sm" && "text-xs",
size === "md" && "text-sm", size === "md" && "text-sm",
"group-data-[collapsible=icon]:hidden", "group-data-[collapsible=icon]:hidden",

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

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