Skip to content

Commit d7eec64

Browse files
Prince-KidPrince-Kid
committed
Fix layout spacing between sidebar and main content in AdminLayout
1 parent f72e59c commit d7eec64

File tree

3 files changed

+96
-42
lines changed

3 files changed

+96
-42
lines changed

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

Lines changed: 16 additions & 8 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">
11+
<div className="bg-slate-400 h-screen flex flex-col">
912
<div className="bg-red-300 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 flex-1">
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 justify-center items-center">
25+
<Outlet />
26+
</main>
1927
</div>
2028
</div>
2129
</>

‎src/components/sidebar/sidebar.tsx‎

Lines changed: 67 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,77 @@
1-
import React, { useState } from 'react';
2-
import { Icon } from '@iconify/react';
3-
import { Link, useNavigate } from 'react-router-dom';
4-
import { generalSectionItems, managementSectionItems, applicationsSectionItems, performanceSectionItems, adminSectionItems, applicantSidebarItems, additionalSidebarItems } from './sidebarItems';
1+
import React, { useState } from "react";
2+
import { Icon } from "@iconify/react";
3+
import { Link, useNavigate } from "react-router-dom";
4+
import {
5+
generalSectionItems,
6+
managementSectionItems,
7+
applicationsSectionItems,
8+
performanceSectionItems,
9+
adminSectionItems,
10+
applicantSidebarItems,
11+
additionalSidebarItems,
12+
} from "./sidebarItems";
513
import "./navslide.css";
614

7-
const Sidebar = () => {
8-
const [expanded, setExpanded] = useState(true);
9-
const navigate = useNavigate()
10-
const [openSections, setOpenSections] = useState({ general: true, management: true, applications: true, performance: true, admin: true, additional: true });
11-
const roleName = localStorage.getItem('roleName');
12-
const sections = roleName === 'applicant' ? [{ title: 'Applicant Section', items: applicantSidebarItems }] : [
13-
{ title: 'General', items: generalSectionItems },
14-
{ title: 'Management', items: managementSectionItems },
15-
{ title: 'Applications', items: applicationsSectionItems },
16-
{ title: 'Performance', items: performanceSectionItems },
17-
{ title: 'Admin', items: adminSectionItems },
18-
{ title: 'Additional', items: additionalSidebarItems }
19-
];
15+
const Sidebar = ({ expanded, setExpanded }) => {
16+
const navigate = useNavigate();
17+
const [openSections, setOpenSections] = useState({
18+
general: true,
19+
management: true,
20+
applications: true,
21+
performance: true,
22+
admin: true,
23+
additional: true,
24+
});
25+
const roleName = localStorage.getItem("roleName");
26+
const sections =
27+
roleName === "applicant"
28+
? [{ title: "Applicant Section", items: applicantSidebarItems }]
29+
: [
30+
{ title: "General", items: generalSectionItems },
31+
{ title: "Management", items: managementSectionItems },
32+
{ title: "Applications", items: applicationsSectionItems },
33+
{ title: "Performance", items: performanceSectionItems },
34+
{ title: "Admin", items: adminSectionItems },
35+
{ title: "Additional", items: additionalSidebarItems },
36+
];
2037

21-
const toggleSection = (section) => setOpenSections(prev => ({ ...prev, [section]: !prev[section] }));
22-
const handleLogout = () => {
23-
localStorage.clear();
24-
navigate('/login');
38+
const toggleSection = (section) =>
39+
setOpenSections((prev) => ({ ...prev, [section]: !prev[section] }));
40+
const handleLogout = () => {
41+
localStorage.clear();
42+
navigate("/login");
2543
};
2644

2745
return (
28-
<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`}>
29-
<button onClick={() => setExpanded(!expanded)} className="p-1.5 rounded-lg bg-gray-50 absolute top-2 right-2 z-20">
30-
<Icon icon={expanded ? 'material-symbols:menu-open' : 'mdi:menu-close'} color="#000" />
46+
<div
47+
className={`top-0 mt-[70px] ${
48+
expanded ? "w-[16rem]" : "w-[4rem]"
49+
} fixed z-10 dark:bg-dark-bg bg-white border-r transition-width duration-300 h-screen overflow-y-auto custom-scrollbar`}
50+
>
51+
<button
52+
onClick={() => setExpanded(!expanded)}
53+
className="p-1.5 rounded-lg bg-gray-50 absolute top-2 right-2 z-20"
54+
>
55+
<Icon
56+
icon={expanded ? "material-symbols:menu-open" : "mdi:menu-close"}
57+
color="#000"
58+
/>
3159
</button>
3260
<div className="pt-12 pb-12 mb-20">
3361
{sections.map((section, idx) => (
3462
<div key={idx}>
35-
<div onClick={() => toggleSection(section.title.toLowerCase())} className="cursor-pointer p-2 flex items-center justify-between text-white">
63+
<div
64+
onClick={() => toggleSection(section.title.toLowerCase())}
65+
className="cursor-pointer p-2 flex items-center justify-between text-white"
66+
>
3667
{expanded && <span className="font-bold">{section.title}</span>}
37-
<Icon icon={openSections[section.title.toLowerCase()] ? 'akar-icons:chevron-down' : 'akar-icons:chevron-right'} />
68+
<Icon
69+
icon={
70+
openSections[section.title.toLowerCase()]
71+
? "akar-icons:chevron-down"
72+
: "akar-icons:chevron-right"
73+
}
74+
/>
3875
</div>
3976
{openSections[section.title.toLowerCase()] && (
4077
<ul className="pl-4 mt-2">
@@ -50,7 +87,10 @@ const Sidebar = () => {
5087
)}
5188
</div>
5289
))}
53-
<button onClick={handleLogout} className="flex items-center p-1 font-semibold hover:font-bold text-white focus:outline-none">
90+
<button
91+
onClick={handleLogout}
92+
className="flex items-center p-1 font-semibold hover:font-bold text-white focus:outline-none"
93+
>
5494
<Icon icon="nimbus:arrow-left" className="mr-3" />
5595
{expanded && <span>Logout</span>}
5696
</button>

‎src/pages/Applicant/ApplicantLayout.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
1-
import React from "react";
1+
import React, { useState } from "react";
22
import Applicant from "../../components/sidebar/navHeader";
33
import Sidebar from "../../components/sidebar/sidebar";
44
import { Outlet } from "react-router";
55
const ApplicantLayout = () => {
6+
const [sidebarExpanded, setSidebarExpanded] = useState(true);
67
return (
78
<>
89
<div className="bg-slate-400 h-screen">
910
<div className="bg-red-300 w-full h-[70px]">
1011
<Applicant />
1112
</div>
1213
<div className="flex w-full">
13-
<div className="w-[16rem] h-full">
14-
<Sidebar />
14+
<div
15+
className={`${sidebarExpanded ? "w-[16rem]" : "w-[4rem]"} h-full`}
16+
>
17+
<Sidebar
18+
expanded={sidebarExpanded}
19+
setExpanded={setSidebarExpanded}
20+
/>
1521
</div>
16-
<main className="flex w-[100%] justify-center items-center flex-1">
17-
<Outlet />
18-
</main>
22+
<main className="flex w-[100%] justify-center items-center flex-1">
23+
<Outlet />
24+
</main>
1925
</div>
2026
</div>
2127
</>
2228
);
2329
};
2430

25-
export default ApplicantLayout;
31+
export default ApplicantLayout;

0 commit comments

Comments
 (0)