38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
"use client"
|
|
import Image from "next/image";
|
|
import { icons } from "#/assets/icons"
|
|
import NavItem from "./navItem";
|
|
import { useState } from "react";
|
|
|
|
|
|
export default function Sidebar() {
|
|
|
|
const [activeItem, setActiveItem] = useState("home")
|
|
|
|
const handleNavMenu = (item:string) => {
|
|
setActiveItem(item)
|
|
console.log("active: ", item);
|
|
|
|
}
|
|
|
|
|
|
return (
|
|
<>
|
|
<div className="sidebar r-m-0 d-flex flex-column pt-[25px] max-w-[90px] h-[100vh] relative ">
|
|
<div className="logo r-flex-center px-[20px] ">
|
|
<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="#" iconSrc={icons.homeIcon} label="Home" isNavHome={true} isActive={activeItem === "home"} onClick={() => handleNavMenu("home") } />
|
|
<NavItem link="#" iconSrc={icons.companiesIcon} label="Organizations" isActive={activeItem === "organizations"} onClick={() => handleNavMenu("organizations") } />
|
|
<NavItem link="#" iconSrc={icons.userGroup} label="Admins" isActive={activeItem === "admins"} onClick={() => handleNavMenu("admins") } />
|
|
</div>
|
|
<div className="logout absolute bottom-[40px] left-[28px]">
|
|
<button type="button" className="cursor-pointer">
|
|
<Image src={icons.logout} alt="Logout" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
} |