From 2f0727f46b89fa0543dc40c408e0fbe251f78947 Mon Sep 17 00:00:00 2001 From: ceelogre Date: Wed, 28 Aug 2024 16:27:09 +0200 Subject: [PATCH 01/14] fix: remove placeholder property --- .../roles&permissions/ListAllUsers.tsx | 1 - src/pages/updateTrainee/traineUpdate.tsx | 26 ++++++++++++++----- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/src/components/roles&permissions/ListAllUsers.tsx b/src/components/roles&permissions/ListAllUsers.tsx index 18684b175..491cf69e8 100644 --- a/src/components/roles&permissions/ListAllUsers.tsx +++ b/src/components/roles&permissions/ListAllUsers.tsx @@ -319,7 +319,6 @@ const ListAllUsers: FunctionComponent = (props) => { + + + {/* Sidebar content with scrolling */} +
+ {" "} + {/* Add padding-top to push content below the button */} + {roleName === "applicant" ? ( +
+
    + {applicantSidebarItems.map((items, index) => ( +
  • + - - - - -
    • - ); - })} - {/*
  • - -
    • */} + + {expanded && } + + + ))}
) : ( -
-
    - {sidebarItems1.map((items, index) => { - return ( -
  • +
      + {sidebarItems1.map((items, index) => ( +
    • + - - - - -
      • - ); - })} + + {expanded && } + + + ))}
)} -
-
+
    - {sidebarItems3.map((items, index) => { - return ( -
  • ( +
  • + - - - -
    • - ); - })} + + + + ))}
