#112 Ft minimize dashboard menu

src/components/sidebar/navslide.css

@@ -0,0 +1,24 @@
+/* Custom scrollbar styles */
+.custom-scrollbar::-webkit-scrollbar {
+    width: 6px; /* Width of the scrollbar */
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-track {
+    background: #f1f1f1; /* Track color */
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-thumb {
+    background-color: #888; 
+    border-radius: 10px; 
+    border: 1px solid #f1f1f1;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: #555; 
+  }
+
+  .custom-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: #888 #f1f1f1;
+  }
+

src/components/sidebar/sidebar.tsx

@@ -1,113 +1,58 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Icon } from '@iconify/react';
+import { Link, useNavigate } from 'react-router-dom';
+import { generalSectionItems, managementSectionItems, applicationsSectionItems, performanceSectionItems, adminSectionItems, applicantSidebarItems, additionalSidebarItems } from './sidebarItems';
+import "./navslide.css";
 
-import { NavLink, Navigate } from 'react-router-dom';
-import {
-  sidebarItems2,
-  sidebarItems1,
-  sidebarItems3,
-  applicantSidebarItems,
-} 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 Sidebar = () => {
+  const [expanded, setExpanded] = useState(true);
+  const [openSections, setOpenSections] = useState({ general: true, management: true, applications: true, performance: true, admin: true, additional: true });
   const roleName = localStorage.getItem('roleName');
-  console.log(roleName);
+  const sections = roleName === 'applicant' ? [{ title: 'Applicant Section', items: applicantSidebarItems }] : [
+    { title: 'General', items: generalSectionItems },
+    { title: 'Management', items: managementSectionItems },
+    { title: 'Applications', items: applicationsSectionItems },
+    { title: 'Performance', items: performanceSectionItems },
+    { title: 'Admin', items: adminSectionItems },
+    { title: 'Additional', items: additionalSidebarItems }
+  ];
+
+  const toggleSection = (section) => setOpenSections(prev => ({ ...prev, [section]: !prev[section] }));
+  const handleLogout = () => { localStorage.clear(); useNavigate()('/login'); };
 
   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] ">
-        {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>
+    <div className={`top-0 mt-[70px] ${expanded ? 'w-[16rem]' : 'w-[4rem]'} fixed z-10 dark:bg-dark-bg bg-white border-r transition-width duration-300 h-screen overflow-y-auto custom-scrollbar`}>
+      <button onClick={() => setExpanded(!expanded)} className="p-1.5 rounded-lg bg-gray-50 absolute top-2 right-2 z-20">
+        <Icon icon={expanded ? 'material-symbols:menu-open' : 'mdi:menu-close'} color="#000" />
+      </button>
+      <div className="pt-12 pb-12 mb-20">
+        {sections.map((section, idx) => (
+          <div key={idx}>
+            <div onClick={() => toggleSection(section.title.toLowerCase())} className="cursor-pointer p-2 flex items-center justify-between text-white">
+              {expanded && <span className="font-bold">{section.title}</span>}
+              <Icon icon={openSections[section.title.toLowerCase()] ? 'akar-icons:chevron-down' : 'akar-icons:chevron-right'} />
+            </div>
+            {openSections[section.title.toLowerCase()] && (
+              <ul className="pl-4 mt-2">
+                {section.items.map((item, index) => (
+                  <li key={index} className="flex items-center text-white">
+                    <Link to={item.path} className="p-1 flex items-center">
+                      <span className="mr-3">{item.icon}</span>
+                      {expanded && <span>{item.title}</span>}
                     </Link>
                   </li>
-                );
-              })}
-              {/* <li className=" min:text-xl lg:justify-content-start align-items-center  dark:text-white text-[#173B3F]  text-base">
-                <LogoutPage />
-              </li> */}
-            </ul>
+                ))}
+              </ul>
+            )}
           </div>
-        ) : (
-          <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>
-        )}
-
-        <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>
+        ))}
+        <button onClick={handleLogout} className="flex items-center p-1 font-semibold hover:font-bold text-white focus:outline-none">
+          <Icon icon="nimbus:arrow-left" className="mr-3" />
+          {expanded && <span>Logout</span>}
+        </button>
       </div>
-    </>
+    </div>
   );
 };
-export default sidebar;
+
+export default Sidebar;