101 lines
3.1 KiB
TypeScript
101 lines
3.1 KiB
TypeScript
|
import Link from "next/link";
|
||
|
|
import {
|
||
|
|
RiHome6Fill,
|
||
|
|
RiCompassLine,
|
||
|
|
RiCompass3Fill,
|
||
|
|
RiQuestionAnswerLine,
|
||
|
|
RiAddFill,
|
||
|
|
RiSettings4Fill,
|
||
|
|
RiSettings4Line,
|
||
|
|
} from "react-icons/ri";
|
||
|
|
import { HiOutlineLightningBolt } from "react-icons/hi";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
|
||
|
|
export default function Sidebar() {
|
||
|
|
const navigation = [
|
||
|
|
{
|
||
|
|
href: "",
|
||
|
|
name: "home",
|
||
|
|
label: "Home",
|
||
|
|
icon: RiHome6Fill,
|
||
|
|
current: true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
href: "",
|
||
|
|
name: "explore",
|
||
|
|
label: "Explore",
|
||
|
|
icon: RiCompassLine,
|
||
|
|
current: false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
href: "",
|
||
|
|
name: "messages",
|
||
|
|
label: "Messages",
|
||
|
|
icon: RiQuestionAnswerLine,
|
||
|
|
current: false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
href: "",
|
||
|
|
name: "zap",
|
||
|
|
label: "Zap Flockstr",
|
||
|
|
icon: HiOutlineLightningBolt,
|
||
|
|
current: false,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
return (
|
||
|
|
<nav className="z-header- hidden h-[calc(100svh_-_var(--header-height))] w-[var(--sidebar-closed-width)] flex-col sm:flex">
|
||
|
|
<div className="fixed bottom-0 flex h-[calc(100svh_-_var(--header-height))] w-[var(--sidebar-closed-width)] flex-col border-r xl:w-[var(--sidebar-open-width)]">
|
||
|
|
<div className="flex flex-1 flex-col">
|
||
|
|
<div className="flex flex-col items-stretch gap-y-2 p-4">
|
||
|
|
{navigation.map((item) => (
|
||
|
|
<Link
|
||
|
|
key={item.name}
|
||
|
|
href={item.href}
|
||
|
|
className={cn(
|
||
|
|
"center group relative min-h-[48px] min-w-[48px] rounded-lg hover:bg-muted xl:justify-start xl:gap-x-4 xl:p-2.5",
|
||
|
|
item.current
|
||
|
|
? "text-foreground"
|
||
|
|
: "text-muted-foreground hover:text-foreground",
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<item.icon
|
||
|
|
className={cn("h-6 w-6 shrink-0")}
|
||
|
|
aria-hidden="true"
|
||
|
|
/>
|
||
|
|
<span className="hidden text-base xl:flex">{item.label}</span>
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
<div className="center py-2 xl:justify-start">
|
||
|
|
<Button size={"icon"} className="xl:hidden">
|
||
|
|
<RiAddFill className="h-6 w-6" />
|
||
|
|
</Button>
|
||
|
|
<Button size={"lg"} className="hidden xl:flex">
|
||
|
|
<div className="center gap-x-1.5">
|
||
|
|
<RiAddFill className="h-6 w-6" />
|
||
|
|
<span>Add Note</span>
|
||
|
|
</div>
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-1 flex-col justify-end p-4">
|
||
|
|
<button
|
||
|
|
className={cn(
|
||
|
|
"center relative min-h-[48px] min-w-[48px] rounded-lg hover:bg-muted xl:justify-start xl:gap-x-4 xl:p-2.5",
|
||
|
|
|
||
|
|
"text-muted-foreground group-hover:text-foreground",
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<RiSettings4Line
|
||
|
|
className={cn("h-6 w-6 shrink-0")}
|
||
|
|
aria-hidden="true"
|
||
|
|
/>
|
||
|
|
<span className="hidden text-base xl:flex">Settings</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
}
|