Skip to content

Commit

Permalink
minimize sidebar menu overLoad
Browse files Browse the repository at this point in the history
  • Loading branch information
@nkurunziza1
nkurunziza1 committed Oct 13, 2023
1 parent de56e75 commit 7898b04
Show file tree
Hide file tree
Showing 4 changed files with 306 additions and 128 deletions.
232 changes: 175 additions & 57 deletions src/components/sidebar/sidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,196 @@
import React from "react";
import React, { useEffect, useState } from "react";
import { Icon } from "@iconify/react";

import { NavLink } from "react-router-dom";
import { sidebarItems2, sidebarItems1, sidebarItems3 } from "./sidebarItems";
import { sidebarItems2, entity, sidebarItems3 } from "./sidebarItems";
import { BrowserRouter } from "react-router-dom";
import { BrowserRouter as Router, Link } from "react-router-dom";
import { BrowserRouter as Router, NavLink } from "react-router-dom";
import LogoutPage from "../../pages/LogoutPage";
import { Token } from "../../utils/utils";
import { useLocation } from "react-router-dom";

const sidebar = () => {
type Sidebar = {
title: string;
path: string;
icon: JSX.Element;
scope: {
path: string;
icon: JSX.Element;
title: string;
}[];
};

const Sidebar = () => {
const initialSidebar: Sidebar = {
title: "",
path: "",
icon: <Icon icon="default-icon"></Icon>,
scope: [],
};
const [currentSideBar, setCurrentSidebar] = useState<Sidebar>(initialSidebar);
const [homeItems, setHomeItems] = useState<Sidebar[]>([]);
const access_token = Token();
const authenticated =
access_token !== null && access_token !== undefined && access_token !== "";
const location = useLocation();
const pathname = location.pathname;

useEffect(() => {
let foundMenu: any;
let filteredSideMenu = entity.find((item) => pathname === item.path);

if (!filteredSideMenu) {
for (const item of entity) {
const foundScope = item.scope?.find(
(scopeItem) => pathname === scopeItem.path
);
if (foundScope) {
foundMenu = item;
filteredSideMenu = item;
break;
}
}
}
if (pathname === "/") {
//@ts-ignore
setHomeItems(entity);
}
if (filteredSideMenu) {
//@ts-ignore
setCurrentSidebar(filteredSideMenu);
}
}, [pathname]);

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] ">
{authenticated ? (
<div className="mb-2 border-b border-[#000]">
<ul className=" min:mt-0 pl-4 block mt-2">
{sidebarItems1.map((items, index) => {
return (

{pathname === "/" && homeItems.length > 0 ? (
<ul className=" min:mt-0 pl-4 block mt-2">
{homeItems.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"
className=" min:text-xl cursor-pointer text-base "
>
<Link
<NavLink
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 "
className={`text-[#173B3F] {} p-1 flex align-items-center leading-3 dark:text-white hover:bg-[#173B3F] hover:text-white dark:hover-bg-slate-700 cursor-pointer font-semibold hover:font-bold ${
items.title === "User"
? "bg-[#2b3846] text-white hover:bg-[#2b3846] "
: ""
}`}
>
<label className="mr-3 p-1">{items.icon}</label>
<label className="p-1 ">{items.title} </label>
</Link>
<label className="mr-3 p-1 cursor-pointer">
{items.icon}
</label>
<label className="p-1 cursor-pointer">
{items.title}{" "}
</label>
</NavLink>
</li>

);
})}
<li className=" min:text-xl lg:justify-content-start align-items-center dark:text-white text-[#173B3F] text-base">
<LogoutPage />
</li>
</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 className=" min:text-xl hover:bg-[#e9b6b6] hover:text-white lg:justify-content-start align-items-center dark:text-white text-[#173B3F] text-base">
<LogoutPage />
</li>
</ul>
) : (
<div>
<ul className="min:mt-0 pl-4 block mt-2">
{currentSideBar && (
<li
key={index}
className=" min:text-xl lg:justify-content-start align-items-center dark:text-white text-[#173B3F] text-base"
className="min:text-xl lg:justify-content-start align-items-center dark:text-white text-[#173B3F] text-base"
key={currentSideBar.title}
>
<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 "
<NavLink
style={
currentSideBar.path === pathname
? {
backgroundColor: "#2b3846",
color: "white",
}
: {}
}
to={currentSideBar.path}
className=" p-1 flex align-items-center dark:text-white hover:bg-[#173B3F] hover:text-white dark:hover:bg-slate-700 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>
<label className="mr-3 p-1 cursor-pointer">
{currentSideBar.icon}
</label>
<label className="p-1 cursor-pointer">
{currentSideBar.title}{" "}
</label>
</NavLink>
<div className="mb-3">
{currentSideBar.scope &&
currentSideBar.scope.length > 0 && (
<ul className="pl-4 block mt-2 md:mt-0">
{currentSideBar.scope.map((scopeItem) => (
<li
key={scopeItem.path}
className="align-items-center dark:text-white text-[#173B3F] text-base"
>
<NavLink
style={
scopeItem.path === pathname
? {
backgroundColor: "#2b3846",
color: "white",
}
: {}
}
to={scopeItem.path}
className="p-1 flex align-items-center mt-2 dark:text-white hover:bg-[#173B3F] hover:text-white dark:hover:bg-slate-700 leading-3 cursor-pointer font-semibold hover:font-bold"
>
<label className="mr-3 p-1 cursor-pointer">
{scopeItem.icon}
</label>
<label className="p-1 cursor-pointer">
{scopeItem.title}{" "}
</label>
</NavLink>
</li>
))}
</ul>
)}
</div>
</li>

);
})}
)}
<li className="min:text-xl hover:bg-[#e9b6b6] hover:text-white lg:justify-content-start align-items-center dark:text-white text-[#173B3F] text-base">
<LogoutPage />
</li>
</ul>
</div>
)}
</div>
) : (
<div className="inset-x-0 bottom-2 mt-20">
<ul className="px-20 flex justify-content-center">
{entity.map((items, index) => (
<li
key={index}
className="justify-content-center mb-1 align-items-center hover:bg-[#173B3F] hover:text-white dark:hover:bg-slate-700 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>
)}

<div className="mb-3">
<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"
className=" align-items-center hover:bg-[#173B3F] hover:text-white dark:hover:bg-slate-700 dark:text-white text-[#173B3F] text-base"
>
<a
href={items.path}
Expand All @@ -86,27 +204,27 @@ const sidebar = () => {
})}
</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"
{sidebarItems3.map((items, index) => (
<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"
>
<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>
);
})}
<label className="mr-3 p-1">{items.icon}</label>
</a>
</li>
))}
</ul>
</div>
</div>
</>
);
};
export default sidebar;

export default Sidebar;
Loading

0 comments on commit 7898b04

Please sign in to comment.