124 lines
3.5 KiB
JavaScript
124 lines
3.5 KiB
JavaScript
"use client";
|
|
import React from "react";
|
|
import styles from "./styles.module.css";
|
|
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
import HomeIcon from "../icons/home";
|
|
import OrganizationIcon from "../icons/organization";
|
|
import ProjectIcon from "../icons/project";
|
|
import UserIcon from "../icons/user";
|
|
import RolesIcon from "../icons/roles";
|
|
import CredentialsIcon from "../icons/credentials";
|
|
import AgentIcon from "../icons/agent";
|
|
import DownloadIcon from "../icons/download";
|
|
import LogoIcon from "../icons/logo";
|
|
|
|
const Sidebar = () => {
|
|
const router = useRouter();
|
|
const navToHome = () => {
|
|
router.push("/home");
|
|
};
|
|
const navToOrganization = () => {
|
|
router.push("/organization");
|
|
};
|
|
const navToProject = () => {
|
|
router.push("/projects");
|
|
};
|
|
const navToUsers = () => {
|
|
router.push("/users");
|
|
};
|
|
const navToRoles = () => {
|
|
router.push("/roles");
|
|
};
|
|
const navToCredentials = () => {
|
|
router.push("/credentials");
|
|
};
|
|
const navToAgents = () => {
|
|
router.push("/agents");
|
|
};
|
|
|
|
const pathname = usePathname();
|
|
console.log(pathname);
|
|
return (
|
|
<div className={styles.mainContainer}>
|
|
<div className={styles.topContainer}>
|
|
{/* Logo Container */}
|
|
<div className={styles.logoContainer}>
|
|
<div>
|
|
<div className={styles.logoIconContainer}>
|
|
<LogoIcon />
|
|
</div>
|
|
<div className={styles.logoDescription}>
|
|
<p>Internal Developer Platform</p>
|
|
<p>By Project Moonshot Inc.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Navigations */}
|
|
<div className={styles.navContainer}>
|
|
<div
|
|
className={`${styles.nav} ${pathname.includes("/home") ? styles.active : ""}`}
|
|
onClick={navToHome}
|
|
>
|
|
<HomeIcon />
|
|
<p>Home</p>
|
|
</div>
|
|
<div
|
|
className={`${styles.nav} ${pathname.includes("/organization") ? styles.active : ""}`}
|
|
onClick={navToOrganization}
|
|
>
|
|
<OrganizationIcon />
|
|
<p>Organization</p>
|
|
</div>
|
|
<div
|
|
onClick={navToProject}
|
|
className={`${styles.nav} ${pathname.includes("/projects") ? styles.active : ""}`}
|
|
>
|
|
<ProjectIcon />
|
|
<p>Project</p>
|
|
</div>
|
|
<div
|
|
onClick={navToUsers}
|
|
className={`${styles.nav} ${pathname.includes("/users") ? styles.active : ""}`}
|
|
>
|
|
<UserIcon />
|
|
<p>Users</p>
|
|
</div>
|
|
<div
|
|
onClick={navToRoles}
|
|
className={`${styles.nav} ${pathname.includes("/roles") ? styles.active : ""}`}
|
|
>
|
|
<RolesIcon />
|
|
<p>Roles</p>
|
|
</div>
|
|
<div
|
|
onClick={navToCredentials}
|
|
className={`${styles.nav} ${pathname.includes("/credentials") ? styles.active : ""}`}
|
|
>
|
|
<CredentialsIcon />
|
|
<p>Credentials</p>
|
|
</div>
|
|
<div
|
|
onClick={navToAgents}
|
|
className={`${styles.nav} ${pathname.includes("/agents") ? styles.active : ""}`}
|
|
>
|
|
<AgentIcon />
|
|
<p>Agents</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Footers */}
|
|
<div className={styles.navFooterContainer}>
|
|
<div>
|
|
<div>
|
|
<p>Download ICTL v3</p>
|
|
<DownloadIcon />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|