Sidebar Navigation

1import * as React from "react";
2import {
3  Bell,
4  Blocks,
5  ChevronDown,
6  CreditCard,
7  Home,
8  LifeBuoy,
9  Search,
10  Settings,
11  Sparkles,
12  Users,
13} from "lucide-react";
14 
15import { Avatar, AvatarFallback } from "@/components/ui/avatar";
16import { Badge } from "@/components/ui/badge";
17import { Button } from "@/components/ui/button";
18import { Input } from "@/components/ui/input";
19import { cn } from "@/lib/utils";
20 
21const navigation = [
22  { icon: Home, label: "Overview", active: true },
23  { icon: Blocks, label: "Projects", badge: "12" },
24  { icon: Users, label: "Team" },
25  { icon: CreditCard, label: "Billing" },
26];
27 
28function Sidebar01({ className, ...props }: React.ComponentProps<"aside">) {
29  return (
30    <aside
31      className={cn(
32        "flex h-[680px] w-full max-w-[280px] flex-col rounded-[2rem] border border-foreground/10 bg-background p-3 shadow-[0_24px_70px_-50px_var(--foreground)]",
33        className,
34      )}
35      {...props}
36    >
37      <div className="flex items-center gap-2.5 px-2 py-2 font-semibold">
38        <span className="grid size-8 place-items-center rounded-xl bg-primary text-primary-foreground">
39          <Sparkles className="size-4" />
40        </span>
41        Rivelle
42        <span className="ml-auto">
43          <ChevronDown className="size-4 text-muted-foreground" />
44        </span>
45      </div>
46      <div className="relative mt-4">
47        <Search className="absolute left-3 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
48        <Input className="h-9 pl-9" placeholder="Search" />
49      </div>
50      <nav className="mt-5 space-y-1">
51        {navigation.map(({ icon: Icon, label, active, badge }) => (
52          <a
53            className={cn(
54              "flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-foreground/[.045] hover:text-foreground",
55              active && "bg-primary/10 text-primary",
56            )}
57            href="#"
58            key={label}
59          >
60            <Icon className="size-4" />
61            {label}
62            {badge && (
63              <Badge className="ml-auto" variant="secondary">
64                {badge}
65              </Badge>
66            )}
67          </a>
68        ))}
69      </nav>
70      <div className="mt-6 px-3 text-[.65rem] font-semibold uppercase tracking-[.12em] text-muted-foreground">
71        Workspace
72      </div>
73      <nav className="mt-2 space-y-1">
74        <a
75// … truncated