logipedia/src/components/layout/wiki-sidebar.tsx

98 lines
3.1 KiB
TypeScript

import * as React from "react";
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubItem,
} from "@/components/ui/sidebar";
import Link from "next/link";
import { Separator } from "../ui/separator";
import { Minus, Plus } from "lucide-react";
import { api } from "@/trpc/server";
import { appConfig } from "@/config/app.config";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "../ui/collapsible";
import { appRoutes } from "@/config";
import SidebarLink from "./sidebar-link";
export async function WikiSidebar({
...props
}: React.ComponentProps<typeof Sidebar>) {
const sidebarContent = await api.app.getSidebarContent();
return (
<Sidebar {...props}>
<SidebarHeader className="flex h-14 items-center justify-center border-b">
<Link href={"/"}>
<span className="text-2xl font-bold">{appConfig.name}</span>
</Link>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarMenu>
{sidebarContent?.map((category, index) => (
<Collapsible
key={category.id}
defaultOpen={index === 1}
className="group/collapsible"
>
<SidebarMenuItem>
<CollapsibleTrigger asChild>
<SidebarMenuButton>
<Link href={appRoutes.category(category.slug)}>
<span>{category.name}</span>
</Link>
<Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
<Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
</SidebarMenuButton>
</CollapsibleTrigger>
{category?.articles?.length ? (
<CollapsibleContent>
<SidebarMenuSub>
{category.articles.map((article) => (
<SidebarMenuSubItem key={article.slug}>
<SidebarLink
title={article.title!}
url={appRoutes.article(article.slug)}
/>
</SidebarMenuSubItem>
))}
</SidebarMenuSub>
</CollapsibleContent>
) : null}
</SidebarMenuItem>
</Collapsible>
))}
</SidebarMenu>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<div className="flex items-center justify-center gap-4">
<Link
className="text-xs text-muted-foreground underline"
href={"/impressum"}
>
Impressum
</Link>
<Separator orientation="vertical" />
<Link
href={"/datenschutz"}
className="text-xs text-muted-foreground underline"
>
Datenschutz
</Link>
</div>
</SidebarFooter>
</Sidebar>
);
}