nyuchimzizi
Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.
Built by Nyuchi Africav4.0.39
Icon-only collapsed sidebar.
View the full component source code below.
"use client"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { Home, BarChart3, Users, FileText, Settings, Zap } from "@/lib/icons"
const navItems = [
{ icon: Home, label: "Home", active: true },
{ icon: BarChart3, label: "Analytics" },
{ icon: Users, label: "Team" },
{ icon: FileText, label: "Documents" },
{ icon: Settings, label: "Settings" },
]
function Sidebar06() {
return (
<aside data-slot="sidebar-block" data-portal="https://design.nyuchi.com/components/sidebar-block" aria-label="Sidebar navigation" className="flex h-screen w-14 flex-col items-center border-r border-border bg-card py-3">
<div className="mb-1 flex size-9 items-center justify-center rounded-[var(--radius-lg,14px)] bg-cobalt/10">
<Zap className="size-4 text-cobalt" />
</div>
<Separator className="my-2 w-8" />
<nav className="flex flex-1 flex-col items-center gap-1">
{navItems.map((item) => (
<Button
key={item.label}
variant={item.active ? "secondary" : "ghost"}
size="icon-sm"
title={item.label}
>
<item.icon className="size-4" />
</Button>
))}
</nav>
<Separator className="my-2 w-8" />
<Button variant="ghost" size="icon-sm" title="Settings">
<Settings className="size-4" />
</Button>
</aside>
)
}
export { Sidebar06 }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/sidebar-06Fetch this component's metadata and source code from the registry API.
/api/v1/ui/sidebar-06components/blocks/sidebar-06.tsx