encoach_frontend/src/components/Sidebar.tsx

import clsx from "clsx";
import {IconType} from "react-icons";
import {MdSpaceDashboard} from "react-icons/md";
import {
	BsFileEarmarkText,
	BsClockHistory,
	BsPencil,
	BsGraphUp,
	BsChevronBarRight,
	BsChevronBarLeft,
	BsShieldFill,
	BsCloudFill,
	BsCurrencyDollar,
} 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";
import {Type} from "@/interfaces/user";
interface Props {
	path: string;
	navDisabled?: boolean;
	focusMode?: boolean;
	onFocusLayerMouseEnter?: () => void;
	className?: string;
	userType?: Type;
}

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-[200px] 2xl:min-w-[220px] px-8",
		)}>
		<Icon size={24} />
		{!isMinimized && <span className="text-lg font-semibold">{label}</span>}
	</Link>
);

export default function Sidebar({path, navDisabled = false, focusMode = false, userType, 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 -xl:w-fit",
				className,
			)}>
			<div className="xl:flex -xl:hidden flex-col gap-3">
				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={isMinimized} />
				{(userType === "student" || userType === "teacher" || userType === "developer") && (
					<>
						<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} />
				{["admin", "developer", "agent", "corporate"].includes(userType || "") && (
					<Nav
						disabled={disableNavigation}
						Icon={BsCurrencyDollar}
						label="Payment Record"
						path={path}
						keyPath="/payment-record"
						isMinimized={isMinimized}
					/>
				)}
				{["admin", "developer", "corporate", "teacher"].includes(userType || "") && (
					<Nav
						disabled={disableNavigation}
						Icon={BsShieldFill}
						label="Settings"
						path={path}
						keyPath="/settings"
						isMinimized={isMinimized}
					/>
				)}
				{userType === "developer" && (
					<Nav
						disabled={disableNavigation}
						Icon={BsCloudFill}
						label="Generation"
						path={path}
						keyPath="/generation"
						isMinimized={isMinimized}
					/>
				)}
			</div>
			<div className="xl:hidden -xl:flex flex-col gap-3">
				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={true} />
				<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={true} />
				<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={true} />
				<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={true} />
				<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={true} />
				{userType !== "student" && (
					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Settings" path={path} keyPath="/settings" isMinimized={true} />
				)}
				{userType === "developer" && (
					<Nav disabled={disableNavigation} Icon={BsCloudFill} label="Generation" path={path} keyPath="/generation" isMinimized={true} />
				)}
			</div>

			<div className="flex flex-col gap-0 bottom-12 fixed">
				<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 -xl:hidden 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 -xl:hidden">Log Out</span>}
				</div>
			</div>
			{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
		</section>
	);
}