web-humas-fe/components/layout/sidebar/sidebar.tsx

import { SidebarMenuTask } from "@/types/globals";
import { Tooltip } from "@nextui-org/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 {
  ArticleIcon,
  DashboardIcon,
  HomeIcon,
  InfoCircleIcon,
  MagazineIcon,
  MasterCategoryIcon,
  MasterRoleIcon,
  MasterUsersIcon,
  MinusCircleIcon,
  StaticPageIcon,
  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";

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 sideBarDummyData = [
  {
    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: 4,
    name: "Majalah",
    moduleId: 652,
    moduleName: "Apps",
    modulePathUrl: "/admin/magazine",
    parentId: -1,
    icon: <MagazineIcon />,
    position: 1,
    statusId: 1,
    childMenu: [],
    statusName: "Active",
    childModule: null,
  },
  {
    id: 11,
    name: "Static Page",
    moduleId: 652,
    moduleName: "Dashboard",
    modulePathUrl: "/admin/static-page",
    parentId: -1,
    icon: <StaticPageIcon />,
    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: 30,
    name: "Master Category",
    moduleId: 654,
    moduleName: "Master",
    modulePathUrl: "/admin/master-category",
    parentId: -1,
    icon: <MasterCategoryIcon />,
    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,
  },
];

const Sidebar: 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 isAuthenticated = Cookies.get("is_authenticated");

  useEffect(() => {
    if (!isAuthenticated) {
      onLogout();
    }
  }, [token]);

  const onLogout = () => {
    Object.keys(Cookies.get()).forEach((cookieName) => {
      Cookies.remove(cookieName);
    });
    router.push("/auth");
  };

  useEffect(() => {
    updateSidebarData(isOpen);
  }, [isOpen]);

  return (
    <div
      className={`hidden md:flex h-full flex-grow ${
        isOpen ? "min-w-[240px]" : "min-w-[80px]"
      }`}
    >
      <div
        className={` flex h-full flex-col rounded-lg p-4 mb-0 bg-gray-100 dark:bg-stone-900 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 dark:text-zinc-400 z-50 border-1 border-zinc-400 rounded-full flex justify-center items-center"
                onClick={toggleSidebar}
              >
                <ChevronLeftIcon />
              </button>
            )}
          </div>

          <SidebarMenu>
            {sideBarDummyData
              ? sideBarDummyData?.map((list: any, index: number) =>
                  list.isGroup ? (
                    <p
                      key={list}
                      className={`font-bold mr-4 ${
                        !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 hover:bg-zinc-400 dark:hover:text-zinc-600 flex flex-row gap-2 ${
                              pathname.includes(list.modulePathUrl)
                                ? "bg-zinc-600 dark:bg-zinc-300 text-zinc-300 dark:text-zinc-500 font-bold"
                                : "text-zinc-600 dark:text-zinc-400"
                            }`}
                          > */}
                          <div
                            className={`px-3.5 py-2 mr-4 rounded-lg  flex flex-row gap-2 ${
                              pathname.includes(list.modulePathUrl)
                                ? "bg-black dark:bg-white text-white dark:text-black font-bold"
                                : "text-black dark:text-white hover:bg-stone-900 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black"
                            }`}
                          >
                            {list.icon} {isOpen && list.name}
                          </div>
                        </Link>
                      ) : (
                        <Tooltip
                          content={list.name}
                          placement="right"
                          delay={0}
                          closeDelay={0}
                        >
                          <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-600 dark:bg-zinc-300 text-zinc-300 dark:text-zinc-500 font-bold"
                                  : "text-zinc-600 dark:text-zinc-400"
                              }`}
                            >
                              {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={`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`}
            >
              <ThemeSwitch />
              {isOpen && "Theme"}
            </div>
            {isOpen ? (
              <div className="flex flex-row gap-3">
                <Image
                  src="/pengaduan.png"
                  width={72}
                  height={72}
                  alt="profile"
                />
                <div className="flex flex-col">
                  <a className="cursor-pointer">Nama User</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}
                >
                  <Image
                    src="/pengaduan.png"
                    width={48}
                    height={48}
                    alt="profile"
                  />
                </a>
              </Tooltip>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Sidebar;