51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { Logo } from "@/components/Logo";
|
|
import { LogoMinimized } from "@/components/LogoMinimized";
|
|
import { useSidebarStore } from "@/store/SidebarStore";
|
|
import { Link } from "react-router-dom";
|
|
import { SideNav } from "./SideNav";
|
|
import { cn } from "@/util/utils";
|
|
import { Button } from "@/components/ui/button";
|
|
import { PinLeftIcon, PinRightIcon } from "@radix-ui/react-icons";
|
|
|
|
type Props = {
|
|
useCollapsedState?: boolean;
|
|
};
|
|
|
|
function SidebarContent({ useCollapsedState }: Props) {
|
|
const { collapsed: collapsedState, setCollapsed } = useSidebarStore();
|
|
const collapsed = useCollapsedState ? collapsedState : false;
|
|
|
|
return (
|
|
<div className="flex h-full flex-col">
|
|
<Link to={window.location.origin}>
|
|
<div className="flex h-24 items-center">
|
|
{collapsed ? <LogoMinimized /> : <Logo />}
|
|
</div>
|
|
</Link>
|
|
<SideNav />
|
|
<div
|
|
className={cn("mt-auto flex min-h-16", {
|
|
"justify-center": collapsed,
|
|
"justify-end": !collapsed,
|
|
})}
|
|
>
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
onClick={() => {
|
|
setCollapsed(!collapsed);
|
|
}}
|
|
>
|
|
{collapsed ? (
|
|
<PinRightIcon className="h-6 w-6" />
|
|
) : (
|
|
<PinLeftIcon className="hidden h-6 w-6 lg:block" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { SidebarContent };
|