Skip to content

Commit 3523c81

Browse files
MnorbertViiMnorbertVii
authored
Merge branch 'develop' into fix/update-trainee-info
2 parents 460a58a + f288976 commit 3523c81

File tree

9 files changed

+191
-129
lines changed

9 files changed

+191
-129
lines changed

‎.codeclimate.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ checks:
2323
method-lines:
2424
enabled: true
2525
config:
26-
threshold: 45
26+
threshold: 90
2727
nested-control-flow:
2828
enabled: true
2929
config:

‎src/components/Layout/Admins/AdminLayout.tsx‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,29 @@
1-
import React from "react";
1+
import React, { useState } from "react";
22
import AdminHeader from "../../../components/sidebar/navHeader";
33
import Sidebar from "../../../components/sidebar/sidebar";
44
import { Outlet } from "react-router";
5+
56
const AdminLayout = () => {
7+
const [sidebarExpanded, setSidebarExpanded] = useState(true);
8+
69
return (
710
<>
8-
<div className="bg-slate-400 h-screen">
9-
<div className="bg-red-300 w-full h-[70px]">
11+
<div className=" h-screen dark:bg-dark-frame-bg">
12+
<div className=" w-full h-[70px]">
1013
<AdminHeader />
1114
</div>
12-
<div className="flex w-full">
13-
<div className="w-[16rem] h-full">
14-
<Sidebar />
15+
<div className="flex w-full">
16+
<div
17+
className={`${sidebarExpanded ? "w-[16rem]" : "w-[4rem]"} h-full`}
18+
>
19+
<Sidebar
20+
expanded={sidebarExpanded}
21+
setExpanded={setSidebarExpanded}
22+
/>
1523
</div>
16-
<main className="flex w-[100%] justify-center items-center flex-1">
17-
<Outlet />
18-
</main>
24+
<main className="flex-1 flex w-full justify-center items-center dark:bg-dark-frame-bg">
25+
<Outlet />
26+
</main>
1927
</div>
2028
</div>
2129
</>

‎src/components/sidebar/navslide.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/* Hide the scrollbar but keep scrolling */
2+
.custom-scrollbar {
3+
overflow-y: scroll; /* Keep the scrolling */
4+
}
5+
6+
/* For Chrome, Safari, and other Webkit browsers */
7+
.custom-scrollbar::-webkit-scrollbar {
8+
width: 0px; /* Hide the scrollbar */
9+
}
10+
11+
/* For Firefox */
12+
.custom-scrollbar {
13+
scrollbar-width: none; /* Hide scrollbar for Firefox */
14+
}
15+
16+
/* Optional: If you still want to style the scrollbar for Webkit */
17+
.custom-scrollbar::-webkit-scrollbar-track {
18+
background: #f1f1f1; /* Track color (optional) */
19+
}
20+
21+
.custom-scrollbar::-webkit-scrollbar-thumb {
22+
background-color: #888; /* Scroll thumb color (optional) */
23+
border-radius: 10px;
24+
border: 1px solid #f1f1f1;
25+
}
26+
27+
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
28+
background-color: #555; /* Thumb color on hover */
29+
}

‎src/components/sidebar/sidebar.tsx‎

Lines changed: 75 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
1-
import React from 'react';
2-
import { Icon } from '@iconify/react';
3-
4-
import { NavLink, Navigate } from 'react-router-dom';
1+
import React from "react";
2+
import { Icon } from "@iconify/react";
3+
import { Link, useNavigate } from "react-router-dom";
54
import {
6-
sidebarItems2,
75
sidebarItems1,
6+
sidebarItems2,
87
sidebarItems3,
98
applicantSidebarItems,
10-
} from './sidebarItems';
11-
import { BrowserRouter } from 'react-router-dom';
12-
import { BrowserRouter as Router, Link } from 'react-router-dom';
13-
import LogoutPage from '../../pages/LogoutPage';
14-
import { Token } from '../../utils/utils';
9+
} from "./sidebarItems";
10+
import "./navslide.css";
11+
12+
const Sidebar = ({ expanded, setExpanded }) => {
13+
const navigate = useNavigate();
14+
const roleName = localStorage.getItem("roleName");
1515

16-
const sidebar = () => {
17-
const roleName = localStorage.getItem('roleName');
1816

1917
return (
2018
<>
@@ -67,47 +65,71 @@ const sidebar = () => {
6765
</div>
6866
)}
6967

70-
<div className="mb-3">
71-
<ul className="pl-4 block mt-2 md:mt-0">
72-
{sidebarItems2.map((items, index) => {
73-
return (
74-
<li
75-
key={index}
76-
className=" align-items-center dark:text-white text-[#173B3F] text-base"
77-
>
78-
<Link
79-
to={items.path}
80-
className="p-1 flex align-items-center leading-3 cursor-pointer font-semibold hover:font-bold"
81-
>
82-
<label className="mr-3 p-1">{items.icon}</label>
83-
<label className="p-1">{items.title} </label>
84-
</Link>
85-
</li>
86-
);
87-
})}
88-
</ul>
89-
</div>
90-
<div className="inset-x-0 bottom-2 mt-20">
91-
<ul className="px-20 flex justify-content-center">
92-
{sidebarItems3.map((items, index) => {
93-
return (
94-
<li
95-
key={index}
96-
className=" justify-content-center mb-1 align-items-center dark:text-white text-[#173B3F] text-lg ml-2"
97-
>
98-
<Link
99-
to={items.path}
100-
className="p-1 flex align-items-center leading-5 cursor-pointer"
101-
>
102-
<label className="mr-3 p-1">{items.icon}</label>
103-
</Link>
104-
</li>
105-
);
106-
})}
107-
</ul>
108-
</div>
68+
// Select items based on the role
69+
const items =
70+
roleName === "applicant"
71+
? applicantSidebarItems
72+
: [...sidebarItems1, ...sidebarItems2];
73+
74+
75+
const handleLogout = () => {
76+
localStorage.clear();
77+
navigate("/login");
78+
};
79+
80+
return (
81+
<div
82+
className={` ${
83+
expanded ? "w-[16rem]" : "w-[4rem]"
84+
} fixed dark:bg-dark-bg bg-white border-r transition-width duration-300 h-full`}
85+
>
86+
<button
87+
onClick={() => setExpanded(!expanded)}
88+
className="p-1.5 rounded-lg bg-gray-50 absolute top-2 right-2 z-20"
89+
>
90+
<Icon
91+
icon={expanded ? "material-symbols:menu-open" : "mdi:menu-close"}
92+
color="#000"
93+
/>
94+
</button>
95+
<div className="pt-12 pb-12 mb-20">
96+
<ul className="pl-4">
97+
{items.map((item, index) => (
98+
<li
99+
key={index}
100+
className="flex items-center text-white hover:text-[#56c770]"
101+
>
102+
<Link to={item.path} className="p-1 flex items-center">
103+
<span className="mr-3">{item.icon}</span>
104+
{expanded && <span>{item.title}</span>}
105+
</Link>
106+
</li>
107+
))}
108+
</ul>
109+
{/* Render sidebarItems3 at the bottom */}
110+
<ul className="px-4 mt-4">
111+
{sidebarItems3.map((item, index) => (
112+
<li
113+
key={index}
114+
className="flex items-center text-white hover:text-[#56c770]"
115+
>
116+
<Link to={item.path} className="p-1 flex items-center">
117+
<span className="mr-3">{item.icon}</span>
118+
{expanded && <span>{item.title}</span>}
119+
</Link>
120+
</li>
121+
))}
122+
</ul>
123+
<button
124+
onClick={handleLogout}
125+
className="flex items-center p-1 font-semibold hover:font-bold text-white focus:outline-none hover:text-[#56c770] mt-4 ml-4 mt-3"
126+
>
127+
<Icon icon="hugeicons:logout-circle-02" className="mr-3" />
128+
{expanded && <span>Logout</span>}
129+
</button>
109130
</div>
110-
</>
131+
</div>
111132
);
112133
};
113-
export default sidebar;
134+
135+
export default Sidebar;

‎src/components/sidebar/sidebarItems.tsx‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
11
/* eslint-disable */
2-
import React from 'react';
3-
import { Icon } from '@iconify/react';
2+
import React from "react";
3+
import { Icon } from "@iconify/react";
4+
import { title } from "process";
45

56
export const sidebarItems1 = [
67
{
7-
path: '/admin',
8+
path: "/admin",
89
icon: <Icon icon="fontisto:pie-chart-1"></Icon>,
9-
title: 'Dashboard',
10+
title: "Dashboard",
1011
},
1112
{
12-
path: 'users',
13+
path: "users",
1314
icon: <Icon icon="fluent:people-team-20-filled"></Icon>,
14-
title: 'Members',
15+
title: "Members",
1516
},
1617
{
17-
path: 'programs',
18+
path: "programs",
1819
icon: <Icon icon="ic:round-maps-home-work"></Icon>,
19-
title: 'Programs',
20+
title: "Programs",
2021
},
2122
{
22-
path: 'job-post',
23+
path: "job-post",
2324
icon: <Icon icon="ic:round-maps-home-work"></Icon>,
24-
title: 'View Job Post',
25+
title: "View Job Post",
2526
},
2627
{
2728
path: "create-form",
@@ -34,82 +35,81 @@ export const sidebarItems1 = [
3435
title: "Applications",
3536
},
3637
{
37-
path: 'cohort',
38+
path: "cohort",
3839
icon: <Icon icon="fa6-solid:graduation-cap"></Icon>,
39-
title: 'Cohorts',
40+
title: "Cohorts",
4041
},
4142
{
42-
path: 'cycles',
43+
path: "cycles",
4344
icon: <Icon icon="game-icons:cycle"></Icon>,
44-
title: 'Application Cycles',
45+
title: "Application Cycles",
4546
},
47+
4648
{
4749
path: 'Trainee-applicants',
4850
icon: <Icon icon="ic:round-people"></Icon>,
4951
title: 'Trainees/Applicants',
5052
},
5153

54+
5255
{
53-
path: 'grading',
56+
path: "grading",
5457
icon: <Icon icon="bxs:dashboard"></Icon>,
55-
title: 'Grading System',
58+
title: "Grading System",
5659
},
5760
{
58-
path: 'Trash',
61+
path: "Trash",
5962
icon: <Icon icon="fa-solid:trash"></Icon>,
60-
title: 'Trash',
63+
title: "Trash",
6164
},
6265
];
6366

6467
export const applicantSidebarItems = [
6568
{
66-
path: 'myApplications',
69+
path: "myApplications",
6770
icon: <Icon icon="material-symbols:wysiwyg-rounded"></Icon>,
68-
title: 'My Applications',
71+
title: "My Applications",
6972
},
7073
{
71-
path: 'interviewScheduler',
74+
path: "interviewScheduler",
7275
icon: (
7376
<Icon icon="material-symbols:interpreter-mode-outline-rounded"></Icon>
7477
),
75-
title: 'Schedule Interview',
78+
title: "Schedule Interview",
7679
},
7780
{
78-
path: 'notifications',
81+
path: "notifications",
7982
icon: <Icon icon="heroicons-solid:inbox-in"></Icon>,
80-
title: 'Notifications',
83+
title: "Notifications",
8184
},
8285
{
83-
path: 'calendar',
86+
path: "calendar",
8487
icon: <Icon icon="ant-design:calendar-filled"></Icon>,
85-
title: 'Calendar',
88+
title: "Calendar",
8689
},
8790
{
88-
path: 'available-jobs',
91+
path: "available-jobs",
8992
icon: <Icon icon="ant-design:calendar-filled"></Icon>,
90-
title: 'Job Post ',
93+
title: "Job Post ",
9194
},
9295
];
9396
export const sidebarItems2 = [
9497
{
95-
path: '/documents',
98+
path: "/documents",
9699
icon: <Icon icon="heroicons:document-20-solid"></Icon>,
97-
title: 'Docs',
100+
title: "Docs",
98101
},
99102
{
100-
path: '/help',
103+
path: "/help",
101104
icon: <Icon icon="nimbus:globe"></Icon>,
102-
title: 'Help',
105+
title: "Help",
103106
},
104107
];
105108

106109
export const sidebarItems3 = [
107110
{
108-
path: '/settings',
109-
icon: <Icon icon="akar-icons:settings-vertical"></Icon>,
110-
},
111-
{
112-
path: '/settings',
111+
path: "/settings",
113112
icon: <Icon icon="eva:settings-2-outline"></Icon>,
113+
title: "Settings",
114114
},
115115
];

0 commit comments

Comments
 (0)