thats all for today!!

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

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

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

@@ -0,0 +1,21 @@
+import React from "react";
+
+const verticalEllipsis = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M8 12C8 13.1046 7.1046 14 6 14C4.8954 14 4 13.1046 4 12C4 10.8954 4.8954 10 6 10C7.1046 10 8 10.8954 8 12ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 10 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12ZM20 12C20 13.1046 19.1046 14 18 14C16.8954 14 16 13.1046 16 12C16 10.8954 16.8954 10 18 10C19.1046 10 20 10.8954 20 12Z"
+        fill="#858699"
+        style={{ fillOpacity: 1 }}
+      />
+    </svg>
+  );
+};
+
+export default verticalEllipsis;

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

@@ -4,12 +4,23 @@ import React 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 VerticalEllipsis from "../icons/verticalEllipsis";
+import useIsMobile from "@/app/hooks/useIsMobile";
 
 const Navbar = () => {
+  const isMobile = useIsMobile();
   return (
     <div className={styles.mainContainer}>
-      <NavLeft />
+      {/* Mobile Hamburger Button */}
-      <NavRight />
+      <div className={styles.mobileHamburger}>
+        {isMobile && <HamburgerIcon />}
+        <NavLeft />
+      </div>
+      {/* Mobile Menu Button */}
+      <div className={styles.mobileEllipsis}>
+        {isMobile ? <VerticalEllipsis /> : <NavRight />}
+      </div>
     </div>
   );
 };

frontend/src/app/components/navbar/navleft/Header.jsx

@@ -9,22 +9,6 @@ const Header = () => {
       {/* Organization Header */}
       <div className={styles.organizationContainer}>
         <div className={styles.orgContainer}>
-          {/* Burger Button */}
-          {/* <div className={styles.burgerBtn}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width={24}
-              height={24}
-              viewBox="0 0 24 24"
-              fill="none"
-            >
-              <path
-                d="M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z"
-                fill="white"
-                style={{ fillOpacity: 1 }}
-              />
-            </svg>
-          </div> */}
           {/* Logo */}
           <div className={styles.orgLogo}></div>
           <div className={styles.orgName}>

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

@@ -10,9 +10,7 @@
   gap: 16px;
   border-radius: 4px;
 }
-.burgerBtn {
+
-  display: none;
-}
 .orgLogo {
   width: 38px;
   height: 38px;

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

@@ -22,22 +22,6 @@ const Profile = () => {
             <div className={styles.userPic}></div>
             <EllipsisIcon />
           </div>
-          {/* Burger Button */}
-          {/* <div className={styles.ellipsisBtn}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width={24}
-              height={24}
-              viewBox="0 0 24 24"
-              fill="none"
-            >
-              <path
-                d="M8 12C8 13.1046 7.1046 14 6 14C4.8954 14 4 13.1046 4 12C4 10.8954 4.8954 10 6 10C7.1046 10 8 10.8954 8 12ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 10 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12ZM20 12C20 13.1046 19.1046 14 18 14C16.8954 14 16 13.1046 16 12C16 10.8954 16.8954 10 18 10C19.1046 10 20 10.8954 20 12Z"
-                fill="#858699"
-                style={{ fillOpacity: 1 }}
-              />
-            </svg>
-          </div> */}
         </div>
 
         {/* Dropdown */}

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

@@ -69,9 +69,6 @@
   border-radius: 32px;
   background: url(/profile/PROFILE.svg) lightgray 50% / cover no-repeat;
 }
-.ellipsisBtn {
-  display: none;
-}
 
 .dropdownContainer {
   display: flex;
@@ -142,4 +139,7 @@
 }
 /* Mobile */
 @media (max-width: 768px) {
+  .profileBadge {
+    display: none;
+  }
 }

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

@@ -6,9 +6,31 @@
   align-items: center;
   align-self: stretch;
   border-bottom: 1px solid #2c2d3d;
-  border-bottom: 1px solid color(display-p3 0.1725 0.1765 0.2353);
 }
 
 /* Mobile */
 @media (max-width: 768px) {
+  .mobileHamburger {
+    display: flex;
+    height: 61px;
+    padding-left: 16px;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+
+  .mobileEllipsis {
+    display: flex;
+    height: 61px;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+
+  .mainContainer {
+    display: flex;
+    padding: 12px 0px;
+    align-items: center;
+    border-bottom: none;
+  }
 }