root/tgex-frontend
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update sidebar ui

Browse Source
This commit is contained in:
ivannoskov
2026-01-21 10:36:08 +03:00
parent 1f36a074af
commit 0af5cd7458
8 changed files with 214 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
components/nav-main.tsx
View File

@@ -64,6 +64,9 @@ export function NavMain({
const hasActiveSubmenu =
hasSubmenu && item.items!.some((sub) => pathname === sub.url);
const shouldForceOpen = guideState?.expandedItems?.includes(item.title);
const shouldHighlightButton = item.title === "Аналитика"
? false
: isActive;
const isGuideHighlight = highlightedItem === item.title;
const highlightedButtonClass = isGuideHighlight
? "ring-2 ring-primary/70"
@@ -77,19 +80,27 @@ export function NavMain({
<DropdownMenuTrigger asChild>
<SidebarMenuButton
tooltip={item.title}
isActive={isActive || hasActiveSubmenu}
isActive={shouldHighlightButton}
className={cn(highlightedButtonClass)}
>
{item.icon && (
<item.icon
className={cn(
"h-4 w-4",
// (isActive || hasActiveSubmenu) &&
// "text-[#2B1D49] dark:text-[#5F31F4]"
"h-4 w-4 transition-colors duration-200",
shouldHighlightButton
? "text-[hsl(262_83%_65%)] drop-shadow-[0_0_8px_rgba(147_51_234_0.25)]"
: "text-muted-foreground/90"
)}
/>
)}
<span>{item.title}</span>
<span
className={cn(
"transition-colors duration-200",
shouldHighlightButton
? "text-foreground font-medium"
: "text-muted-foreground/90"
)}
>{item.title}</span>
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
@@ -104,23 +115,28 @@ export function NavMain({
<Link
href={subItem.url}
className={cn(
"flex items-center gap-2",
"flex items-center gap-2 transition-colors duration-200",
isSubActive
? "bg-accent text-accent-foreground"
: ""
: "text-muted-foreground hover:text-foreground"
)}
>
{subItem.icon && (
<subItem.icon
className={cn(
"h-4 w-4",
// isSubActive &&
// "text-[#2B1D49] dark:text-[#5F31F4]"
)}
/>
)}
<span>{subItem.title}</span>
</Link>
{subItem.icon && (
<subItem.icon
className={cn(
"h-4 w-4 transition-colors duration-200",
isSubActive
? "!text-[hsl(262_83%_65%)] drop-shadow-[0_0_8px_rgba(147_51_234_0.25)]"
: "!text-muted-foreground/90"
)}
/>
)}
<span className={cn(
isSubActive
? "text-foreground font-medium"
: "text-muted-foreground/90"
)}>{subItem.title}</span>
</Link>
</DropdownMenuItem>
);
})}
@@ -144,47 +160,71 @@ export function NavMain({
{hasSubmenu ? (
<>
<CollapsibleTrigger asChild>
<SidebarMenuButton
tooltip={item.title}
isActive={isActive || hasActiveSubmenu}
className={cn(highlightedButtonClass)}
>
{item.icon && (
<item.icon
className={cn(
"h-4 w-4",
// (isActive || hasActiveSubmenu) &&
// "text-[#2B1D49] dark:text-[#5F31F4]"
)}
/>
<SidebarMenuButton
tooltip={item.title}
isActive={shouldHighlightButton}
className={cn(highlightedButtonClass)}
>
{item.icon && (
<item.icon
className={cn(
"h-4 w-4 transition-colors duration-200",
shouldHighlightButton
? "text-[hsl(262_83%_65%)] drop-shadow-[0_0_8px_rgba(147_51_234_0.25)]"
: "text-muted-foreground/90"
)}
/>
)}
<span
className={cn(
"transition-colors duration-200",
shouldHighlightButton
? "text-foreground font-medium"
: "text-muted-foreground/90"
)}
<span>{item.title}</span>
<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
</SidebarMenuButton>
</CollapsibleTrigger>
>{item.title}</span>
<ChevronRight
className={cn(
"ml-auto transition-transform duration-200",
shouldHighlightButton
? "text-[hsl(262_83%_65%)]"
: "text-muted-foreground/60",
"group-data-[state=open]/collapsible:rotate-90"
)}
/>
</SidebarMenuButton>
</CollapsibleTrigger>
<CollapsibleContent>
<SidebarMenuSub>
{item.items!.map((subItem) => {
const isSubActive = pathname === subItem.url;
return (
<SidebarMenuSubItem key={subItem.title}>
<SidebarMenuSubButton
asChild
isActive={isSubActive}
>
<Link href={subItem.url} className="flex items-center gap-2">
{subItem.icon && (
<subItem.icon
<SidebarMenuSubButton
asChild
isActive={isSubActive}
>
<Link href={subItem.url} className="flex items-center gap-2">
{subItem.icon && (
<subItem.icon
className={cn(
"h-4 w-4 transition-colors duration-200",
isSubActive
? "!text-[hsl(262_83%_65%)] drop-shadow-[0_0_8px_rgba(147_51_234_0.25)]"
: "!text-muted-foreground/90"
)}
/>
)}
<span
className={cn(
"h-4 w-4",
// isSubActive &&
// "text-[#2B1D49] dark:text-[#5F31F4]"
"transition-colors duration-200",
isSubActive
? "text-foreground font-medium"
: "text-muted-foreground/90"
)}
/>
)}
<span>{subItem.title}</span>
</Link>
</SidebarMenuSubButton>
>{subItem.title}</span>
</Link>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
);
})}
@@ -195,20 +235,28 @@ export function NavMain({
<SidebarMenuButton
asChild
tooltip={item.title}
isActive={isActive}
isActive={shouldHighlightButton}
className={cn(highlightedButtonClass)}
>
<Link href={item.url} className="flex items-center gap-2">
{item.icon && (
<item.icon
className={cn(
"h-4 w-4",
// isActive &&
// "text-[#2B1D49] dark:text-[#5F31F4]"
"h-4 w-4 transition-colors duration-200",
shouldHighlightButton
? "text-[hsl(262_83%_65%)] drop-shadow-[0_0_8px_rgba(147_51_234_0.25)]"
: "text-muted-foreground/90"
)}
/>
)}
<span>{item.title}</span>
<span
className={cn(
"transition-colors duration-200",
shouldHighlightButton
? "text-foreground font-medium"
: "text-muted-foreground/90"
)}
>{item.title}</span>
</Link>
</SidebarMenuButton>
)}