add

frontend/src/app/agents/page.jsx

@@ -112,30 +112,32 @@ const AgentsPage = () => {
             topbarTitle="Agents"
             requiredButtons={["title", "add", "search"]}
           />
-          {isMobile ? (
-            <div className={styles.cardContainer}>
-              <MobileSearchBar />
-              {sampleData.map((data, key) => {
+
+          <div className={styles.cardContainer}>
+            <MobileSearchBar />
+            {isMobile &&
+              sampleData.map((data, key) => {
                 return <Card data={data} key={key} />;
               })}
-            </div>
-          ) : (
-            <div className={styles.tableContainer}>
-              <table className={styles.table}>
-                <thead>
-                  <tr>
-                    <th width="25%">Name</th>
-                    <th>Endpoint</th>
-                    <th>Type</th>
-                    <th>Proxy Name</th>
-                    <th>Date Created</th>
+          </div>
 
-                    <th width="10%"></th>
-                  </tr>
-                </thead>
+          <div className={styles.tableContainer}>
+            <table className={styles.table}>
+              <thead>
+                <tr>
+                  <th width="25%">Name</th>
+                  <th>Endpoint</th>
+                  <th>Type</th>
+                  <th>Proxy Name</th>
+                  <th>Date Created</th>
 
-                <tbody>
-                  {sampleData.map((org, index) => {
+                  <th width="10%"></th>
+                </tr>
+              </thead>
+
+              <tbody>
+                {!isMobile &&
+                  sampleData.map((org, index) => {
                     return (
                       <tr
                         key={index}
@@ -161,10 +163,9 @@ const AgentsPage = () => {
                       </tr>
                     );
                   })}
-                </tbody>
-              </table>
-            </div>
-          )}
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>

frontend/src/app/agents/styles.module.css

@@ -86,7 +86,15 @@
   align-items: flex-start;
   gap: 12px;
   align-self: stretch;
-  overflow: auto;
+  display: none;
+}
+@media (max-width: 768px) {
+  .cardContainer {
+    display: flex;
+  }
+  .tableContainer {
+    display: none;
+  }
 }
 .searchBarContainer {
   display: flex;
@@ -103,7 +111,6 @@
   background-color: transparent;
   border: none;
   outline: none;
-  background-color: transparent;
   color: white;
   font-family: Inter;
   font-size: 16px;

frontend/src/app/components/icons/hamburger.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-const hamburger = () => {
+const hamburger = (props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -8,10 +8,11 @@ const hamburger = () => {
       height={24}
       viewBox="0 0 24 24"
       fill="none"
+      {...props}
     >
       <path
         d="M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z"
-        fill="white"
+        fill="currentColor"
         style={{ fillOpacity: 1 }}
       />
     </svg>

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 */}

frontend/src/app/components/navbar/navleft/styles.module.css

@@ -91,7 +91,7 @@
   background: #2d3143;
   box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
   position: absolute;
-  z-index: 1;
+  z-index: 4;
   top: 100%;
   margin-top: 8px;
   left: 0;

frontend/src/app/components/navbar/navright/Profile.jsx

@@ -19,35 +19,36 @@ const Profile = () => {
       {/* Profile Section */}
       <div className={styles.profileContainer}>
         {/* Profile */}
-        {!isMobile && (
-          <div className={styles.profileBadge} onClick={() => setOpen(!open)}>
-            {/* Username and Role*/}
-            {sampleData.map((data, index) => {
-              return (
-                <div className={styles.nameRole} key={index}>
-                  <p className={styles.userName}>{data.name}</p>
-                  <p className={styles.userRole}>{data.role}</p>
-                </div>
-              );
-            })}
 
-            {/* User profile*/}
-            <div className={styles.userImgContainer}>
-              <div className={styles.userPic}></div>
-              <EllipsisIcon />
-            </div>
+        <div
+          className={styles.profileBadgeButton}
+          onClick={() => setOpen(!open)}
+        >
+          {/* Username and Role*/}
+          {sampleData.map((data, index) => {
+            return (
+              <div className={styles.nameRole} key={index}>
+                <p className={styles.userName}>{data.name}</p>
+                <p className={styles.userRole}>{data.role}</p>
+              </div>
+            );
+          })}
+
+          {/* User profile*/}
+          <div className={styles.userImgContainer}>
+            <div className={styles.userPic}></div>
+            <EllipsisIcon />
           </div>
-        )}
+        </div>
 
         {/* Mobile Ellipsis */}
-        {isMobile && (
-          <div
-            className={`${styles.mobileEllipsis} ${open ? styles.active : ""}`}
-            onClick={() => setOpen(!open)}
-          >
-            <EllipsisIcon style={isMobile ? styles.rotated : ""} />
-          </div>
-        )}
+
+        <div
+          className={`${styles.mobileEllipsis} ${open ? styles.active : ""}`}
+          onClick={() => setOpen(!open)}
+        >
+          <EllipsisIcon style={isMobile ? styles.rotated : ""} />
+        </div>
 
         {/* Dropdown */}
         {open && <ProfileDropdown isMobile={isMobile} user={sampleData[0]} />}

frontend/src/app/components/navbar/navright/styles.module.css

@@ -7,7 +7,8 @@
   cursor: pointer;
   position: relative;
 }
-.profileBadge {
+.profileBadge,
+.profileBadgeButton {
   display: flex;
   padding: 6px 0 6px 8px;
   justify-content: flex-end;
@@ -153,6 +154,9 @@
 .rotated {
   transform: rotate(90deg);
 }
+.mobileEllipsis {
+  display: none;
+}
 .mobileEllipsis.active {
   color: #959aff;
 }
@@ -183,7 +187,9 @@
     cursor: pointer;
     color: #85869b;
   }
-
+  .profileBadgeButton {
+    display: none;
+  }
   .profileBadge {
     display: flex;
     padding: 12px 16px;

frontend/src/app/components/navbar/styles.module.css

@@ -9,14 +9,154 @@
 }
 
 /* Mobile */
+
+.hamburgerMenu {
+  display: none;
+  height: 61px;
+  padding-left: 16px;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.active path {
+  color: #8187ff;
+}
+.dropDownMenu {
+  display: flex;
+  width: 100vw;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  background: linear-gradient(0deg, #2d3143 0%, #191a24 100%);
+  left: 0;
+  z-index: 2;
+  top: 60px;
+  animation-name: dropDownAnimation;
+  animation-duration: 200ms;
+}
+.headings {
+  display: flex;
+  padding: 32px 16px 16px 16px;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  align-self: stretch;
+}
+.headings > div {
+  display: flex;
+  padding-right: 6px;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+}
+.logoContainer {
+  display: flex;
+  width: 50px;
+  height: 50px;
+  justify-content: center;
+  align-items: center;
+  gap: 9px;
+  aspect-ratio: 1/1;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 4px;
+  flex: 1 0 0;
+}
+
+.info p {
+  color: #85869b;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.07px;
+}
+.info > p:nth-child(1) {
+  color: #fff;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 18px; /* 100% */
+}
+.navs {
+  display: flex;
+  padding: 16px 0;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.nav {
+  display: flex;
+  padding: 8px 16px;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+}
+.nav:hover {
+  background: rgba(149, 154, 255, 0.05);
+}
+.nav path {
+  stroke: #858699;
+}
+.nav:hover path {
+  stroke: #d2d3e0;
+}
+.nav p {
+  color: #d2d3e1;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: normal;
+}
+.footer {
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+}
+.footer > div {
+  display: flex;
+  padding: 12px 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
+  border-radius: 8px;
+  background: #1d1e2c;
+}
+.footer > div > div {
+  display: flex;
+  height: 24px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+}
+
+@keyframes dropDownAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-5%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 @media (max-width: 768px) {
   .mobileHamburger {
     display: flex;
     height: 61px;
-    padding-left: 16px;
+
     align-items: center;
     gap: 10px;
     flex-shrink: 0;
+    position: relative;
   }
 
   .mainContainer {
@@ -25,4 +165,7 @@
     align-items: center;
     border-bottom: none;
   }
+  .hamburgerMenu {
+    display: flex;
+  }
 }

frontend/src/app/components/sidebar/Sidebar.jsx

@@ -13,31 +13,19 @@ import AgentIcon from "../icons/agent";
 import DownloadIcon from "../icons/download";
 import LogoIcon from "../icons/logo";
 import ArrowDownIcon from "../icons/arrowDown";
+import useNavigations from "@/app/hooks/useNagivation";
 
 const Sidebar = () => {
-  const router = useRouter();
   const [isCollapsed, setIsCollapsed] = useState(false);
-  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 {
+    navToAgents,
+    navToCredentials,
+    navToProject,
+    navToRoles,
+    navToHome,
+    navToOrganization,
+    navToUsers,
+  } = useNavigations();
 
   const pathname = usePathname();
   return (

frontend/src/app/globals.css

@@ -55,7 +55,7 @@ a {
 }
 @media (max-width: 900px) {
   :root {
-    --table-font-size: 9px;
+    --table-font-size: 10px;
   }
 }
 @media (max-width: 500px) {

frontend/src/app/hooks/useIsMobile.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 
 export default function useIsMobile(breakpoint = 768) {
-  const [isMobile, setIsMobile] = useState(false);
+  const [isMobile, setIsMobile] = useState(true);
 
   useEffect(() => {
     const checkScreen = () => {

frontend/src/app/hooks/useNagivation.jsx

@@ -0,0 +1,36 @@
+import { useRouter } from "next/navigation";
+const useNavigations = () => {
+  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");
+  };
+
+  return {
+    navToHome,
+    navToAgents,
+    navToCredentials,
+    navToOrganization,
+    navToProject,
+    navToRoles,
+    navToUsers,
+  };
+};
+export default useNavigations;

frontend/src/app/organization/page.jsx

@@ -68,26 +68,26 @@ const OrganizationPage = () => {
             topbarTitle="Organization"
             requiredButtons={["title", "add", "search"]}
           />
-          {isMobile ? (
-            <div className={styles.cardContainer}>
-              <MobileSearchBar />
-              {sampleData.map((data, key) => (
-                <Card data={data} key={key} />
-              ))}
-            </div>
-          ) : (
-            <div className={styles.tableContainer}>
-              <table className={styles.table}>
-                <thead>
-                  <tr>
-                    <th width="45%">Organization Name</th>
-                    <th width="45%">Date Created</th>
-                    <th width="10%"></th>
-                  </tr>
-                </thead>
 
-                <tbody>
-                  {sampleData.map((org, index) => {
+          <div className={styles.cardContainer}>
+            <MobileSearchBar />
+            {isMobile &&
+              sampleData.map((data, key) => <Card data={data} key={key} />)}
+          </div>
+
+          <div className={styles.tableContainer}>
+            <table className={styles.table}>
+              <thead>
+                <tr>
+                  <th width="45%">Organization Name</th>
+                  <th width="45%">Date Created</th>
+                  <th width="10%"></th>
+                </tr>
+              </thead>
+
+              <tbody>
+                {!isMobile &&
+                  sampleData.map((org, index) => {
                     return (
                       <tr key={index}>
                         <td>{org.organizationName}</td>
@@ -100,10 +100,9 @@ const OrganizationPage = () => {
                       </tr>
                     );
                   })}
-                </tbody>
-              </table>
-            </div>
-          )}
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>

frontend/src/app/organization/styles.module.css

@@ -61,4 +61,13 @@
   gap: 12px;
   align-self: stretch;
   overflow: auto;
+  display: none;
+}
+@media (max-width: 768px) {
+  .cardContainer {
+    display: flex;
+  }
+  .tableContainer {
+    display: none;
+  }
 }

frontend/src/app/projects/page.jsx

@@ -181,33 +181,35 @@ const ProjectsPage = () => {
             topbarTitle="Project"
             requiredButtons={["title", "add", "search"]}
           />
-          {isMobile ? (
-            <div className={styles.cardContainer}>
-              <MobileSearchBar />
-              {sampleData.map((data, key) => (
+
+          <div className={styles.cardContainer}>
+            <MobileSearchBar />
+            {isMobile &&
+              sampleData.map((data, key) => (
                 <Card
                   data={data}
                   key={key}
                   onClick={() => router.push("/projects/view")}
                 />
               ))}
-            </div>
-          ) : (
-            <div className={styles.tableContainer}>
-              <table className={styles.table}>
-                <thead>
-                  <tr>
-                    <th>Name</th>
-                    <th>Version</th>
-                    <th>CPU Used/Limit</th>
-                    <th>Memory Used/Limit</th>
-                    <th>Storage Used/Limit</th>
-                    <th>Date Created</th>
-                    <th></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {sampleData.map((project, index) => {
+          </div>
+
+          <div className={styles.tableContainer}>
+            <table className={styles.table}>
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Version</th>
+                  <th>CPU Used/Limit</th>
+                  <th>Memory Used/Limit</th>
+                  <th>Storage Used/Limit</th>
+                  <th>Date Created</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {!isMobile &&
+                  sampleData.map((project, index) => {
                     return (
                       <tr
                         key={index}
@@ -256,10 +258,9 @@ const ProjectsPage = () => {
                       </tr>
                     );
                   })}
-                </tbody>
-              </table>
-            </div>
-          )}
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>

frontend/src/app/projects/styles.module.css

@@ -92,4 +92,13 @@
   gap: 12px;
   align-self: stretch;
   overflow: auto;
+  display: none;
+}
+@media (max-width: 768px) {
+  .cardContainer {
+    display: flex;
+  }
+  .tableContainer {
+    display: none;
+  }
 }