Frontend-Internal-Developer-Platform/frontend/src/app/components/sidebar/Sidebar.jsx

"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";

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}>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="37"
                height="36"
                viewBox="0 0 37 36"
                fill="none"
              >
                <path
                  d="M15.465 11.0234C13.7773 12.2949 12.0608 13.7836 10.3874 15.457C2.90925 22.9352 -0.879626 31.2707 1.92467 34.0751C4.72895 36.8792 13.0645 33.0904 20.5426 25.6123C22.2161 23.9388 23.7048 22.2224 24.9762 20.5347"
                  stroke="#969AF9"
                  strokeWidth={2}
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  style={{ strokeOpacity: 1 }}
                  fill="none"
                />
                <path
                  d="M24.9762 20.5353C29.3864 26.3895 31.1822 31.8988 29.0053 34.0757C26.201 36.88 17.8655 33.091 10.3874 25.6129C2.90925 18.1348 -0.879626 9.79927 1.92467 6.99498C4.10141 4.81824 9.61081 6.61397 15.465 11.0241"
                  stroke="#969AF9"
                  strokeWidth={2}
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  style={{ strokeOpacity: 1 }}
                  fill="none"
                />
                <path
                  d="M14.1504 20.5347C14.1504 21.261 14.7391 21.8497 15.4654 21.8497C16.1916 21.8497 16.7804 21.261 16.7804 20.5347C16.7804 19.8085 16.1916 19.2197 15.4654 19.2197C14.7391 19.2197 14.1504 19.8085 14.1504 20.5347Z"
                  stroke="#969AF9"
                  strokeWidth={2}
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  style={{ strokeOpacity: 1 }}
                  fill="none"
                />
                <path
                  d="M20.7505 9.08429C19.9243 8.94056 19.9243 7.75456 20.7505 7.61083C23.7436 7.09012 26.124 4.81039 26.7737 1.84263L26.8236 1.61514C27.0022 0.798617 28.1649 0.793535 28.3509 1.60847L28.4114 1.87358C29.0849 4.82732 31.4661 7.0878 34.4509 7.60707C35.2814 7.75154 35.2814 8.94358 34.4509 9.08805C31.4661 9.60732 29.0849 11.8678 28.4114 14.8216L28.3509 15.0867C28.1649 15.9016 27.0022 15.8965 26.8236 15.08L26.7737 14.8525C26.124 11.8848 23.7436 9.605 20.7505 9.08429Z"
                  stroke="#969AF9"
                  strokeWidth={2}
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  style={{ strokeOpacity: 1 }}
                  fill="none"
                />
              </svg>
            </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;