Updated the styling a little bit
This commit is contained in:
Tiago Ribeiro
@@ -1,307 +1,206 @@
|
|||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
import { IconType } from "react-icons";
|
import {IconType} from "react-icons";
|
||||||
import { MdSpaceDashboard } from "react-icons/md";
|
import {MdSpaceDashboard} from "react-icons/md";
|
||||||
import {
|
import {
|
||||||
BsFileEarmarkText,
|
BsFileEarmarkText,
|
||||||
BsClockHistory,
|
BsClockHistory,
|
||||||
BsPencil,
|
BsPencil,
|
||||||
BsGraphUp,
|
BsGraphUp,
|
||||||
BsChevronBarRight,
|
BsChevronBarRight,
|
||||||
BsChevronBarLeft,
|
BsChevronBarLeft,
|
||||||
BsShieldFill,
|
BsShieldFill,
|
||||||
BsCloudFill,
|
BsCloudFill,
|
||||||
BsCurrencyDollar,
|
BsCurrencyDollar,
|
||||||
BsClipboardData,
|
BsClipboardData,
|
||||||
} from "react-icons/bs";
|
} from "react-icons/bs";
|
||||||
import { RiLogoutBoxFill } from "react-icons/ri";
|
import {RiLogoutBoxFill} from "react-icons/ri";
|
||||||
import { SlPencil } from "react-icons/sl";
|
import {SlPencil} from "react-icons/sl";
|
||||||
import { FaAward } from "react-icons/fa";
|
import {FaAward} from "react-icons/fa";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useRouter } from "next/router";
|
import {useRouter} from "next/router";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import FocusLayer from "@/components/FocusLayer";
|
import FocusLayer from "@/components/FocusLayer";
|
||||||
import { preventNavigation } from "@/utils/navigation.disabled";
|
import {preventNavigation} from "@/utils/navigation.disabled";
|
||||||
import { useState } from "react";
|
import {useEffect, useState} from "react";
|
||||||
import usePreferencesStore from "@/stores/preferencesStore";
|
import usePreferencesStore from "@/stores/preferencesStore";
|
||||||
import { Type } from "@/interfaces/user";
|
import {Type} from "@/interfaces/user";
|
||||||
import useTicketsListener from '@/hooks/useTicketsListener';
|
import useTicketsListener from "@/hooks/useTicketsListener";
|
||||||
interface Props {
|
interface Props {
|
||||||
path: string;
|
path: string;
|
||||||
navDisabled?: boolean;
|
navDisabled?: boolean;
|
||||||
focusMode?: boolean;
|
focusMode?: boolean;
|
||||||
onFocusLayerMouseEnter?: () => void;
|
onFocusLayerMouseEnter?: () => void;
|
||||||
className?: string;
|
className?: string;
|
||||||
userType?: Type;
|
userType?: Type;
|
||||||
userId?: string;
|
userId?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface NavProps {
|
interface NavProps {
|
||||||
Icon: IconType;
|
Icon: IconType;
|
||||||
label: string;
|
label: string;
|
||||||
path: string;
|
path: string;
|
||||||
keyPath: string;
|
keyPath: string;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
isMinimized?: boolean;
|
isMinimized?: boolean;
|
||||||
badge?: number;
|
badge?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Nav = ({
|
const Nav = ({Icon, label, path, keyPath, disabled = false, isMinimized = false, badge}: NavProps) => {
|
||||||
Icon,
|
return (
|
||||||
label,
|
<Link
|
||||||
path,
|
href={!disabled ? keyPath : ""}
|
||||||
keyPath,
|
className={clsx(
|
||||||
disabled = false,
|
"flex items-center gap-4 rounded-full p-4 text-gray-500 hover:text-white",
|
||||||
isMinimized = false,
|
"transition-all duration-300 ease-in-out relative",
|
||||||
badge,
|
disabled ? "hover:bg-mti-gray-dim cursor-not-allowed" : "hover:bg-mti-purple-light cursor-pointer",
|
||||||
}: NavProps) => {
|
path === keyPath && "bg-mti-purple-light text-white",
|
||||||
const displayBadge = badge && badge > 0 ? true : false;
|
isMinimized ? "w-fit" : "w-full min-w-[200px] px-8 2xl:min-w-[220px]",
|
||||||
return (
|
)}>
|
||||||
<Link
|
<Icon size={24} />
|
||||||
href={!disabled ? keyPath : ""}
|
{!isMinimized && <span className="text-lg font-semibold">{label}</span>}
|
||||||
className={clsx(
|
{!!badge && badge > 0 && (
|
||||||
"flex items-center gap-4 rounded-full p-4 text-gray-500 hover:text-white",
|
<div
|
||||||
"transition-all duration-300 ease-in-out",
|
className={clsx(
|
||||||
disabled
|
"bg-mti-purple-light h-5 w-5 text-xs rounded-full flex items-center justify-center text-white",
|
||||||
? "hover:bg-mti-gray-dim cursor-not-allowed"
|
"transition ease-in-out duration-300",
|
||||||
: "hover:bg-mti-purple-light cursor-pointer",
|
isMinimized && "absolute right-0 top-0",
|
||||||
path === keyPath && "bg-mti-purple-light text-white",
|
)}>
|
||||||
isMinimized ? "w-fit" : "w-full min-w-[200px] px-8 2xl:min-w-[220px]",
|
{badge}
|
||||||
)}
|
</div>
|
||||||
>
|
)}
|
||||||
<Icon size={24} />
|
</Link>
|
||||||
{!isMinimized && <span className="text-lg font-semibold">{label}</span>}
|
);
|
||||||
{displayBadge && <div className="badge badge-primary badge-sm">{badge}</div>}
|
};
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Sidebar({
|
export default function Sidebar({path, navDisabled = false, focusMode = false, userType, onFocusLayerMouseEnter, className, userId}: Props) {
|
||||||
path,
|
const router = useRouter();
|
||||||
navDisabled = false,
|
|
||||||
focusMode = false,
|
|
||||||
userType,
|
|
||||||
onFocusLayerMouseEnter,
|
|
||||||
className,
|
|
||||||
userId,
|
|
||||||
}: Props) {
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [
|
const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [state.isSidebarMinimized, state.toggleSidebarMinimized]);
|
||||||
state.isSidebarMinimized,
|
|
||||||
state.toggleSidebarMinimized,
|
|
||||||
]);
|
|
||||||
|
|
||||||
const {totalAssignedTickets } = useTicketsListener(userId);
|
const {totalAssignedTickets} = useTicketsListener(userId);
|
||||||
|
|
||||||
const logout = async () => {
|
useEffect(() => console.log(totalAssignedTickets), [totalAssignedTickets]);
|
||||||
axios.post("/api/logout").finally(() => {
|
|
||||||
setTimeout(() => router.reload(), 500);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const disableNavigation = preventNavigation(navDisabled, focusMode);
|
const logout = async () => {
|
||||||
|
axios.post("/api/logout").finally(() => {
|
||||||
|
setTimeout(() => router.reload(), 500);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
const disableNavigation = preventNavigation(navDisabled, focusMode);
|
||||||
<section
|
|
||||||
className={clsx(
|
|
||||||
"relative flex h-full flex-col justify-between bg-transparent px-4 py-4 pb-8",
|
|
||||||
isMinimized ? "w-fit" : "-xl:w-fit w-1/6",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="-xl:hidden flex-col gap-3 xl:flex">
|
|
||||||
<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}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{["admin", "developer", "agent"].includes(userType || "") && (
|
|
||||||
<Nav
|
|
||||||
disabled={disableNavigation}
|
|
||||||
Icon={BsClipboardData}
|
|
||||||
label="Tickets"
|
|
||||||
path={path}
|
|
||||||
keyPath="/tickets"
|
|
||||||
isMinimized={isMinimized}
|
|
||||||
badge={totalAssignedTickets}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{userType === "developer" && (
|
|
||||||
<Nav
|
|
||||||
disabled={disableNavigation}
|
|
||||||
Icon={BsCloudFill}
|
|
||||||
label="Generation"
|
|
||||||
path={path}
|
|
||||||
keyPath="/generation"
|
|
||||||
isMinimized={isMinimized}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="-xl:flex flex-col gap-3 xl:hidden">
|
|
||||||
<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="fixed bottom-12 flex flex-col gap-0">
|
return (
|
||||||
<div
|
<section
|
||||||
role="button"
|
className={clsx(
|
||||||
tabIndex={1}
|
"relative flex h-full flex-col justify-between bg-transparent px-4 py-4 pb-8",
|
||||||
onClick={toggleMinimize}
|
isMinimized ? "w-fit" : "-xl:w-fit w-1/6",
|
||||||
className={clsx(
|
className,
|
||||||
"hover:text-mti-rose -xl:hidden flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
|
)}>
|
||||||
isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
|
<div className="-xl:hidden flex-col gap-3 xl:flex">
|
||||||
)}
|
<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={isMinimized} />
|
||||||
>
|
{(userType === "student" || userType === "teacher" || userType === "developer") && (
|
||||||
{isMinimized ? (
|
<>
|
||||||
<BsChevronBarRight size={24} />
|
<Nav
|
||||||
) : (
|
disabled={disableNavigation}
|
||||||
<BsChevronBarLeft size={24} />
|
Icon={BsFileEarmarkText}
|
||||||
)}
|
label="Exams"
|
||||||
{!isMinimized && (
|
path={path}
|
||||||
<span className="text-lg font-medium">Minimize</span>
|
keyPath="/exam"
|
||||||
)}
|
isMinimized={isMinimized}
|
||||||
</div>
|
/>
|
||||||
<div
|
<Nav
|
||||||
role="button"
|
disabled={disableNavigation}
|
||||||
tabIndex={1}
|
Icon={BsPencil}
|
||||||
onClick={focusMode ? () => {} : logout}
|
label="Exercises"
|
||||||
className={clsx(
|
path={path}
|
||||||
"hover:text-mti-rose flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
|
keyPath="/exercises"
|
||||||
isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
|
isMinimized={isMinimized}
|
||||||
)}
|
/>
|
||||||
>
|
</>
|
||||||
<RiLogoutBoxFill size={24} />
|
)}
|
||||||
{!isMinimized && (
|
<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
|
||||||
<span className="-xl:hidden text-lg font-medium">Log Out</span>
|
<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
|
||||||
)}
|
{["admin", "developer", "agent", "corporate"].includes(userType || "") && (
|
||||||
</div>
|
<Nav
|
||||||
</div>
|
disabled={disableNavigation}
|
||||||
{focusMode && (
|
Icon={BsCurrencyDollar}
|
||||||
<FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
|
label="Payment Record"
|
||||||
)}
|
path={path}
|
||||||
</section>
|
keyPath="/payment-record"
|
||||||
);
|
isMinimized={isMinimized}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{["admin", "developer", "corporate", "teacher"].includes(userType || "") && (
|
||||||
|
<Nav
|
||||||
|
disabled={disableNavigation}
|
||||||
|
Icon={BsShieldFill}
|
||||||
|
label="Settings"
|
||||||
|
path={path}
|
||||||
|
keyPath="/settings"
|
||||||
|
isMinimized={isMinimized}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{["admin", "developer", "agent"].includes(userType || "") && (
|
||||||
|
<Nav
|
||||||
|
disabled={disableNavigation}
|
||||||
|
Icon={BsClipboardData}
|
||||||
|
label="Tickets"
|
||||||
|
path={path}
|
||||||
|
keyPath="/tickets"
|
||||||
|
isMinimized={isMinimized}
|
||||||
|
badge={totalAssignedTickets}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{userType === "developer" && (
|
||||||
|
<Nav
|
||||||
|
disabled={disableNavigation}
|
||||||
|
Icon={BsCloudFill}
|
||||||
|
label="Generation"
|
||||||
|
path={path}
|
||||||
|
keyPath="/generation"
|
||||||
|
isMinimized={isMinimized}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="-xl:flex flex-col gap-3 xl:hidden">
|
||||||
|
<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="fixed bottom-12 flex flex-col gap-0">
|
||||||
|
<div
|
||||||
|
role="button"
|
||||||
|
tabIndex={1}
|
||||||
|
onClick={toggleMinimize}
|
||||||
|
className={clsx(
|
||||||
|
"hover:text-mti-rose -xl:hidden flex cursor-pointer items-center gap-4 rounded-full p-4 text-black 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(
|
||||||
|
"hover:text-mti-rose flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
|
||||||
|
isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
|
||||||
|
)}>
|
||||||
|
<RiLogoutBoxFill size={24} />
|
||||||
|
{!isMinimized && <span className="-xl:hidden text-lg font-medium">Log Out</span>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user