feat: some ui updates

This commit is contained in:
ivannoskov
2026-01-07 15:46:30 +03:00
parent 3b6b97447b
commit 073be940b5
9 changed files with 840 additions and 722 deletions

View File

@@ -45,6 +45,7 @@ export function NavMain({
items?: {
title: string;
url: string;
icon?: LucideIcon;
}[];
}[];
guideState?: NavGuideState;
@@ -79,7 +80,15 @@ export function NavMain({
isActive={isActive || hasActiveSubmenu}
className={cn(highlightedButtonClass)}
>
{item.icon && <item.icon />}
{item.icon && (
<item.icon
className={cn(
"h-4 w-4",
(isActive || hasActiveSubmenu) &&
"text-[#2B1D49] dark:text-[#5F31F4]"
)}
/>
)}
<span>{item.title}</span>
</SidebarMenuButton>
</DropdownMenuTrigger>
@@ -94,13 +103,23 @@ export function NavMain({
<DropdownMenuItem key={subItem.title} asChild>
<Link
href={subItem.url}
className={
className={cn(
"flex items-center gap-2",
isSubActive
? "bg-accent text-accent-foreground"
: ""
}
)}
>
{subItem.title}
{subItem.icon && (
<subItem.icon
className={cn(
"h-4 w-4",
isSubActive &&
"text-[#2B1D49] dark:text-[#5F31F4]"
)}
/>
)}
<span>{subItem.title}</span>
</Link>
</DropdownMenuItem>
);
@@ -130,7 +149,15 @@ export function NavMain({
isActive={isActive || hasActiveSubmenu}
className={cn(highlightedButtonClass)}
>
{item.icon && <item.icon />}
{item.icon && (
<item.icon
className={cn(
"h-4 w-4",
(isActive || hasActiveSubmenu) &&
"text-[#2B1D49] dark:text-[#5F31F4]"
)}
/>
)}
<span>{item.title}</span>
<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
</SidebarMenuButton>
@@ -145,7 +172,16 @@ export function NavMain({
asChild
isActive={isSubActive}
>
<Link href={subItem.url}>
<Link href={subItem.url} className="flex items-center gap-2">
{subItem.icon && (
<subItem.icon
className={cn(
"h-4 w-4",
isSubActive &&
"text-[#2B1D49] dark:text-[#5F31F4]"
)}
/>
)}
<span>{subItem.title}</span>
</Link>
</SidebarMenuSubButton>
@@ -162,8 +198,16 @@ export function NavMain({
isActive={isActive}
className={cn(highlightedButtonClass)}
>
<Link href={item.url}>
{item.icon && <item.icon />}
<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]"
)}
/>
)}
<span>{item.title}</span>
</Link>
</SidebarMenuButton>