pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-16 01:46:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

visual enhancements to sidebar

Browse Source
This commit is contained in:
miloschwartz
2025-12-19 21:57:44 -05:00
parent 5587bd9d59
commit afc19f192b
7 changed files with 78 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/SidebarNav.tsx
View File

@@ -115,7 +115,7 @@ function CollapsibleNavItem({
<button
className={cn(
"flex items-center w-full rounded-md transition-colors",
level === 0 ? "px-3 py-2" : "px-3 py-1.5",
level === 0 ? "px-3 py-1.5" : "px-3 py-1",
isActive
? "bg-secondary font-medium"
: "text-muted-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground",
@@ -124,17 +124,18 @@ function CollapsibleNavItem({
disabled={isDisabled}
>
{item.icon && (
<span className="flex-shrink-0 mr-3 w-5 h-5 flex items-center justify-center">{item.icon}</span>
<span className="flex-shrink-0 mr-3 w-5 h-5 flex items-center justify-center">
{item.icon}
</span>
)}
<div className="flex items-center gap-1.5 flex-1 min-w-0">
<span className="text-left truncate">{t(item.title)}</span>
<div className="flex items-center gap-2 flex-1 min-w-0">
<span className="text-left truncate">
{t(item.title)}
</span>
{item.isBeta && (
<Badge
variant="outline"
className="text-muted-foreground flex-shrink-0"
>
<span className="uppercase font-mono text-yellow-600 dark:text-yellow-800 font-black text-xs">
{t("beta")}
</Badge>
</span>
)}
</div>
<div className="flex items-center gap-1.5 flex-shrink-0 ml-2">
@@ -256,7 +257,11 @@ export function SidebarNav({
href={isDisabled ? "#" : hydratedHref}
className={cn(
"flex items-center rounded-md transition-colors",
isCollapsed ? "px-2 py-2 justify-center" : level === 0 ? "px-3 py-2" : "px-3 py-1.5",
isCollapsed
? "px-2 py-2 justify-center"
: level === 0
? "px-3 py-1.5"
: "px-3 py-1",
isActive
? "bg-secondary font-medium"
: "text-muted-foreground hover:bg-secondary/80 dark:hover:bg-secondary/50 hover:text-foreground",
@@ -284,21 +289,21 @@ export function SidebarNav({
)}
{!isCollapsed && (
<>
<div className="flex items-center gap-1.5 flex-1 min-w-0">
<div className="flex items-center gap-2 flex-1 min-w-0">
<span className="truncate">{t(item.title)}</span>
{item.isBeta && (
<Badge
variant="outline"
className="text-muted-foreground flex-shrink-0"
>
<span className="uppercase font-mono text-yellow-600 dark:text-yellow-800 font-black text-xs">
{t("beta")}
</Badge>
</span>
)}
</div>
{build === "enterprise" &&
item.showEE &&
!isUnlocked() && (
<Badge variant="outlinePrimary" className="flex-shrink-0">
<Badge
variant="outlinePrimary"
className="flex-shrink-0"
>
{t("licenseBadge")}
</Badge>
)}
@@ -309,27 +314,31 @@ export function SidebarNav({
<div
className={cn(
"flex items-center rounded-md transition-colors",
level === 0 ? "px-3 py-2" : "px-3 py-1.5",
level === 0 ? "px-3 py-1.5" : "px-3 py-1",
"text-muted-foreground",
isDisabled && "cursor-not-allowed opacity-60"
)}
>
{item.icon && (
<span className="flex-shrink-0 mr-3 w-5 h-5 flex items-center justify-center">{item.icon}</span>
<span className="flex-shrink-0 mr-3 w-5 h-5 flex items-center justify-center">
{item.icon}
</span>
)}
<div className="flex items-center gap-1.5 flex-1 min-w-0">
<div className="flex items-center gap-2 flex-1 min-w-0">
<span className="truncate">{t(item.title)}</span>
{item.isBeta && (
<Badge
variant="outline"
className="text-muted-foreground flex-shrink-0"
>
<span className="uppercase font-mono text-yellow-600 dark:text-yellow-800 font-black text-xs">
{t("beta")}
</Badge>
</span>
)}
</div>
{build === "enterprise" && item.showEE && !isUnlocked() && (
<Badge variant="outlinePrimary" className="flex-shrink-0 ml-2">{t("licenseBadge")}</Badge>
<Badge
variant="outlinePrimary"
className="flex-shrink-0 ml-2"
>
{t("licenseBadge")}
</Badge>
)}
</div>
);
@@ -422,23 +431,23 @@ export function SidebarNav({
{childItem.icon}
</span>
)}
<div className="flex items-center gap-1.5 flex-1 min-w-0">
<div className="flex items-center gap-2 flex-1 min-w-0">
<span className="truncate">
{t(childItem.title)}
</span>
{childItem.isBeta && (
<Badge
variant="outline"
className="text-muted-foreground flex-shrink-0"
>
<span className="uppercase font-mono text-yellow-600 dark:text-yellow-800 font-black text-xs">
{t("beta")}
</Badge>
</span>
)}
</div>
{build === "enterprise" &&
childItem.showEE &&
!isUnlocked() && (
<Badge variant="outlinePrimary" className="flex-shrink-0 ml-2">
<Badge
variant="outlinePrimary"
className="flex-shrink-0 ml-2"
>
{t(
"licenseBadge"
)}
@@ -481,7 +490,10 @@ export function SidebarNav({
{...props}
>
{sections.map((section, sectionIndex) => (
<div key={section.heading} className={cn(sectionIndex > 0 && "mt-4")}>
<div
key={section.heading}
className={cn(sectionIndex > 0 && "mt-4")}
>
{!isCollapsed && (
<div className="px-3 py-2 text-xs font-medium text-muted-foreground/80 uppercase tracking-wider">
{t(`${section.heading}`)}