Skip to content

Commit f288976

Browse files
ManziPatrickceelogrePrince-KidAime-Patrick
authored
Ft minimize dashboard menu #110 (#140)
* fix: remove placeholder property * ft minimize dashboard menu * fix minimize dashboard by icon and categorize into section * fix minimize dashboard by icon and categorize into section * fix minimize dashboard by icon and categorize into section * fix minimize dashboard by icon and categorize into section * fix minimize dashboard by icon and categorize into section * fix minimize dashboard by icon and categorize into section * fix minimize dashboard scrollbar * fix minimize dashboard scrollbar * fix minimize dashboard scrollbar * Fix layout spacing between sidebar and main content in AdminLayout * new * Fix layout spacing between sidebar and main content in AdminLayout * fix layout --------- Co-authored-by: ceelogre <[email protected]> Co-authored-by: Prince-Kid <[email protected]> Co-authored-by: Mucyo Prince <[email protected]> Co-authored-by: Aime-Patrick <[email protected]>
1 parent 9c3925e commit f288976

File tree

9 files changed

+187
-183
lines changed

9 files changed

+187
-183
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: 72 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,82 @@
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";
1511

16-
const sidebar = () => {
17-
const roleName = localStorage.getItem('roleName');
12+
const Sidebar = ({ expanded, setExpanded }) => {
13+
const navigate = useNavigate();
14+
const roleName = localStorage.getItem("roleName");
1815

19-
return (
20-
<>
21-
<div className="overflow-y-scroll w-[16rem] grow fixed dark:bg-dark-bg bg-white font-sans border-r border-[#979797] h-full">
22-
{roleName === 'applicant' ? (
23-
<div className="mb-2 border-b border-[#000] h-[70%]">
24-
<ul className=" min:mt-0 pl-4 block mt-2">
25-
{applicantSidebarItems.map((items, index) => {
26-
return (
27-
<li
28-
key={index}
29-
className=" min:text-xl lg:justify-content-start align-items-center dark:text-white text-[#173B3F] text-base"
30-
>
31-
<NavLink
32-
to={items.path}
33-
replace
34-
className="is-active focus:text-green-600 p-1 flex align-items-center leading-3 cursor-pointer font-semibold hover:font-bold "
35-
>
36-
<label className="mr-3 p-1">{items.icon}</label>
37-
<label className="p-1 ">{items.title} </label>
38-
</NavLink>
39-
</li>
40-
);
41-
})}
42-
{/* <li className=" min:text-xl lg:justify-content-start align-items-center dark:text-white text-[#173B3F] text-base">
43-
<LogoutPage />
44-
</li> */}
45-
</ul>
46-
</div>
47-
) : (
48-
<div className="mb-2 border-b border-[#000] ">
49-
<ul className=" min:mt-0 pl-4 block mt-2">
50-
{sidebarItems1.map((items, index) => {
51-
return (
52-
<li
53-
key={index}
54-
className=" min:text-xl lg:justify-content-start align-items-center dark:text-white text-[#173B3F] text-base"
55-
>
56-
<Link
57-
to={items.path}
58-
className="is-active focus:text-green-600 p-1 flex align-items-center leading-3 cursor-pointer font-semibold hover:font-bold "
59-
>
60-
<label className="mr-3 p-1">{items.icon}</label>
61-
<label className="p-1 ">{items.title} </label>
62-
</Link>
63-
</li>
64-
);
65-
})}
66-
</ul>
67-
</div>
68-
)}
16+
// Select items based on the role
17+
const items =
18+
roleName === "applicant"
19+
? applicantSidebarItems
20+
: [...sidebarItems1, ...sidebarItems2];
6921

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>
22+
const handleLogout = () => {
23+
localStorage.clear();
24+
navigate("/login");
25+
};
26+
27+
return (
28+
<div
29+
className={` ${
30+
expanded ? "w-[16rem]" : "w-[4rem]"
31+
} fixed dark:bg-dark-bg bg-white border-r transition-width duration-300 h-full`}
32+
>
33+
<button
34+
onClick={() => setExpanded(!expanded)}
35+
className="p-1.5 rounded-lg bg-gray-50 absolute top-2 right-2 z-20"
36+
>
37+
<Icon
38+
icon={expanded ? "material-symbols:menu-open" : "mdi:menu-close"}
39+
color="#000"
40+
/>
41+
</button>
42+
<div className="pt-12 pb-12 mb-20">
43+
<ul className="pl-4">
44+
{items.map((item, index) => (
45+
<li
46+
key={index}
47+
className="flex items-center text-white hover:text-[#56c770]"
48+
>
49+
<Link to={item.path} className="p-1 flex items-center">
50+
<span className="mr-3">{item.icon}</span>
51+
{expanded && <span>{item.title}</span>}
52+
</Link>
53+
</li>
54+
))}
55+
</ul>
56+
{/* Render sidebarItems3 at the bottom */}
57+
<ul className="px-4 mt-4">
58+
{sidebarItems3.map((item, index) => (
59+
<li
60+
key={index}
61+
className="flex items-center text-white hover:text-[#56c770]"
62+
>
63+
<Link to={item.path} className="p-1 flex items-center">
64+
<span className="mr-3">{item.icon}</span>
65+
{expanded && <span>{item.title}</span>}
66+
</Link>
67+
</li>
68+
))}
69+
</ul>
70+
<button
71+
onClick={handleLogout}
72+
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"
73+
>
74+
<Icon icon="hugeicons:logout-circle-02" className="mr-3" />
75+
{expanded && <span>Logout</span>}
76+
</button>
10977
</div>
110-
</>
78+
</div>
11179
);
11280
};
113-
export default sidebar;
81+
82+
export default Sidebar;

0 commit comments

Comments
 (0)