935 lines
26 KiB
TypeScript
935 lines
26 KiB
TypeScript
import { SidebarMenuTask } from "@/types/globals";
|
|
import { Tooltip } from "@heroui/react";
|
|
import Link from "next/link";
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
import React, { useEffect, useState } from "react";
|
|
import {
|
|
ChevronLeftIcon,
|
|
ChevronRightIcon,
|
|
FormCustomIcon,
|
|
FormHorizontalIcon,
|
|
FormLayoutIcon,
|
|
FormValidationIcon,
|
|
FormVerticalIcon,
|
|
} from "../../icons";
|
|
import {
|
|
AddvertiseIcon,
|
|
ArticleIcon,
|
|
CommentIcon,
|
|
DashboardIcon,
|
|
HomeIcon,
|
|
InfoCircleIcon,
|
|
MagazineIcon,
|
|
MasterCategoryIcon,
|
|
MasterRoleIcon,
|
|
MasterUserLevelIcon,
|
|
MasterUsersIcon,
|
|
MinusCircleIcon,
|
|
StaticPageIcon,
|
|
SuggestionsIcon,
|
|
TableIcon,
|
|
} from "../../icons/sidebar-icon";
|
|
import { ThemeSwitch } from "../../theme-switch";
|
|
import { SidebarCollapseItems } from "./sidebar-collapse-items";
|
|
import { SidebarCollapseSubItems } from "./sidebar-collapse-sub-items";
|
|
import { useSidebar } from "./sidebar-context";
|
|
import { SidebarMenu } from "./sidebar-menu";
|
|
import Image from "next/image";
|
|
import Cookies from "js-cookie";
|
|
import { SettingsIcon, UserProfileIcon } from "@/components/icons/globals";
|
|
|
|
interface SubMenuItems {
|
|
id: number;
|
|
name: string;
|
|
modulePathUrl: string;
|
|
isSubActive: boolean;
|
|
}
|
|
|
|
interface MenuItems {
|
|
id: number;
|
|
name: string;
|
|
modulePathUrl: string;
|
|
isSubActive: boolean;
|
|
childMenu?: SubMenuItems[];
|
|
icon?: string;
|
|
}
|
|
|
|
interface SidebarProps {
|
|
sidebarData: boolean;
|
|
updateSidebarData: (newData: boolean) => void;
|
|
}
|
|
|
|
const sidebarLevel3 = [
|
|
{
|
|
id: 1,
|
|
name: "Dashboard",
|
|
moduleId: 652,
|
|
moduleName: "Dashboard",
|
|
modulePathUrl: "/admin/dashboard",
|
|
isGroup: true,
|
|
parentId: -1,
|
|
icon: "dashboard",
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Dashboard",
|
|
moduleId: 652,
|
|
moduleName: "Dashboard",
|
|
modulePathUrl: "/admin/dashboard",
|
|
parentId: -1,
|
|
icon: <DashboardIcon />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "Apps",
|
|
moduleId: 652,
|
|
moduleName: "Dashboard",
|
|
modulePathUrl: "/admin/basic",
|
|
isGroup: true,
|
|
parentId: -1,
|
|
icon: "table",
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "Artikel",
|
|
moduleId: 652,
|
|
moduleName: "Dashboard",
|
|
modulePathUrl: "/admin/article",
|
|
parentId: -1,
|
|
icon: <ArticleIcon size={24} />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 30,
|
|
name: "Kategori",
|
|
moduleId: 654,
|
|
moduleName: "Master",
|
|
modulePathUrl: "/admin/master-category",
|
|
parentId: -1,
|
|
icon: <MasterCategoryIcon size={22} />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
];
|
|
|
|
const sidebarLevel2 = [
|
|
{
|
|
id: 1,
|
|
name: "Dashboard",
|
|
moduleId: 652,
|
|
moduleName: "Dashboard",
|
|
modulePathUrl: "/admin/dashboard",
|
|
isGroup: true,
|
|
parentId: -1,
|
|
icon: "dashboard",
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Dashboard",
|
|
moduleId: 652,
|
|
moduleName: "Dashboard",
|
|
modulePathUrl: "/admin/dashboard",
|
|
parentId: -1,
|
|
icon: <DashboardIcon />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "Apps",
|
|
moduleId: 652,
|
|
moduleName: "Dashboard",
|
|
modulePathUrl: "/admin/basic",
|
|
isGroup: true,
|
|
parentId: -1,
|
|
icon: "table",
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "Artikel",
|
|
moduleId: 652,
|
|
moduleName: "Dashboard",
|
|
modulePathUrl: "/admin/article",
|
|
parentId: -1,
|
|
icon: <ArticleIcon size={24} />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 30,
|
|
name: "Kategori",
|
|
moduleId: 654,
|
|
moduleName: "Master",
|
|
modulePathUrl: "/admin/master-category",
|
|
parentId: -1,
|
|
icon: <MasterCategoryIcon size={22} />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 6,
|
|
name: "Majalah",
|
|
moduleId: 652,
|
|
moduleName: "Apps",
|
|
modulePathUrl: "/admin/magazine",
|
|
parentId: -1,
|
|
icon: <MagazineIcon size={23} />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 33,
|
|
name: "Advertise",
|
|
moduleId: 652,
|
|
moduleName: "Apps",
|
|
modulePathUrl: "/admin/advertise",
|
|
parentId: -1,
|
|
icon: <AddvertiseIcon size={23} />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 34,
|
|
name: "Kritik & Saran",
|
|
moduleId: 652,
|
|
moduleName: "Apps",
|
|
modulePathUrl: "/admin/feedbacks",
|
|
parentId: -1,
|
|
icon: <SuggestionsIcon size={23} />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 35,
|
|
name: "Komentar",
|
|
moduleId: 652,
|
|
moduleName: "Apps",
|
|
modulePathUrl: "/admin/comment",
|
|
parentId: -1,
|
|
icon: <CommentIcon size={23} />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
|
|
{
|
|
id: 5,
|
|
name: "Master",
|
|
moduleId: 652,
|
|
moduleName: "Dashboard",
|
|
isGroup: true,
|
|
modulePathUrl: "/admin/basic",
|
|
parentId: -1,
|
|
icon: "table",
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
|
|
{
|
|
id: 11,
|
|
name: "Master Static Page",
|
|
moduleId: 652,
|
|
moduleName: "Dashboard",
|
|
modulePathUrl: "/admin/static-page",
|
|
parentId: -1,
|
|
icon: <StaticPageIcon size={24} />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 8,
|
|
name: "Master User",
|
|
moduleId: 654,
|
|
moduleName: "Form Vertical",
|
|
modulePathUrl: "/admin/master-user",
|
|
parentId: -1,
|
|
icon: <MasterUsersIcon />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 23,
|
|
name: "Master User Level",
|
|
moduleId: 656,
|
|
moduleName: "Form Validation",
|
|
modulePathUrl: "/admin/user-level",
|
|
parentId: -1,
|
|
icon: <MasterUserLevelIcon />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
];
|
|
|
|
const sidebarLevel1 = [
|
|
{
|
|
id: 1,
|
|
name: "Dashboard",
|
|
moduleId: 652,
|
|
moduleName: "Dashboard",
|
|
modulePathUrl: "/admin/dashboard",
|
|
isGroup: true,
|
|
parentId: -1,
|
|
icon: "dashboard",
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Dashboard",
|
|
moduleId: 652,
|
|
moduleName: "Dashboard",
|
|
modulePathUrl: "/admin/dashboard",
|
|
parentId: -1,
|
|
icon: <DashboardIcon />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "Apps",
|
|
moduleId: 652,
|
|
moduleName: "Dashboard",
|
|
modulePathUrl: "/admin/basic",
|
|
isGroup: true,
|
|
parentId: -1,
|
|
icon: "table",
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "Artikel",
|
|
moduleId: 652,
|
|
moduleName: "Dashboard",
|
|
modulePathUrl: "/admin/article",
|
|
parentId: -1,
|
|
icon: <ArticleIcon size={24} />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 30,
|
|
name: "Kategori",
|
|
moduleId: 654,
|
|
moduleName: "Master",
|
|
modulePathUrl: "/admin/master-category",
|
|
parentId: -1,
|
|
icon: <MasterCategoryIcon size={22} />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 6,
|
|
name: "Majalah",
|
|
moduleId: 652,
|
|
moduleName: "Apps",
|
|
modulePathUrl: "/admin/magazine",
|
|
parentId: -1,
|
|
icon: <MagazineIcon size={23} />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 33,
|
|
name: "Advertise",
|
|
moduleId: 652,
|
|
moduleName: "Apps",
|
|
modulePathUrl: "/admin/advertise",
|
|
parentId: -1,
|
|
icon: <AddvertiseIcon size={23} />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 34,
|
|
name: "Kritik & Saran",
|
|
moduleId: 652,
|
|
moduleName: "Apps",
|
|
modulePathUrl: "/admin/feedbacks",
|
|
parentId: -1,
|
|
icon: <SuggestionsIcon size={23} />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 35,
|
|
name: "Komentar",
|
|
moduleId: 652,
|
|
moduleName: "Apps",
|
|
modulePathUrl: "/admin/comment",
|
|
parentId: -1,
|
|
icon: <CommentIcon size={23} />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
|
|
// {
|
|
// id: 4,
|
|
// name: "E-Magazine",
|
|
// moduleId: 652,
|
|
// moduleName: "Dashboard",
|
|
// modulePathUrl: "/admin/e-magazine",
|
|
// parentId: -1,
|
|
// icon: <TableIcon />,
|
|
// position: 1,
|
|
// statusId: 1,
|
|
// childMenu: [],
|
|
// statusName: "Active",
|
|
// childModule: null,
|
|
// },
|
|
{
|
|
id: 5,
|
|
name: "Master",
|
|
moduleId: 652,
|
|
moduleName: "Dashboard",
|
|
isGroup: true,
|
|
modulePathUrl: "/admin/basic",
|
|
parentId: -1,
|
|
icon: "table",
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
// {
|
|
// id: 6,
|
|
// name: "Master Menu",
|
|
// moduleId: 652,
|
|
// moduleName: "Form Custom",
|
|
// modulePathUrl: "/admin/master-menu",
|
|
// parentId: -1,
|
|
// icon: <FormCustomIcon />,
|
|
// position: 1,
|
|
// statusId: 1,
|
|
// childMenu: [],
|
|
// statusName: "Active",
|
|
// childModule: null,
|
|
// },
|
|
// {
|
|
// id: 7,
|
|
// name: "Master Module",
|
|
// moduleId: 653,
|
|
// moduleName: "Form Horizontal",
|
|
// modulePathUrl: "/admin/master-module",
|
|
// parentId: -1,
|
|
// icon: <FormHorizontalIcon />,
|
|
// position: 1,
|
|
// statusId: 1,
|
|
// childMenu: [],
|
|
// statusName: "Active",
|
|
// childModule: null,
|
|
// },
|
|
{
|
|
id: 11,
|
|
name: "Master Static Page",
|
|
moduleId: 652,
|
|
moduleName: "Dashboard",
|
|
modulePathUrl: "/admin/static-page",
|
|
parentId: -1,
|
|
icon: <StaticPageIcon size={24} />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 8,
|
|
name: "Master User",
|
|
moduleId: 654,
|
|
moduleName: "Form Vertical",
|
|
modulePathUrl: "/admin/master-user",
|
|
parentId: -1,
|
|
icon: <MasterUsersIcon />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
|
|
{
|
|
id: 10,
|
|
name: "Master User Role",
|
|
moduleId: 656,
|
|
moduleName: "Form Validation",
|
|
modulePathUrl: "/admin/master-role",
|
|
parentId: -1,
|
|
icon: <MasterRoleIcon />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
{
|
|
id: 23,
|
|
name: "Master User Level",
|
|
moduleId: 656,
|
|
moduleName: "Form Validation",
|
|
modulePathUrl: "/admin/user-level",
|
|
parentId: -1,
|
|
icon: <MasterUserLevelIcon />,
|
|
position: 1,
|
|
statusId: 1,
|
|
childMenu: [],
|
|
statusName: "Active",
|
|
childModule: null,
|
|
},
|
|
];
|
|
|
|
const SidebarMobile: React.FC<SidebarProps> = ({ updateSidebarData }) => {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const [sidebarMenu, setSidebarMenu] = useState<SidebarMenuTask[]>();
|
|
const { isOpen, toggleSidebar } = useSidebar();
|
|
const token = Cookies.get("access_token");
|
|
const username = Cookies.get("username");
|
|
const isAuthenticated = Cookies.get("is_authenticated");
|
|
const roles = Cookies.get("ulie");
|
|
const rolesId = Cookies.get("urie");
|
|
|
|
useEffect(() => {
|
|
if (!token) {
|
|
onLogout();
|
|
}
|
|
}, [token]);
|
|
|
|
const onLogout = () => {
|
|
Object.keys(Cookies.get()).forEach((cookieName) => {
|
|
Cookies.remove(cookieName);
|
|
});
|
|
router.push("/auth");
|
|
};
|
|
|
|
useEffect(() => {
|
|
updateSidebarData(isOpen);
|
|
}, [isOpen]);
|
|
|
|
return (
|
|
<div
|
|
className={`flex lg:hidden absolute h-screen flex-grow ${
|
|
isOpen ? "min-w-[240px]" : "hidden"
|
|
}`}
|
|
>
|
|
<div
|
|
className={` flex h-full flex-col p-4 mb-0 bg-gray-950 z-40 transition-width !ease-in-out justify-between ${
|
|
isOpen ? "w-[238px]" : "w-[80px]"
|
|
}`}
|
|
>
|
|
<div>
|
|
{!isOpen && (
|
|
<div className="w-full flex justify-center items-center">
|
|
<button
|
|
className="w-5 h-5 mb-3 text-zinc-400 dark:text-zinc-400 z-50 border-1 border-zinc-400 rounded-full flex justify-center items-center"
|
|
onClick={toggleSidebar}
|
|
>
|
|
<ChevronRightIcon />
|
|
</button>
|
|
</div>
|
|
)}
|
|
<div
|
|
className={`flex ${
|
|
isOpen ? "justify-between" : "justify-center"
|
|
} w-full items-center px-2`}
|
|
>
|
|
<Link
|
|
href="/"
|
|
className="flex flex-row items-center gap-3 font-bold"
|
|
>
|
|
<img src="/logohumas.png" className="w-20" />
|
|
{/* {isOpen && <span>ACME</span>} */}
|
|
</Link>
|
|
{isOpen && (
|
|
<button
|
|
className="w-5 h-5 text-zinc-400 z-50 border-1 border-zinc-400 rounded-full flex justify-center items-center"
|
|
onClick={toggleSidebar}
|
|
>
|
|
<ChevronLeftIcon />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<SidebarMenu>
|
|
{rolesId === "1"
|
|
? sidebarLevel1?.map((list: any, index: number) =>
|
|
list.isGroup ? (
|
|
<p
|
|
key={list.id}
|
|
className={`font-bold mr-4 text-white ${
|
|
!isOpen ? "text-center" : ""
|
|
}`}
|
|
>
|
|
{isOpen ? list.name : "..."}
|
|
</p>
|
|
) : list.childMenu?.length < 1 ? (
|
|
isOpen ? (
|
|
<Link key={list.id} href={list.modulePathUrl}>
|
|
<div
|
|
className={`px-3.5 py-2 mr-4 rounded-lg flex flex-row gap-2 ${
|
|
pathname.includes(list.modulePathUrl)
|
|
? "bg-white text-black font-bold"
|
|
: "text-white hover:bg-gray-200 hover:text-black"
|
|
}`}
|
|
>
|
|
{list.icon} {isOpen && list.name}
|
|
</div>
|
|
</Link>
|
|
) : (
|
|
<Tooltip
|
|
content={list.name}
|
|
placement="right"
|
|
delay={0}
|
|
closeDelay={0}
|
|
key={list.name}
|
|
>
|
|
<Link key={list.id} href={list.modulePathUrl}>
|
|
<div
|
|
className={`py-2 mr-4 rounded-lg hover:bg-zinc-400 dark:hover:text-zinc-600 flex flex-row justify-center gap-1 ${
|
|
pathname.includes(list.modulePathUrl)
|
|
? "bg-zinc-300 text-zinc-500 font-bold hover:text-black"
|
|
: "text-zinc-400 hover:text-black"
|
|
}`}
|
|
>
|
|
{list.icon} {isOpen && list.name}
|
|
</div>
|
|
</Link>
|
|
</Tooltip>
|
|
)
|
|
) : (
|
|
<SidebarCollapseItems
|
|
key={list.id}
|
|
title={list.name}
|
|
isActive={pathname.includes(list.modulePathUrl)}
|
|
icon={list.icon}
|
|
items={[
|
|
list?.childMenu?.map((item: any) => (
|
|
<SidebarCollapseSubItems
|
|
key={item.id}
|
|
title={item?.name}
|
|
isActive={pathname.includes(item.modulePathUrl)}
|
|
isParentActive={pathname.includes(
|
|
list.modulePathUrl
|
|
)}
|
|
path={item.modulePathUrl}
|
|
icon={item.icon}
|
|
/>
|
|
)),
|
|
]}
|
|
/>
|
|
)
|
|
)
|
|
: rolesId === "2"
|
|
? sidebarLevel2?.map((list: any, index: number) =>
|
|
list.isGroup ? (
|
|
<p
|
|
key={list.id}
|
|
className={`font-bold mr-4 text-white ${
|
|
!isOpen ? "text-center" : ""
|
|
}`}
|
|
>
|
|
{isOpen ? list.name : "..."}
|
|
</p>
|
|
) : list.childMenu?.length < 1 ? (
|
|
isOpen ? (
|
|
<Link key={list.id} href={list.modulePathUrl}>
|
|
<div
|
|
className={`px-3.5 py-2 mr-4 rounded-lg flex flex-row gap-2 ${
|
|
pathname.includes(list.modulePathUrl)
|
|
? "bg-white text-black font-bold"
|
|
: "text-white hover:bg-gray-200 hover:text-black"
|
|
}`}
|
|
>
|
|
{list.icon} {isOpen && list.name}
|
|
</div>
|
|
</Link>
|
|
) : (
|
|
<Tooltip
|
|
content={list.name}
|
|
placement="right"
|
|
delay={0}
|
|
closeDelay={0}
|
|
key={list.name}
|
|
>
|
|
<Link key={list.id} href={list.modulePathUrl}>
|
|
<div
|
|
className={`py-2 mr-4 rounded-lg hover:bg-zinc-400 dark:hover:text-zinc-600 flex flex-row justify-center gap-1 ${
|
|
pathname.includes(list.modulePathUrl)
|
|
? "bg-zinc-300 text-zinc-500 font-bold hover:text-black"
|
|
: "text-zinc-400 hover:text-black"
|
|
}`}
|
|
>
|
|
{list.icon} {isOpen && list.name}
|
|
</div>
|
|
</Link>
|
|
</Tooltip>
|
|
)
|
|
) : (
|
|
<SidebarCollapseItems
|
|
key={list.id}
|
|
title={list.name}
|
|
isActive={pathname.includes(list.modulePathUrl)}
|
|
icon={list.icon}
|
|
items={[
|
|
list?.childMenu?.map((item: any) => (
|
|
<SidebarCollapseSubItems
|
|
key={item.id}
|
|
title={item?.name}
|
|
isActive={pathname.includes(item.modulePathUrl)}
|
|
isParentActive={pathname.includes(
|
|
list.modulePathUrl
|
|
)}
|
|
path={item.modulePathUrl}
|
|
icon={item.icon}
|
|
/>
|
|
)),
|
|
]}
|
|
/>
|
|
)
|
|
)
|
|
: sidebarLevel3?.map((list: any, index: number) =>
|
|
list.isGroup ? (
|
|
<p
|
|
key={list.id}
|
|
className={`font-bold mr-4 text-white ${
|
|
!isOpen ? "text-center" : ""
|
|
}`}
|
|
>
|
|
{isOpen ? list.name : "..."}
|
|
</p>
|
|
) : list.childMenu?.length < 1 ? (
|
|
isOpen ? (
|
|
<Link key={list.id} href={list.modulePathUrl}>
|
|
<div
|
|
className={`px-3.5 py-2 mr-4 rounded-lg flex flex-row gap-2 ${
|
|
pathname.includes(list.modulePathUrl)
|
|
? "bg-white text-black font-bold"
|
|
: "text-white hover:bg-gray-200 hover:text-black"
|
|
}`}
|
|
>
|
|
{list.icon} {isOpen && list.name}
|
|
</div>
|
|
</Link>
|
|
) : (
|
|
<Tooltip
|
|
content={list.name}
|
|
placement="right"
|
|
delay={0}
|
|
closeDelay={0}
|
|
key={list.name}
|
|
>
|
|
<Link key={list.id} href={list.modulePathUrl}>
|
|
<div
|
|
className={`py-2 mr-4 rounded-lg hover:bg-zinc-400 dark:hover:text-zinc-600 flex flex-row justify-center gap-1 ${
|
|
pathname.includes(list.modulePathUrl)
|
|
? "bg-zinc-300 text-zinc-500 font-bold hover:text-black"
|
|
: "text-zinc-400 hover:text-black"
|
|
}`}
|
|
>
|
|
{list.icon} {isOpen && list.name}
|
|
</div>
|
|
</Link>
|
|
</Tooltip>
|
|
)
|
|
) : (
|
|
<SidebarCollapseItems
|
|
key={list.id}
|
|
title={list.name}
|
|
isActive={pathname.includes(list.modulePathUrl)}
|
|
icon={list.icon}
|
|
items={[
|
|
list?.childMenu?.map((item: any) => (
|
|
<SidebarCollapseSubItems
|
|
key={item.id}
|
|
title={item?.name}
|
|
isActive={pathname.includes(item.modulePathUrl)}
|
|
isParentActive={pathname.includes(
|
|
list.modulePathUrl
|
|
)}
|
|
path={item.modulePathUrl}
|
|
icon={item.icon}
|
|
/>
|
|
)),
|
|
]}
|
|
/>
|
|
)
|
|
)}
|
|
</SidebarMenu>
|
|
</div>
|
|
<div
|
|
className={`mt-12 p-2 flex ${
|
|
isOpen ? "justify-start ml-2" : "justify-center"
|
|
} mt-auto flex flex-col items-between`}
|
|
>
|
|
<div className="flex flex-col gap-4">
|
|
<div
|
|
className={`flex flex-row ${
|
|
isOpen ? "justify-start" : "justify-center"
|
|
} gap-2 items-center text-white `}
|
|
>
|
|
<ThemeSwitch />
|
|
{isOpen && "Theme"}
|
|
</div>
|
|
{isOpen ? (
|
|
<Link href="/settings">
|
|
<div
|
|
className={`py-2 mr-4 rounded-lg flex flex-row gap-2 ${
|
|
pathname.includes("/settings")
|
|
? "bg-white text-black font-bold px-2"
|
|
: "text-white "
|
|
}`}
|
|
>
|
|
<SettingsIcon /> {isOpen && "Settings"}
|
|
</div>
|
|
</Link>
|
|
) : (
|
|
<Tooltip
|
|
content="Setting"
|
|
placement="right"
|
|
delay={0}
|
|
closeDelay={0}
|
|
>
|
|
<Link href="/settings">
|
|
<div
|
|
className={`py-2 rounded-lg hover:text-zinc-600 flex flex-row justify-center gap-1 ${
|
|
pathname.includes("/settings")
|
|
? "bg-zinc-300 text-zinc-500 font-bold "
|
|
: "text-zinc-400 "
|
|
}`}
|
|
>
|
|
<SettingsIcon /> {isOpen && "Settings"}
|
|
</div>
|
|
</Link>
|
|
</Tooltip>
|
|
)}
|
|
{isOpen ? (
|
|
<div className="flex flex-row gap-3 items-center text-white">
|
|
<UserProfileIcon size={36} />
|
|
<div className="flex flex-col ">
|
|
<a className="cursor-pointer ">{username}</a>
|
|
<a
|
|
className="hover:text-red-600 underline text-sm cursor-pointer"
|
|
onClick={() => onLogout()}
|
|
>
|
|
Logout
|
|
</a>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<Tooltip
|
|
content="Profile"
|
|
delay={0}
|
|
closeDelay={0}
|
|
placement="right"
|
|
>
|
|
<a
|
|
className={`cursor-pointer flex flex-row ${
|
|
isOpen ? "justify-start" : "justify-center"
|
|
} gap-2 items-center text-zinc-600 dark:text-zinc-400 hover:font-semibold hover:text-zinc-700 dark:hover:text-zinc-300`}
|
|
onClick={toggleSidebar}
|
|
>
|
|
<UserProfileIcon size={28} />
|
|
</a>
|
|
</Tooltip>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SidebarMobile;
|