#112 Ft minimize dashboard menu

src/components/sidebar/sidebar.tsx

@@ -1,113 +1,87 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Icon } from '@iconify/react';
-
-import { NavLink, Navigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import {
-  sidebarItems2,
-  sidebarItems1,
-  sidebarItems3,
+  generalSectionItems,
+  managementSectionItems,
+  applicationsSectionItems,
+  performanceSectionItems,
+  adminSectionItems,
   applicantSidebarItems,
+  additionalSidebarItems,
+  settingsSidebarItems,
 } from './sidebarItems';
-import { BrowserRouter } from 'react-router-dom';
-import { BrowserRouter as Router, Link } from 'react-router-dom';
-import LogoutPage from '../../pages/LogoutPage';
-import { Token } from '../../utils/utils';
 
-const sidebar = () => {
-  const roleName = localStorage.getItem('roleName');
-  console.log(roleName);
+const Sidebar = () => {
+  const [expanded, setExpanded] = useState(true); 
+  const roleName = localStorage.getItem('roleName'); 
+  const [openSections, setOpenSections] = useState({
+    general: true,
+    management: true,
+    applications: true,
+    performance: true,
+    admin: true,
+    additional: true,
+    settings: true,
+  });
+
+  const toggleSection = (section) => {
+    setOpenSections(prev => ({ ...prev, [section]: !prev[section] }));
+  };
 
   return (
-    <>
-      <div className="top-0 bottom-0 overflow-y-scroll mt-[70px] w-[16rem] grow z-10 fixed dark:bg-dark-bg  bg-white font-sans border-r border-[#979797] ">
+    <div
+      className={`top-0 bottom-0 mt-[70px] ${expanded ? 'w-[16rem]' : 'w-[4rem]'} z-10 fixed dark:bg-dark-bg bg-white text-white font-sans border-r border-[#979797] transition-width duration-300`}
+      style={{ height: 'calc(100vh - 70px)' }}
+    >
+      <button
+        onClick={() => setExpanded(curr => !curr)}
+        className="p-1.5 rounded-lg bg-gray-50 hover:bg-lime-800 absolute top-2 text-white right-2 z-20"
+      >
+        <Icon
+            icon={expanded ? "material-symbols:menu-open" : "mdi:menu-close"}
+            color="#000"
+          />
+      </button>
+
+      <div className="overflow-y-auto pt-12">
         {roleName === 'applicant' ? (
-          <div className="mb-2 border-b border-[#000] h-[70%]">
-            <ul className=" min:mt-0 pl-4 block mt-2">
-              {applicantSidebarItems.map((items, index) => {
-                return (
-                  <li
-                    key={index}
-                    className=" min:text-xl lg:justify-content-start align-items-center  dark:text-white text-[#173B3F]  text-base"
-                  >
-                    <Link
-                      to={items.path}
-                      className="is-active focus:text-green-600  p-1 flex align-items-center leading-3 cursor-pointer font-semibold hover:font-bold  "
-                    >
-                      <label className="mr-3 p-1">{items.icon}</label>
-                      <label className="p-1  ">{items.title} </label>
-                    </Link>
-                  </li>
-                );
-              })}
-              {/* <li className=" min:text-xl lg:justify-content-start align-items-center  dark:text-white text-[#173B3F]  text-base">
-                <LogoutPage />
-              </li> */}
-            </ul>
-          </div>
+          <SidebarSection items={applicantSidebarItems} title="Applicant Section" expanded={expanded} open={openSections.general} toggle={() => toggleSection('general')} />
         ) : (
-          <div className="mb-2 border-b border-[#000] ">
-            <ul className=" min:mt-0 pl-4 block mt-2">
-              {sidebarItems1.map((items, index) => {
-                return (
-                  <li
-                    key={index}
-                    className=" min:text-xl lg:justify-content-start align-items-center  dark:text-white text-[#173B3F]  text-base"
-                  >
-                    <Link
-                      to={items.path}
-                      className="is-active focus:text-green-600  p-1 flex align-items-center leading-3 cursor-pointer font-semibold hover:font-bold  "
-                    >
-                      <label className="mr-3 p-1">{items.icon}</label>
-                      <label className="p-1  ">{items.title} </label>
-                    </Link>
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
+          <>
+            <SidebarSection items={generalSectionItems} title="General" expanded={expanded} open={openSections.general} toggle={() => toggleSection('general')} />
+            <SidebarSection items={managementSectionItems} title="Management" expanded={expanded} open={openSections.management} toggle={() => toggleSection('management')} />
+            <SidebarSection items={applicationsSectionItems} title="Applications and Programs" expanded={expanded} open={openSections.applications} toggle={() => toggleSection('applications')} />
+            <SidebarSection items={performanceSectionItems} title="Performance and Grading" expanded={expanded} open={openSections.performance} toggle={() => toggleSection('performance')} />
+            <SidebarSection items={adminSectionItems} title="Admin" expanded={expanded} open={openSections.admin} toggle={() => toggleSection('admin')} />
+          </>
         )}
-
-        <div className="mb-3">
-          <ul className="pl-4 block mt-2 md:mt-0">
-            {sidebarItems2.map((items, index) => {
-              return (
-                <li
-                  key={index}
-                  className=" align-items-center  dark:text-white text-[#173B3F] text-base"
-                >
-                  <a
-                    href={items.path}
-                    className="p-1 flex align-items-center leading-3 cursor-pointer font-semibold hover:font-bold"
-                  >
-                    <label className="mr-3 p-1">{items.icon}</label>
-                    <label className="p-1">{items.title} </label>
-                  </a>
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-        <div className="inset-x-0 bottom-2  mt-20">
-          <ul className="px-20 flex justify-content-center">
-            {sidebarItems3.map((items, index) => {
-              return (
-                <li
-                  key={index}
-                  className=" justify-content-center mb-1 align-items-center  dark:text-white text-[#173B3F] text-lg ml-2"
-                >
-                  <a
-                    href={items.path}
-                    className="p-1 flex align-items-center leading-5 cursor-pointer"
-                  >
-                    <label className="mr-3 p-1">{items.icon}</label>
-                  </a>
-                </li>
-              );
-            })}
-          </ul>
-        </div>
+        <SidebarSection items={additionalSidebarItems} title="Additional" expanded={expanded} open={openSections.additional} toggle={() => toggleSection('additional')} />
+        <SidebarSection items={settingsSidebarItems} title="Settings" expanded={expanded} open={openSections.settings} toggle={() => toggleSection('settings')} />
       </div>
-    </>
+    </div>
   );
 };
-export default sidebar;
+
+const SidebarSection = ({ items, title, expanded, open, toggle }) => (
+  <div>
+    <div onClick={toggle} className="cursor-pointer flex items-center justify-between p-2 text-white hover:bg-green">
+      {expanded && <span className="font-bold">{title}</span>}
+      <Icon icon={open ? 'akar-icons:chevron-down' : 'akar-icons:chevron-right'} />
+    </div>
+    {open && (
+      <ul className="pl-4 mt-2">
+        {items.map((item, index) => (
+          <li key={index} className="flex items-center text-white text-base dark:text-white">
+            <Link to={item.path} className="is-active focus:text-green-600 p-1 flex items-center leading-3 cursor-pointer font-semibold hover:font-bold">
+              <span className="mr-3 p-1">{item.icon}</span>
+              {expanded && <span className="p-1">{item.title}</span>}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    )}
+  </div>
+);
+
+export default Sidebar;