111 lines
3.5 KiB
JavaScript
111 lines
3.5 KiB
JavaScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import styles from "./styles.module.css";
|
|
import NavLeft from "./navleft/Header";
|
|
import NavRight from "./navright/Profile";
|
|
import HamburgerIcon from "../../components/icons/hamburger";
|
|
import useIsMobile from "@/app/hooks/useIsMobile";
|
|
import LogoIcon from "../icons/logo";
|
|
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 useNavigations from "@/app/hooks/useNagivation";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
const Navbar = () => {
|
|
const [triggerDropDown, setTriggerDropDown] = useState(false);
|
|
const {
|
|
navToAgents,
|
|
navToCredentials,
|
|
navToProject,
|
|
navToRoles,
|
|
navToHome,
|
|
navToOrganization,
|
|
navToUsers,
|
|
} = useNavigations(setTriggerDropDown);
|
|
|
|
const pathname = usePathname();
|
|
|
|
const isMobile = useIsMobile();
|
|
return (
|
|
<div
|
|
className={`${styles.mainContainer} ${pathname.includes("/add") ? styles.onAdd : ""}`}
|
|
>
|
|
{/* Mobile Hamburger Button */}
|
|
<div className={styles.mobileHamburger}>
|
|
<div className={styles.hamburgerMenu}>
|
|
<HamburgerIcon
|
|
onClick={() => setTriggerDropDown(!triggerDropDown)}
|
|
className={triggerDropDown ? styles.active : ""}
|
|
/>
|
|
{triggerDropDown && (
|
|
<div className={styles.dropDownMenu}>
|
|
<div className={styles.headings}>
|
|
<div>
|
|
<div className={styles.logoContainer}>
|
|
<LogoIcon />
|
|
</div>
|
|
<div className={styles.info}>
|
|
<p>Internal Developer Platform</p>
|
|
<p>By Project Moonshot Inc.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={styles.navs}>
|
|
<div className={styles.nav} onClick={navToHome}>
|
|
<HomeIcon />
|
|
<p>Home</p>
|
|
</div>
|
|
<div className={styles.nav} onClick={navToOrganization}>
|
|
<OrganizationIcon />
|
|
<p>Organization</p>
|
|
</div>
|
|
<div className={styles.nav} onClick={navToProject}>
|
|
<ProjectIcon />
|
|
<p>Project</p>
|
|
</div>
|
|
<div className={styles.nav} onClick={navToUsers}>
|
|
<UserIcon />
|
|
<p>Users</p>
|
|
</div>
|
|
<div className={styles.nav} onClick={navToRoles}>
|
|
<RolesIcon />
|
|
<p>Roles</p>
|
|
</div>
|
|
<div className={styles.nav} onClick={navToCredentials}>
|
|
<CredentialsIcon />
|
|
<p>Credentials</p>
|
|
</div>
|
|
<div className={styles.nav} onClick={navToAgents}>
|
|
<AgentIcon />
|
|
<p>Agents</p>
|
|
</div>
|
|
</div>
|
|
<div className={styles.footer}>
|
|
<div>
|
|
<div>
|
|
<p>Download ICTL v3</p>
|
|
<DownloadIcon />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<NavLeft />
|
|
</div>
|
|
{/* Mobile Menu Button */}
|
|
<NavRight />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|