47 lines
2.2 KiB
TypeScript
47 lines
2.2 KiB
TypeScript
"use client"
|
|
import Image from "next/image";
|
|
import { icons } from "#/assets/icons"
|
|
import NavItem from "./navItem";
|
|
import { usePathname } from "next/navigation";
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
|
|
|
|
export default function Sidebar() {
|
|
|
|
const pathname = usePathname();
|
|
|
|
const [mobileVisible, setmobileVisible] = useState(false)
|
|
|
|
const handleMobileVisible = ()=> {
|
|
setmobileVisible(!mobileVisible)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className={` ${ mobileVisible? "mobile-flex" : "mobile-none" } sidebar-holder position-relative `}>
|
|
<div className="sidebar r-m-0 d-flex flex-column ">
|
|
<div className="logo r-flex-center px-[19px] ">
|
|
<Image src={icons.logo} alt="Logo" className="scale-95" />
|
|
</div>
|
|
<div className="nav-menu r-column-center h-max pt-[160px] r-gap-40 ">
|
|
<NavItem link="/admin/home" iconSrc={icons.homeIcon} label="Home" isNavHome={true} isActive={(pathname === "/admin/") || (pathname === "/admin/home")} />
|
|
<NavItem link="/admin/organizations" iconSrc={icons.companiesIcon} label="Organizations" isActive={pathname.startsWith("/admin/organizations")} classname="disabled" />
|
|
<NavItem link="/admin/admins" iconSrc={icons.userGroup} label="Admins" isActive={pathname.startsWith("/admin/admins")} classname="disabled" />
|
|
</div>
|
|
<div className="logout position-absolute bottom-[40px] left-[28px]">
|
|
<Link href="/login" className="cursor-pointer">
|
|
<Image src={icons.logout} alt="Logout" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div onClick={() => handleMobileVisible()} className={`${mobileVisible ? "shifted" : ""} hamburger mobile`}>
|
|
{/* <Image src={icons.logo} alt="Logo" className="scale-95" /> */}
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-list hamburger-icon" viewBox="0 0 16 16">
|
|
<path fillRule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
|
|
</svg>
|
|
</div>
|
|
</>
|
|
)
|
|
} |