soroushdes/Teamup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Colorful sidebar: per-group icon chips, vivid gradient, gradient logo

Browse Source 
The nav was too monochrome. Each item now has a color-coded rounded icon chip (group
palette: amber start, sky Work, emerald Organization, violet AI & libraries, teal
Insights, pink Help), the sidebar uses a richer multi-hue indigo→violet→magenta glass
gradient, and the logo is a gradient.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-16 08:14:14 +03:30
parent c9be692d52
commit 0496cb1436
1 changed files with 32 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/AppShell.tsx
+32 -19
View File
@@ -32,10 +32,16 @@ export function AppShell({ children }: { children: ReactNode }) {
<div className="flex min-h-screen text-foreground">
<aside
className="flex w-60 shrink-0 flex-col border-r border-white/15 text-sidebar-foreground backdrop-blur-2xl"
style={{ background: 'linear-gradient(180deg, oklch(0.27 0.1 287 / 0.78) 0%, oklch(0.2 0.085 298 / 0.78) 100%)' }}
style={{
background:
'linear-gradient(168deg, oklch(0.32 0.14 268 / 0.82) 0%, oklch(0.28 0.15 292 / 0.82) 42%, oklch(0.26 0.15 318 / 0.82) 72%, oklch(0.24 0.13 340 / 0.82) 100%)',
}}
>
<div className="flex items-center gap-3 px-5 py-4">
<span className="grid size-8 place-items-center rounded-md bg-sidebar-primary font-bold text-sidebar-primary-foreground">
<span
className="grid size-8 place-items-center rounded-md font-bold text-white shadow-sm"
style={{ background: 'linear-gradient(135deg, #6366f1, #d946ef)' }}
>
T
</span>
<div className="leading-tight">
@@ -47,31 +53,31 @@ export function AppShell({ children }: { children: ReactNode }) {
<Separator className="bg-sidebar-border" />
<nav className="flex flex-1 flex-col gap-0.5 overflow-y-auto p-3">
<NavItem icon={Rocket} label="Get started" to="/start" />
<NavItem icon={Rocket} label="Get started" to="/start" color="#fbbf24" />
<NavSection label="Work" />
<NavItem icon={LayoutDashboard} label="Board" to="/" />
<NavItem icon={Sparkles} label="Team" to="/team" />
<NavItem icon={Inbox} label="Cartable" to="/cartable" />
<NavItem icon={ShieldCheck} label="Review inbox" to="/reviews" />
<NavItem icon={LayoutDashboard} label="Board" to="/" color="#38bdf8" />
<NavItem icon={Sparkles} label="Team" to="/team" color="#38bdf8" />
<NavItem icon={Inbox} label="Cartable" to="/cartable" color="#38bdf8" />
<NavItem icon={ShieldCheck} label="Review inbox" to="/reviews" color="#38bdf8" />
<NavSection label="Organization" />
<NavItem icon={Boxes} label="Structure" to="/structure" />
<NavItem icon={Network} label="Org chart" to="/org" />
<NavItem icon={Users} label="Members" to="/members" />
<NavItem icon={Boxes} label="Structure" to="/structure" color="#34d399" />
<NavItem icon={Network} label="Org chart" to="/org" color="#34d399" />
<NavItem icon={Users} label="Members" to="/members" color="#34d399" />
<NavSection label="AI & libraries" />
<NavItem icon={Bot} label="AI seats" to="/seats" />
<NavItem icon={BookMarked} label="Skills" to="/skills" />
<NavItem icon={BookUser} label="Agent profiles" to="/agent-profiles" />
<NavItem icon={Package} label="Product profiles" to="/product-profiles" />
<NavItem icon={Bot} label="AI seats" to="/seats" color="#a78bfa" />
<NavItem icon={BookMarked} label="Skills" to="/skills" color="#a78bfa" />
<NavItem icon={BookUser} label="Agent profiles" to="/agent-profiles" color="#a78bfa" />
<NavItem icon={Package} label="Product profiles" to="/product-profiles" color="#a78bfa" />
<NavSection label="Insights" />
<NavItem icon={Gauge} label="Performance" to="/performance" />
<NavItem icon={ChartColumn} label="Analytics" to="/analytics" />
<NavItem icon={Gauge} label="Performance" to="/performance" color="#2dd4bf" />
<NavItem icon={ChartColumn} label="Analytics" to="/analytics" color="#2dd4bf" />
<NavSection label="Help" />
<NavItem icon={BookOpen} label="Knowledge base" to="/help" />
<NavItem icon={BookOpen} label="Knowledge base" to="/help" color="#f472b6" />
</nav>
<Separator className="bg-sidebar-border" />
@@ -108,17 +114,19 @@ function NavItem({
label,
to,
muted,
color,
}: {
icon: LucideIcon
label: string
to?: string
muted?: boolean
color?: string
}) {
const location = useLocation()
const active = to ? location.pathname === to : false
const className = cn(
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors',
'group/nav flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors',
active
? 'bg-white/15 font-medium text-white shadow-sm ring-1 ring-white/15 backdrop-blur-sm'
: 'text-sidebar-foreground/80',
@@ -127,7 +135,12 @@ function NavItem({
const content = (
<>
<Icon className="size-4" />
<span
className="grid size-6 shrink-0 place-items-center rounded-md transition-colors"
style={{ backgroundColor: color ? `${color}26` : undefined, color }}
>
<Icon className="size-3.5" />
</span>
{label}
{muted && <span className="ml-auto text-[10px] uppercase tracking-wide opacity-70">soon</span>}
</>