flockstr/app/(app)/_layout/Sidebar.tsx

235 lines
8.0 KiB
TypeScript
Raw Normal View History

2023-10-16 19:40:56 -04:00
"use client";
2023-10-13 19:02:59 -04:00
import Link from "next/link";
import {
RiHome6Fill,
RiCompassLine,
RiCompass3Fill,
RiQuestionAnswerLine,
RiAddFill,
RiSettings4Fill,
2023-10-27 17:48:49 -04:00
RiCalendarEventFill,
2023-10-13 19:02:59 -04:00
RiSettings4Line,
} from "react-icons/ri";
import { HiOutlineLightningBolt } from "react-icons/hi";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
2023-10-14 23:35:08 -04:00
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
2023-10-17 09:06:09 -04:00
import dynamic from "next/dynamic";
2023-10-16 19:40:56 -04:00
import { useModal } from "@/app/_providers/modal/provider";
import { IconType } from "react-icons";
2023-10-27 13:10:07 -04:00
import { usePathname } from "next/navigation";
2023-10-24 16:44:46 -04:00
2023-10-17 09:06:09 -04:00
const ZapPickerModal = dynamic(() => import("@/components/Modals/ZapPicker"), {
ssr: false,
});
2023-10-24 16:44:46 -04:00
const AddNoteButton = dynamic(() => import("./components/AddNoteButton"), {
2023-10-17 09:06:09 -04:00
ssr: false,
});
2023-10-24 16:44:46 -04:00
2023-10-16 19:40:56 -04:00
type NavigationLink = {
type: "link";
href: string;
};
type NavigationButton = {
type: "button";
onClick: () => void;
};
type NavigationElement = {
name: string;
label: string;
icon: IconType;
active: boolean;
} & (NavigationLink | NavigationButton);
const flockstrEvent = {
created_at: 1697736945,
content:
"Officially announcing Flockstr. Check it out at https://flockstr.com",
tags: [
["r", "https://flockstr.com"],
["client", "flockstr"],
],
kind: 1,
pubkey: "17717ad4d20e2a425cda0a2195624a0a4a73c4f6975f16b1593fc87fa46f2d58",
id: "a867ff28711eeab4767fb6bacbb33dfe17b2b5bbbff98f8e57f90a85ea684b0a",
sig: "37d8918e6da88d989467021a1f5809a3fbcab941ca1044d109ce261f29270d2d545aaa84297b7f224ae1ad7760263e50c317c24abc809034bcdb5c3260faf4b0",
};
2023-10-13 19:02:59 -04:00
export default function Sidebar() {
2023-10-16 19:40:56 -04:00
const modal = useModal();
2023-10-27 13:10:07 -04:00
const pathname = usePathname();
2023-10-16 19:40:56 -04:00
const navigation: NavigationElement[] = [
2023-10-13 19:02:59 -04:00
{
2023-10-27 13:10:07 -04:00
href: "/explore",
2023-10-13 19:02:59 -04:00
name: "explore",
label: "Explore",
icon: RiCompassLine,
2023-10-16 19:40:56 -04:00
type: "link",
2023-10-27 14:55:53 -04:00
active: true,
2023-10-13 19:02:59 -04:00
},
2023-10-27 17:48:49 -04:00
{
href: "/events",
name: "events",
label: "Events",
icon: RiCalendarEventFill,
type: "link",
active: true,
},
2023-10-13 19:02:59 -04:00
{
href: "",
name: "messages",
label: "Messages",
icon: RiQuestionAnswerLine,
2023-10-16 19:40:56 -04:00
type: "link",
2023-10-14 23:35:08 -04:00
active: false,
2023-10-13 19:02:59 -04:00
},
{
onClick: () => modal?.show(<ZapPickerModal event={flockstrEvent} />),
2023-10-13 19:02:59 -04:00
name: "zap",
label: "Zap Flockstr",
icon: HiOutlineLightningBolt,
2023-10-16 19:40:56 -04:00
type: "button",
2023-10-14 23:35:08 -04:00
active: true,
2023-10-13 19:02:59 -04:00
},
];
return (
<nav className="z-header- hidden h-[calc(100svh_-_var(--header-height))] w-[var(--sidebar-closed-width)] flex-col sm:flex">
2023-10-27 13:10:07 -04:00
<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)]">
2023-10-13 19:02:59 -04:00
<div className="flex flex-1 flex-col">
<div className="flex flex-col items-stretch gap-y-2 p-4">
2023-10-14 23:35:08 -04:00
{navigation.map((item) => {
2023-10-16 19:40:56 -04:00
if (item.type === "link") {
if (item.active) {
return (
<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",
2023-10-27 13:10:07 -04:00
pathname === item.href
2023-10-16 19:40:56 -04:00
? "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>
);
} else {
return (
<TooltipProvider key={item.name}>
<Tooltip delayDuration={100}>
<TooltipTrigger>
<div
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",
2023-10-27 13:10:07 -04:00
false
2023-10-16 19:40:56 -04:00
? "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>
</div>
</TooltipTrigger>
<TooltipContent align="start">
<p>Coming Soon</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}
2023-10-14 23:35:08 -04:00
} else {
2023-10-16 19:40:56 -04:00
if (item.active) {
return (
<button
key={item.name}
onClick={item.onClick}
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",
2023-10-27 13:10:07 -04:00
false
2023-10-16 19:40:56 -04:00
? "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>
</button>
);
} else {
return (
<TooltipProvider key={item.name}>
<Tooltip delayDuration={100}>
<TooltipTrigger>
<div
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",
2023-10-27 13:10:07 -04:00
false
2023-10-16 19:40:56 -04:00
? "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>
</div>
</TooltipTrigger>
<TooltipContent align="start">
<p>Coming Soon</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}
2023-10-14 23:35:08 -04:00
}
})}
2023-10-13 19:02:59 -04:00
<div className="center py-2 xl:justify-start">
2023-10-24 16:44:46 -04:00
<AddNoteButton />
2023-10-13 19:02:59 -04:00
</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>
);
}