add

frontend/src/app/components/navbar/Navbar.jsx

@@ -1,19 +1,99 @@
 "use client";
 
-import React from "react";
+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";
 
 const Navbar = () => {
+  const [triggerDropDown, setTriggerDropDown] = useState(false);
+  const {
+    navToAgents,
+    navToCredentials,
+    navToProject,
+    navToRoles,
+    navToHome,
+    navToOrganization,
+    navToUsers,
+  } = useNavigations();
+
   const isMobile = useIsMobile();
   return (
     <div className={styles.mainContainer}>
       {/* Mobile Hamburger Button */}
       <div className={styles.mobileHamburger}>
-        {isMobile && <HamburgerIcon />}
+        <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 */}