102 lines
3.9 KiB
TypeScript
102 lines
3.9 KiB
TypeScript
import clsx from "clsx";
|
|
import {IconType} from "react-icons";
|
|
import {MdSpaceDashboard} from "react-icons/md";
|
|
import {BsFileEarmarkText, BsClockHistory, BsPencil, BsGraphUp, BsChevronBarRight, BsChevronBarLeft} from "react-icons/bs";
|
|
import {RiLogoutBoxFill} from "react-icons/ri";
|
|
import {SlPencil} from "react-icons/sl";
|
|
import {FaAward} from "react-icons/fa";
|
|
import Link from "next/link";
|
|
import {useRouter} from "next/router";
|
|
import axios from "axios";
|
|
import FocusLayer from "@/components/FocusLayer";
|
|
import {preventNavigation} from "@/utils/navigation.disabled";
|
|
import {useState} from "react";
|
|
import usePreferencesStore from "@/stores/preferencesStore";
|
|
interface Props {
|
|
path: string;
|
|
navDisabled?: boolean;
|
|
focusMode?: boolean;
|
|
onFocusLayerMouseEnter?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
interface NavProps {
|
|
Icon: IconType;
|
|
label: string;
|
|
path: string;
|
|
keyPath: string;
|
|
disabled?: boolean;
|
|
isMinimized?: boolean;
|
|
}
|
|
|
|
const Nav = ({Icon, label, path, keyPath, disabled = false, isMinimized = false}: NavProps) => (
|
|
<Link
|
|
href={!disabled ? keyPath : ""}
|
|
className={clsx(
|
|
"p-4 rounded-full flex gap-4 items-center cursor-pointer text-gray-500 hover:bg-mti-purple-light hover:text-white",
|
|
"transition-all duration-300 ease-in-out",
|
|
path === keyPath && "bg-mti-purple-light text-white",
|
|
isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
|
|
)}>
|
|
<Icon size={24} />
|
|
{!isMinimized && <span className="text-lg font-semibold">{label}</span>}
|
|
</Link>
|
|
);
|
|
|
|
export default function Sidebar({path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter, className}: Props) {
|
|
const router = useRouter();
|
|
|
|
const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [state.isSidebarMinimized, state.toggleSidebarMinimized]);
|
|
|
|
const logout = async () => {
|
|
axios.post("/api/logout").finally(() => {
|
|
setTimeout(() => router.reload(), 500);
|
|
});
|
|
};
|
|
|
|
const disableNavigation = preventNavigation(navDisabled, focusMode);
|
|
|
|
return (
|
|
<section
|
|
className={clsx(
|
|
"h-full flex bg-transparent flex-col justify-between px-4 py-4 pb-8 relative",
|
|
isMinimized ? "w-fit" : "w-1/6",
|
|
className,
|
|
)}>
|
|
<div className="flex flex-col gap-3">
|
|
<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={isMinimized} />
|
|
<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={isMinimized} />
|
|
<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={isMinimized} />
|
|
<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
|
|
<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-0 absolute bottom-12">
|
|
<div
|
|
role="button"
|
|
tabIndex={1}
|
|
onClick={toggleMinimize}
|
|
className={clsx(
|
|
"p-4 rounded-full flex gap-4 items-center cursor-pointer text-black hover:text-mti-rose transition duration-300 ease-in-out",
|
|
isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
|
|
)}>
|
|
{isMinimized ? <BsChevronBarRight size={24} /> : <BsChevronBarLeft size={24} />}
|
|
{!isMinimized && <span className="text-lg font-medium">Minimize</span>}
|
|
</div>
|
|
<div
|
|
role="button"
|
|
tabIndex={1}
|
|
onClick={focusMode ? () => {} : logout}
|
|
className={clsx(
|
|
"p-4 rounded-full flex gap-4 items-center cursor-pointer text-black hover:text-mti-rose transition duration-300 ease-in-out",
|
|
isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
|
|
)}>
|
|
<RiLogoutBoxFill size={24} />
|
|
{!isMinimized && <span className="text-lg font-medium">Log Out</span>}
|
|
</div>
|
|
</div>
|
|
{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
|
|
</section>
|
|
);
|
|
}
|