- +
); }; -export default sidebar; + +export default Sidebar; diff --git a/src/redux/actions/login.ts b/src/redux/actions/login.ts index 7bd9e8797..dc1bcc2bd 100644 --- a/src/redux/actions/login.ts +++ b/src/redux/actions/login.ts @@ -1,27 +1,23 @@ import axios from "axios"; export const loginAction = async (email, password) => { - - try { - - const response = await axios.post(`${process.env.BACKEND_URL}`, { - query: ` + try { + const response = await axios.post(`${process.env.BACKEND_URL}`, { + query: ` mutation Mutation($email: String!, $password: String!) { login(email: $email, password: $password) { token } } `, - variables: { - email, - password, - }, - }); - - return response; - - } catch (error) { - console.log(error); + variables: { + email, + password, + }, + }); - } -} \ No newline at end of file + return response; + } catch (error) { + console.log(error); + } +}; From e8fd5c791a86964e1e397952afd70410b5f7453f Mon Sep 17 00:00:00 2001 From: ManziPatrick Date: Tue, 17 Sep 2024 11:56:46 +0200 Subject: [PATCH 03/14] fix minimize dashboard by icon and categorize into section --- src/components/sidebar/sidebar.tsx | 173 ++++++++++------------- src/components/sidebar/sidebarItems.tsx | 174 ++++++++++++------------ 2 files changed, 158 insertions(+), 189 deletions(-) diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 0ed3905f9..730cf3553 100755 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -1,122 +1,87 @@ -import React, { useState } from "react"; -import { Icon } from "@iconify/react"; -import { Link } from "react-router-dom"; +import React, { useState } from 'react'; +import { Icon } from '@iconify/react'; +import { Link } from 'react-router-dom'; import { - sidebarItems1, - sidebarItems2, - sidebarItems3, + generalSectionItems, + managementSectionItems, + applicationsSectionItems, + performanceSectionItems, + adminSectionItems, applicantSidebarItems, -} from "./sidebarItems"; + additionalSidebarItems, + settingsSidebarItems, +} from './sidebarItems'; const Sidebar = () => { - const [expanded, setExpanded] = useState(true); - const roleName = localStorage.getItem("roleName"); + 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 (
- {/* Minimize/Maximize button fixed at the top */} -
- -
+ - {/* Sidebar content with scrolling */}
- {" "} - {/* Add padding-top to push content below the button */} - {roleName === "applicant" ? ( -
-
    - {applicantSidebarItems.map((items, index) => ( -
  • - - - {expanded && } - -
    • - ))} -
-
+ {roleName === 'applicant' ? ( + toggleSection('general')} /> ) : ( -
-
    - {sidebarItems1.map((items, index) => ( -
  • - - - {expanded && } - -
    • - ))} -
-
+ <> + toggleSection('general')} /> + toggleSection('management')} /> + toggleSection('applications')} /> + toggleSection('performance')} /> + toggleSection('admin')} /> + )} -
- -
-
- -
+ toggleSection('additional')} /> + toggleSection('settings')} />
); }; +const SidebarSection = ({ items, title, expanded, open, toggle }) => ( +
+
+ {expanded && {title}} + +
+ {open && ( +
    + {items.map((item, index) => ( +
  • + + {item.icon} + {expanded && {item.title}} + +
    • + ))} +
+ )} +
+); + export default Sidebar; diff --git a/src/components/sidebar/sidebarItems.tsx b/src/components/sidebar/sidebarItems.tsx index b3aca9841..8d9e7321e 100755 --- a/src/components/sidebar/sidebarItems.tsx +++ b/src/components/sidebar/sidebarItems.tsx @@ -1,178 +1,182 @@ import React from 'react'; import { Icon } from '@iconify/react'; -export const sidebarItems1 = [ +// General Section +export const generalSectionItems = [ { path: '/dashboard', - icon: , + icon: , title: 'Dashboard', }, { - path: '/organisations', - icon: , - title: 'Organisations', + path: '/calendar', + icon: , + title: 'Calendar', }, { - path: '/roles', - icon: , - title: 'Members', + path: '/notifications', + icon: , + title: 'Notifications', }, +]; + +// Management Section +export const managementSectionItems = [ { - path: '/programs', - icon: , - title: 'Programs', + path: '/organisations', + icon: , + title: 'Organisations', }, { - path: '/job-post', - icon: , - title: 'View Job Post', + path: '/roles', + icon: , + title: 'Members', }, { path: '/admins', - icon: , + icon: , title: 'Admins', }, { - path: '/domains', - icon: , - title: 'Domains', + path: '/coordinators', + icon: , + title: 'Coordinators', }, +]; + +// Application and Programs Section +export const applicationsSectionItems = [ { - path: "/create-form", - icon: , - title: "Application Forms", + path: '/create-form', + icon: , + title: 'Application Forms', }, { - path: "/view-applications", - icon: , - title: "Applications", + path: '/view-applications', + icon: , + title: 'Applications', }, { path: '/Trainee-applicants', - icon: , + icon: , title: 'Trainees-Applicants', }, { - path: '/attendance', - icon: , - title: 'Attendance', - }, - { - path: '/performance', - icon: , - title: 'Performance', - }, - { - path: '/sessions', - icon: , - title: 'Sessions', + path: '/programs', + icon: , + title: 'Programs', }, { - path: '/coordinators', - icon: , - title: 'Coordinators', + path: '/job-post', + icon: , + title: 'View Job Post', }, { path: '/cohort', - icon: , + icon: , title: 'Cohorts', }, { path: '/cycles', - icon: , + icon: , title: 'Application Cycles', }, +]; + +// Performance and Grading Section +export const performanceSectionItems = [ { - path: '/updatedRatings', - icon: , - title: 'Updated Ratings', + path: '/attendance', + icon: , + title: 'Attendance', }, { - path: '/grading', - icon: , - title: 'Grading System', + path: '/performance', + icon: , + title: 'Performance', }, { - path: '/rolesandaccess', - icon: , - title: 'Roles & Access', + path: '/grading', + icon: , + title: 'Grading System', }, { - path: '/notifications', - icon: , - title: 'Notifications', + path: '/updatedRatings', + icon: , + title: 'Updated Ratings', }, +]; + +// Admin Section +export const adminSectionItems = [ { - path: '/create-form', - icon: , - title: 'Applications Form', + path: '/rolesandaccess', + icon: , + title: 'Roles & Access', }, { - path: '/calendar', - icon: , - title: 'Calendar', + path: '/sessions', + icon: , + title: 'Sessions', }, { path: '/Trash', - icon: , + icon: , title: 'Trash', }, + { + path: '/domains', + icon: , + title: 'Domains', + }, ]; +// Applicant Sidebar Items export const applicantSidebarItems = [ { path: '/myApplications', - icon: , + icon: , title: 'My Applications', }, { path: '/interviewScheduler', - icon: ( - - ), + icon: , title: 'Schedule Interview', }, - { - path: '/notifications', - icon: , - title: 'Notifications', - }, - { - path: '/calendar', - icon: , - title: 'Calendar', - }, { path: '/job/Post/view', - icon: , - title: 'Job Post ', + icon: , + title: 'Job Post', }, ]; -export const sidebarItems2 = [ + +// Additional Sidebar Items +export const additionalSidebarItems = [ { path: '/documents', - icon: , + icon: , title: 'Docs', }, { path: '/help', - icon: , + icon: , title: 'Help', }, { path: '/Logout', - icon: , + icon: , title: 'Logout', }, ]; -export const sidebarItems3 = [ +// Settings Sidebar Items +export const settingsSidebarItems = [ { path: '/settings', - icon: , + icon: , }, { path: '/settings', - icon: , + icon: , }, ]; From 94d174ad4f25fe70844fdd799f1ba3d875bef53e Mon Sep 17 00:00:00 2001 From: ManziPatrick Date: Tue, 17 Sep 2024 12:11:50 +0200 Subject: [PATCH 04/14] fix minimize dashboard by icon and categorize into section --- src/components/sidebar/sidebar.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 730cf3553..1983d464b 100755 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -38,7 +38,10 @@ const Sidebar = () => { 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" > - +
@@ -64,10 +67,7 @@ const SidebarSection = ({ items, title, expanded, open, toggle }) => (
{expanded && {title}} - +
{open && (
    From 1ce5df6790b7647d70c380d38d364b0cd485d812 Mon Sep 17 00:00:00 2001 From: ManziPatrick Date: Tue, 17 Sep 2024 12:39:33 +0200 Subject: [PATCH 05/14] fix minimize dashboard by icon and categorize into section --- src/components/sidebar/sidebar.tsx | 6 +++--- src/components/sidebar/sidebarItems.tsx | 20 ++++++-------------- 2 files changed, 9 insertions(+), 17 deletions(-) diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 1983d464b..2bf1ae051 100755 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -9,7 +9,7 @@ import { adminSectionItems, applicantSidebarItems, additionalSidebarItems, - settingsSidebarItems, + } from './sidebarItems'; const Sidebar = () => { @@ -22,7 +22,7 @@ const Sidebar = () => { performance: true, admin: true, additional: true, - settings: true, + }); const toggleSection = (section) => { @@ -57,7 +57,7 @@ const Sidebar = () => { )} toggleSection('additional')} /> - toggleSection('settings')} /> +
); diff --git a/src/components/sidebar/sidebarItems.tsx b/src/components/sidebar/sidebarItems.tsx index 8d9e7321e..eef6bcab4 100755 --- a/src/components/sidebar/sidebarItems.tsx +++ b/src/components/sidebar/sidebarItems.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { Icon } from '@iconify/react'; -// General Section export const generalSectionItems = [ { path: '/dashboard', @@ -20,7 +19,6 @@ export const generalSectionItems = [ }, ]; -// Management Section export const managementSectionItems = [ { path: '/organisations', @@ -44,7 +42,6 @@ export const managementSectionItems = [ }, ]; -// Application and Programs Section export const applicationsSectionItems = [ { path: '/create-form', @@ -162,21 +159,16 @@ export const additionalSidebarItems = [ icon: , title: 'Help', }, - { - path: '/Logout', - icon: , - title: 'Logout', - }, -]; - -// Settings Sidebar Items -export const settingsSidebarItems = [ { path: '/settings', icon: , + title: 'setting', }, { - path: '/settings', - icon: , + path: '/Logout', + icon: , + title: 'Logout', }, + ]; + From 3ed52407ede003ab4c8484e0470a6790e861f061 Mon Sep 17 00:00:00 2001 From: ManziPatrick Date: Tue, 17 Sep 2024 20:38:02 +0200 Subject: [PATCH 06/14] fix minimize dashboard by icon and categorize into section --- src/components/sidebar/sidebar.tsx | 103 +++++++++++++++++++----- src/components/sidebar/sidebarItems.tsx | 13 +-- 2 files changed, 92 insertions(+), 24 deletions(-) diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 2bf1ae051..c76f9c65b 100755 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -9,12 +9,11 @@ import { adminSectionItems, applicantSidebarItems, additionalSidebarItems, - } from './sidebarItems'; const Sidebar = () => { - const [expanded, setExpanded] = useState(true); - const roleName = localStorage.getItem('roleName'); + const [expanded, setExpanded] = useState(true); + const roleName = localStorage.getItem('roleName'); const [openSections, setOpenSections] = useState({ general: true, management: true, @@ -22,11 +21,10 @@ const Sidebar = () => { performance: true, admin: true, additional: true, - }); const toggleSection = (section) => { - setOpenSections(prev => ({ ...prev, [section]: !prev[section] })); + setOpenSections((prev) => ({ ...prev, [section]: !prev[section] })); }; return ( @@ -35,29 +33,87 @@ const Sidebar = () => { style={{ height: 'calc(100vh - 70px)' }} >
{roleName === 'applicant' ? ( - toggleSection('general')} /> + toggleSection('general')} + /> ) : ( <> - toggleSection('general')} /> - toggleSection('management')} /> - toggleSection('applications')} /> - toggleSection('performance')} /> - toggleSection('admin')} /> + toggleSection('general')} + /> + toggleSection('management')} + /> + toggleSection('applications')} + /> + toggleSection('performance')} + /> + toggleSection('admin')} + /> )} - toggleSection('additional')} /> + toggleSection('additional')} + /> + {/* Logout section */} +
+
    +
  • + + + + + {expanded && Logout} + +
    • +
+
); @@ -65,15 +121,24 @@ const Sidebar = () => { const SidebarSection = ({ items, title, expanded, open, toggle }) => (
-
+
{expanded && {title}}
{open && (
    {items.map((item, index) => ( -
  • - +
  • + {item.icon} {expanded && {item.title}} diff --git a/src/components/sidebar/sidebarItems.tsx b/src/components/sidebar/sidebarItems.tsx index eef6bcab4..daf10fb60 100755 --- a/src/components/sidebar/sidebarItems.tsx +++ b/src/components/sidebar/sidebarItems.tsx @@ -158,17 +158,20 @@ export const additionalSidebarItems = [ path: '/help', icon: , title: 'Help', + }, { path: '/settings', icon: , - title: 'setting', - }, + title: 'settings', + } +]; + +// Settings Sidebar Items +export const settingsSidebarItems = [ { path: '/Logout', icon: , title: 'Logout', - }, - + } ]; - From 0308efc63f37267cf498d0027c9a71d317f9fefe Mon Sep 17 00:00:00 2001 From: ManziPatrick Date: Tue, 17 Sep 2024 20:38:02 +0200 Subject: [PATCH 07/14] fix minimize dashboard by icon and categorize into section --- src/components/sidebar/sidebar.tsx | 88 +++++++++++++------------ src/components/sidebar/sidebarItems.tsx | 13 ++-- 2 files changed, 53 insertions(+), 48 deletions(-) diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 2bf1ae051..0fbccf088 100755 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -9,73 +9,75 @@ import { adminSectionItems, applicantSidebarItems, additionalSidebarItems, - } from './sidebarItems'; const Sidebar = () => { - const [expanded, setExpanded] = useState(true); - const roleName = localStorage.getItem('roleName'); + 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, - + general: true, management: true, applications: true, performance: true, admin: true, additional: true, }); - const toggleSection = (section) => { - setOpenSections(prev => ({ ...prev, [section]: !prev[section] })); - }; + const toggleSection = (section) => setOpenSections(prev => ({ ...prev, [section]: !prev[section] })); + 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 } + ]; return ( -
    - -
    - {roleName === 'applicant' ? ( - toggleSection('general')} /> - ) : ( - <> - toggleSection('general')} /> - toggleSection('management')} /> - toggleSection('applications')} /> - toggleSection('performance')} /> - toggleSection('admin')} /> - - )} + {sections.map((section, idx) => ( + toggleSection(section.title.toLowerCase())} + /> + ))} toggleSection('additional')} /> - +
    + +
    ); }; +const LogoutLink = ({ expanded }) => ( +
      +
    • + + + {expanded && Logout} + +
      • +
    +); + const SidebarSection = ({ items, title, expanded, open, toggle }) => (
    -
    +
    {expanded && {title}}
    {open && (
      {items.map((item, index) => ( -
    • - - {item.icon} - {expanded && {item.title}} +
    • + + {item.icon} + {expanded && {item.title}}
      • ))} diff --git a/src/components/sidebar/sidebarItems.tsx b/src/components/sidebar/sidebarItems.tsx index eef6bcab4..daf10fb60 100755 --- a/src/components/sidebar/sidebarItems.tsx +++ b/src/components/sidebar/sidebarItems.tsx @@ -158,17 +158,20 @@ export const additionalSidebarItems = [ path: '/help', icon: , title: 'Help', + }, { path: '/settings', icon: , - title: 'setting', - }, + title: 'settings', + } +]; + +// Settings Sidebar Items +export const settingsSidebarItems = [ { path: '/Logout', icon: , title: 'Logout', - }, - + } ]; - From 8c91c7c02c06750ebe7f79d718ea7bfc11f8183e Mon Sep 17 00:00:00 2001 From: ManziPatrick Date: Thu, 19 Sep 2024 14:18:58 +0200 Subject: [PATCH 08/14] fix minimize dashboard by icon and categorize into section --- src/components/sidebar/sidebar.tsx | 150 ++++++++--------------------- 1 file changed, 38 insertions(+), 112 deletions(-) diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 470b9f554..88da123a2 100755 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -1,132 +1,58 @@ 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 { generalSectionItems, managementSectionItems, applicationsSectionItems, performanceSectionItems, adminSectionItems, applicantSidebarItems, additionalSidebarItems } from './sidebarItems'; +import "./navslide.css"; 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'); - const [openSections, setOpenSections] = useState({ - general: true, - management: true, - applications: true, - performance: true, - admin: true, - additional: true, - }); - - const toggleSection = (section) => - setOpenSections((prev) => ({ ...prev, [section]: !prev[section] })); - - 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 }, - ]; + 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 ( -
      -
      {sections.map((section, idx) => ( - toggleSection(section.title.toLowerCase())} - /> +
      +
      toggleSection(section.title.toLowerCase())} className="cursor-pointer p-2 flex items-center justify-between text-white"> + {expanded && {section.title}} + +
      + {openSections[section.title.toLowerCase()] && ( +
        + {section.items.map((item, index) => ( +
      • + + {item.icon} + {expanded && {item.title}} + +
        • + ))} +
      + )} +
      ))} - toggleSection('additional')} - /> -
      - -
      -
      - - -
      - ); -}; - -const LogoutLink = ({ expanded }) => { - const navigate = useNavigate(); - - const handleLogout = () => { - localStorage.removeItem('roleName'); - localStorage.removeItem('authToken'); - navigate('/login'); - }; - - return ( -
        -
      • - -
        • -
      +
    +
    ); }; -const SidebarSection = ({ items, title, expanded, open, toggle }) => ( -
    -
    - {expanded && {title}} - -
    - {open && ( -
      - {items.map((item, index) => ( -
    • - - {item.icon} - {expanded && {item.title}} - -
      • - ))} -
    - )} -
    -); - export default Sidebar; From db42e29ce33a1dd988700d593e5258be59bff777 Mon Sep 17 00:00:00 2001 From: ManziPatrick Date: Fri, 20 Sep 2024 10:59:04 +0200 Subject: [PATCH 09/14] fix minimize dashboard scrollbar --- src/components/sidebar/navslide.css | 30 ++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/src/components/sidebar/navslide.css b/src/components/sidebar/navslide.css index a533e4ad2..dc84f81c5 100644 --- a/src/components/sidebar/navslide.css +++ b/src/components/sidebar/navslide.css @@ -11,7 +11,35 @@ background-color: #888; border-radius: 10px; border: 1px solid #f1f1f1; - } + }/* Hide the scrollbar but keep scrolling */ +.custom-scrollbar { + overflow-y: scroll; /* Keep the scrolling */ +} + +/* For Chrome, Safari, and other Webkit browsers */ +.custom-scrollbar::-webkit-scrollbar { + width: 0px; /* Hide the scrollbar */ +} + +/* For Firefox */ +.custom-scrollbar { + scrollbar-width: none; /* Hide scrollbar for Firefox */ +} + +/* Optional: If you still want to style the scrollbar for Webkit */ +.custom-scrollbar::-webkit-scrollbar-track { + background: #f1f1f1; /* Track color (optional) */ +} + +.custom-scrollbar::-webkit-scrollbar-thumb { + background-color: #888; /* Scroll thumb color (optional) */ + border-radius: 10px; + border: 1px solid #f1f1f1; +} + +.custom-scrollbar::-webkit-scrollbar-thumb:hover { + background-color: #555; /* Thumb color on hover */ +} .custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: #555; From 74721ead5b9d7726ae943ebbccd213e97b3cbf3a Mon Sep 17 00:00:00 2001 From: ManziPatrick Date: Fri, 20 Sep 2024 11:13:58 +0200 Subject: [PATCH 10/14] fix minimize dashboard scrollbar --- src/components/sidebar/navslide.css | 27 ++------------------------- 1 file changed, 2 insertions(+), 25 deletions(-) diff --git a/src/components/sidebar/navslide.css b/src/components/sidebar/navslide.css index dc84f81c5..7e2d13ac3 100644 --- a/src/components/sidebar/navslide.css +++ b/src/components/sidebar/navslide.css @@ -1,17 +1,4 @@ -/* 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; - }/* Hide the scrollbar but keep scrolling */ +/* Hide the scrollbar but keep scrolling */ .custom-scrollbar { overflow-y: scroll; /* Keep the scrolling */ } @@ -39,14 +26,4 @@ .custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: #555; /* Thumb color on hover */ -} - - .custom-scrollbar::-webkit-scrollbar-thumb:hover { - background-color: #555; - } - - .custom-scrollbar { - scrollbar-width: thin; - scrollbar-color: #888 #f1f1f1; - } - \ No newline at end of file +} \ No newline at end of file From 466543bcc9752825af2278fa49db92bd66a43e3d Mon Sep 17 00:00:00 2001 From: ManziPatrick Date: Fri, 20 Sep 2024 13:32:42 +0200 Subject: [PATCH 11/14] fix minimize dashboard scrollbar --- src/components/sidebar/sidebar.tsx | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 88da123a2..3d6b2d2be 100755 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -7,18 +7,16 @@ import "./navslide.css"; const Sidebar = () => { const [expanded, setExpanded] = useState(true); const [openSections, setOpenSections] = useState({ general: true, management: true, applications: true, performance: true, admin: true, additional: true }); + const navigate = useNavigate(); const roleName = localStorage.getItem('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 } + { 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'); }; + const toggleSection = section => setOpenSections(prev => ({ ...prev, [section]: !prev[section] })); + const handleLogout = () => { localStorage.clear(); navigate('/login'); }; return (
    @@ -36,7 +34,7 @@ const Sidebar = () => {
      {section.items.map((item, index) => (
    • - + {item.icon} {expanded && {item.title}} @@ -47,8 +45,7 @@ const Sidebar = () => {
    ))}
From d7eec64d3e89dcb15df6e7f5164170d2a905aa71 Mon Sep 17 00:00:00 2001 From: Prince-Kid Date: Mon, 23 Sep 2024 10:13:13 +0200 Subject: [PATCH 12/14] Fix layout spacing between sidebar and main content in AdminLayout --- src/components/Layout/Admins/AdminLayout.tsx | 24 +++-- src/components/sidebar/sidebar.tsx | 94 ++++++++++++++------ src/pages/Applicant/ApplicantLayout.tsx | 20 +++-- 3 files changed, 96 insertions(+), 42 deletions(-) diff --git a/src/components/Layout/Admins/AdminLayout.tsx b/src/components/Layout/Admins/AdminLayout.tsx index 3ddd78ca8..9e1c9fd35 100644 --- a/src/components/Layout/Admins/AdminLayout.tsx +++ b/src/components/Layout/Admins/AdminLayout.tsx @@ -1,21 +1,29 @@ -import React from "react"; +import React, { useState } from "react"; import AdminHeader from "../../../components/sidebar/navHeader"; import Sidebar from "../../../components/sidebar/sidebar"; import { Outlet } from "react-router"; + const AdminLayout = () => { + const [sidebarExpanded, setSidebarExpanded] = useState(true); + return ( <> -
+
-
-
- +
+
+
-
- -
+
+ +
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 97cecdffe..cbf4dddf8 100755 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -1,40 +1,77 @@ -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 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"; -const Sidebar = () => { - const [expanded, setExpanded] = useState(true); - const navigate = useNavigate() - const [openSections, setOpenSections] = useState({ general: true, management: true, applications: true, performance: true, admin: true, additional: true }); - const roleName = localStorage.getItem('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 Sidebar = ({ expanded, setExpanded }) => { + const navigate = useNavigate(); + const [openSections, setOpenSections] = useState({ + general: true, + management: true, + applications: true, + performance: true, + admin: true, + additional: true, + }); + const roleName = localStorage.getItem("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(); - navigate('/login'); + const toggleSection = (section) => + setOpenSections((prev) => ({ ...prev, [section]: !prev[section] })); + const handleLogout = () => { + localStorage.clear(); + navigate("/login"); }; return ( -
-
{sections.map((section, idx) => (
-
toggleSection(section.title.toLowerCase())} className="cursor-pointer p-2 flex items-center justify-between text-white"> +
toggleSection(section.title.toLowerCase())} + className="cursor-pointer p-2 flex items-center justify-between text-white" + > {expanded && {section.title}} - +
{openSections[section.title.toLowerCase()] && (
    @@ -50,7 +87,10 @@ const Sidebar = () => { )}
))} - diff --git a/src/pages/Applicant/ApplicantLayout.tsx b/src/pages/Applicant/ApplicantLayout.tsx index eaac7c405..48e7ba291 100644 --- a/src/pages/Applicant/ApplicantLayout.tsx +++ b/src/pages/Applicant/ApplicantLayout.tsx @@ -1,8 +1,9 @@ -import React from "react"; +import React, { useState } from "react"; import Applicant from "../../components/sidebar/navHeader"; import Sidebar from "../../components/sidebar/sidebar"; import { Outlet } from "react-router"; const ApplicantLayout = () => { + const [sidebarExpanded, setSidebarExpanded] = useState(true); return ( <>
@@ -10,16 +11,21 @@ const ApplicantLayout = () => {
-
- +
+
-
- -
+
+ +
); }; -export default ApplicantLayout; \ No newline at end of file +export default ApplicantLayout; From 3d319bb80295ec71b96f648672b5316976aa4327 Mon Sep 17 00:00:00 2001 From: ManziPatrick Date: Mon, 23 Sep 2024 11:48:41 +0200 Subject: [PATCH 13/14] new --- src/components/sidebar/sidebarItems.tsx | 42 +++---------------------- 1 file changed, 5 insertions(+), 37 deletions(-) diff --git a/src/components/sidebar/sidebarItems.tsx b/src/components/sidebar/sidebarItems.tsx index daf10fb60..7baf170b1 100755 --- a/src/components/sidebar/sidebarItems.tsx +++ b/src/components/sidebar/sidebarItems.tsx @@ -35,11 +35,7 @@ export const managementSectionItems = [ icon: , title: 'Admins', }, - { - path: '/coordinators', - icon: , - title: 'Coordinators', - }, + ]; export const applicationsSectionItems = [ @@ -53,11 +49,6 @@ export const applicationsSectionItems = [ icon: , title: 'Applications', }, - { - path: '/Trainee-applicants', - icon: , - title: 'Trainees-Applicants', - }, { path: '/programs', icon: , @@ -87,45 +78,22 @@ export const performanceSectionItems = [ icon: , title: 'Attendance', }, - { - path: '/performance', - icon: , - title: 'Performance', - }, + { path: '/grading', icon: , title: 'Grading System', - }, - { - path: '/updatedRatings', - icon: , - title: 'Updated Ratings', - }, + } ]; // Admin Section export const adminSectionItems = [ - { - path: '/rolesandaccess', - icon: , - title: 'Roles & Access', - }, - { - path: '/sessions', - icon: , - title: 'Sessions', - }, + { path: '/Trash', icon: , title: 'Trash', - }, - { - path: '/domains', - icon: , - title: 'Domains', - }, + } ]; // Applicant Sidebar Items From d7d4517cdfd61a578c8f995dcb7005996edbd39f Mon Sep 17 00:00:00 2001 From: Prince-Kid Date: Mon, 23 Sep 2024 12:00:39 +0200 Subject: [PATCH 14/14] Fix layout spacing between sidebar and main content in AdminLayout --- src/components/sidebar/sidebar.tsx | 94 +++++-------- src/components/sidebar/sidebarItems.tsx | 179 ++++++------------------ 2 files changed, 81 insertions(+), 192 deletions(-) diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index cbf4dddf8..7db5d5848 100755 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -1,42 +1,24 @@ -import React, { useState } from "react"; +import React from "react"; import { Icon } from "@iconify/react"; import { Link, useNavigate } from "react-router-dom"; import { - generalSectionItems, - managementSectionItems, - applicationsSectionItems, - performanceSectionItems, - adminSectionItems, + sidebarItems1, + sidebarItems2, + sidebarItems3, applicantSidebarItems, - additionalSidebarItems, } from "./sidebarItems"; import "./navslide.css"; const Sidebar = ({ expanded, setExpanded }) => { const navigate = useNavigate(); - const [openSections, setOpenSections] = useState({ - general: true, - management: true, - applications: true, - performance: true, - admin: true, - additional: true, - }); const roleName = localStorage.getItem("roleName"); - const sections = + + // Select items based on the role + const items = 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 }, - ]; + ? applicantSidebarItems + : [...sidebarItems1, ...sidebarItems2]; - const toggleSection = (section) => - setOpenSections((prev) => ({ ...prev, [section]: !prev[section] })); const handleLogout = () => { localStorage.clear(); navigate("/login"); @@ -58,40 +40,38 @@ const Sidebar = ({ expanded, setExpanded }) => { />
- {sections.map((section, idx) => ( -
-
toggleSection(section.title.toLowerCase())} - className="cursor-pointer p-2 flex items-center justify-between text-white" +
    + {items.map((item, index) => ( +
  • + + {item.icon} + {expanded && {item.title}} + +
    • + ))} +
+ {/* Render sidebarItems3 at the bottom */} +
    + {sidebarItems3.map((item, index) => ( +
  • - {expanded && {section.title}} - -
- {openSections[section.title.toLowerCase()] && ( -
    - {section.items.map((item, index) => ( -
  • - - {item.icon} - {expanded && {item.title}} - -
    • - ))} -
- )} -
- ))} + + {item.icon} + {expanded && {item.title}} + + + ))} +
diff --git a/src/components/sidebar/sidebarItems.tsx b/src/components/sidebar/sidebarItems.tsx index 8acdad478..1d88a3013 100755 --- a/src/components/sidebar/sidebarItems.tsx +++ b/src/components/sidebar/sidebarItems.tsx @@ -1,58 +1,29 @@ -import React from 'react'; -import { Icon } from '@iconify/react'; +/* eslint-disable */ +import React from "react"; +import { Icon } from "@iconify/react"; +import { title } from "process"; -export const generalSectionItems = [ +export const sidebarItems1 = [ { - path: '/admin', + path: "/admin", icon: , - title: 'Dashboard', + title: "Dashboard", }, { - path: 'calendar', - icon: , - title: 'Calendar', - }, - { - path: 'notifications', - icon: , - title: 'Notifications', - }, -]; - -export const managementSectionItems = [ - { - path: 'organizations', + path: "users", icon: , - title: 'Organizations', + title: "Members", }, { - path: 'users', - icon: , - title: 'Members', - }, - { - path: 'programs', + path: "programs", icon: , - title: 'Programs', + title: "Programs", }, { - path: 'job-post', + path: "job-post", icon: , - title: 'View Job Post', - }, - { - path: 'admins', - icon: , - title: 'Admins', + title: "View Job Post", }, - { - path: 'domains', - icon: , - title: 'Domains', - }, -]; - -export const applicationsSectionItems = [ { path: "create-form", icon: , @@ -64,136 +35,74 @@ export const applicationsSectionItems = [ title: "Applications", }, { - path: 'Trainee-applicants', - icon: , - title: 'Trainees-Applicants', - }, - { - path: 'attendance', - icon: , - title: 'Attendance', - }, - { - path: 'performance', - icon: , - title: 'Performance', - }, - { - path: 'sessions', - icon: , - title: 'Sessions', - }, - { - path: 'coordinators', - icon: , - title: 'Coordinators', - }, - { - path: 'cohort', + path: "cohort", icon: , - title: 'Cohorts', + title: "Cohorts", }, { - path: 'cycles', + path: "cycles", icon: , - title: 'Application Cycles', + title: "Application Cycles", }, -]; -// Performance and Grading Section -export const performanceSectionItems = [ { - path: 'updatedRatings', - icon: , - title: 'Updated Ratings', - }, - { - path: 'grading', + path: "grading", icon: , - title: 'Grading System', - } -]; - -// Admin Section -export const adminSectionItems = [ - { - path: 'roles', - icon: , - title: 'Roles & Access', + title: "Grading System", }, { - path: 'notifications', - icon: , - title: 'Notifications', - }, - { - path: 'calendar', - icon: , - title: 'Calendar', - }, - { - path: 'Trash', + path: "Trash", icon: , - title: 'Trash', - } + title: "Trash", + }, ]; -// Applicant Sidebar Items export const applicantSidebarItems = [ { - path: 'myApplications', + path: "myApplications", icon: , - title: 'My Applications', + title: "My Applications", }, { - path: 'interviewScheduler', + path: "interviewScheduler", icon: ( ), - title: 'Schedule Interview', + title: "Schedule Interview", }, { - path: 'notifications', + path: "notifications", icon: , - title: 'Notifications', + title: "Notifications", }, { - path: 'calendar', + path: "calendar", icon: , - title: 'Calendar', + title: "Calendar", }, { - path: 'available-jobs', + path: "available-jobs", icon: , - title: 'Job Post ', + title: "Job Post ", }, ]; - -// Additional Sidebar Items -export const additionalSidebarItems = [ +export const sidebarItems2 = [ { - path: 'documents', - icon: , - title: 'Docs', + path: "/documents", + icon: , + title: "Docs", }, { - path: 'help', - icon: , - title: 'Help', - + path: "/help", + icon: , + title: "Help", }, - { - path: 'settings', - icon: , - title: 'settings', - } ]; -// Settings Sidebar Items -export const settingsSidebarItems = [ +export const sidebarItems3 = [ { - path: 'Logout', - icon: , - title: 'Logout', - } + path: "/settings", + icon: , + title: "Settings", + }, ];