update nav menu for mobile

frontend/index.html

@@ -25,6 +25,7 @@
   <!-- {/* Open Graph / Facebook */} -->
   <meta property="og:type" content="website" />
   <meta property="og:title" content="Fabric AI" />
+  <meta property="og:logo" content="threadzip" />
   <meta property="og:description" content="Advance fabric analysis, search and AI chatbot" />
   <meta property="og:url" content="https://pro.threadzip.com" />
   <meta property="og:site_name" content="pro.threadzip.com" />

frontend/src/App.css

@@ -47,42 +47,16 @@
 
 
 
+
+
 .header-left {
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
-.header-nav ul {
-  display: flex;
-  gap: 20px;
-  list-style: none;
-}
-
-.header-nav ul li {
-  font-size: 14px;
-  margin: 0 10px;
-}
-
-.header-nav ul li a {
-  text-decoration: none;
-  color: var(--text-color);
-  font-weight: 500;
-  padding: 6px 6px;
-  transition: background-color .15s ease;
-
-}
 
-.header-nav ul li a:hover {
-  background-color: #2f6aff31;
-  border-radius: 10px;
-}
 
-.header-nav ul li a.active {
-  font-weight: 700;
-  background-color: #2f6aff31;
-  border-radius: 10px;
-}
 
 .logo-mark {
   width: 44px;

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { FaRegMoon } from "react-icons/fa";
 import { NavLink } from "react-router-dom";
 import "./App.css";
+import "./styles/navbar.css";
 import { Routing } from "./Routing";
 import Footer from "./components/Footer";
 
@@ -24,31 +25,53 @@ const App: React.FC = () => {
             <div className="brand-name">FabricAI</div>
           </div>
         </div>
-        <nav className="header-nav">
-          <ul>
-            <li>
-              <NavLink to="/" end className={ ({ isActive }) => isActive ? "active" : "" }>
-                Home
-              </NavLink></li>
-            <li><NavLink to="/analysis" end className={ ({ isActive }) => isActive ? "active" : "" }>
-              Analysis
-            </NavLink></li>
-            <li><NavLink to="/upload" end className={ ({ isActive }) => isActive ? "active" : "" }>
-              Upload
-            </NavLink></li>
-            <li><NavLink to="/view" end className={ ({ isActive }) => isActive ? "active" : "" }>
-              List
-            </NavLink></li>
-            <li><NavLink to="/search" end className={ ({ isActive }) => isActive ? "active" : "" }>
-              Search
-            </NavLink></li>
-            <li><NavLink to="/chat" end className={ ({ isActive }) => isActive ? "active" : "" }>
-              Chat
-            </NavLink></li>
-          </ul>
-        </nav>
+        <div className="mobile-nav-wrapper">
+          <input type="checkbox" id="nav-toggle" className="nav-toggle" />
+
+          <label htmlFor="nav-toggle" className="hamburger">
+            <span></span>
+            <span></span>
+            <span></span>
+          </label>
+
+          <nav className="header-nav">
+            <ul>
+              <li>
+                <NavLink to="/" end className={ ({ isActive }) => isActive ? "active" : "" }>
+                  Home
+                </NavLink>
+              </li>
+              <li>
+                <NavLink to="/analysis" end className={ ({ isActive }) => isActive ? "active" : "" }>
+                  Analysis
+                </NavLink>
+              </li>
+              <li>
+                <NavLink to="/upload" end className={ ({ isActive }) => isActive ? "active" : "" }>
+                  Upload
+                </NavLink>
+              </li>
+              <li>
+                <NavLink to="/view" end className={ ({ isActive }) => isActive ? "active" : "" }>
+                  List
+                </NavLink>
+              </li>
+              <li>
+                <NavLink to="/search" end className={ ({ isActive }) => isActive ? "active" : "" }>
+                  Search
+                </NavLink>
+              </li>
+              <li>
+                <NavLink to="/chat" end className={ ({ isActive }) => isActive ? "active" : "" }>
+                  Chat
+                </NavLink>
+              </li>
+            </ul>
+          </nav>
+        </div>
+
         <div className="action">
-          <div id="theme"> <FaRegMoon /></div>
+          {/* <div id="theme"> <FaRegMoon /></div> */}
         </div>
       </header>
 

frontend/src/styles/navbar.css

@@ -0,0 +1,126 @@
+.header-nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.header-nav a {
+  text-decoration: none;
+  color: #222;
+  font-weight: 500;
+  display: block;
+}
+
+.header-nav a.active {
+  border-bottom: 2px solid #222;
+}
+
+.nav-toggle {
+  display: none;
+}
+
+@media (min-width: 769px) {
+
+  /* desktop layout stays intact */
+  .hamburger {
+    display: none !important;
+  }
+
+  .header-nav ul {
+    position: static !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center;
+    gap: 1.5rem;
+    background: none !important;
+    padding: 0 !important;
+    transform: none !important;
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    height: auto !important;
+    box-shadow: none !important;
+  }
+}
+
+@media (max-width: 768px) {
+
+  .mobile-nav-wrapper {
+    position: relative;
+    z-index: 999;
+  }
+
+  /* position hamburger & cross */
+  .hamburger {
+    display: flex;
+    width: 30px;
+    height: 22px;
+    flex-direction: column;
+    justify-content: space-between;
+    cursor: pointer;
+
+    position: fixed;
+    /* always visible */
+    top: 16px;
+    right: 16px;
+    /* 🔹 fully right aligned */
+    z-index: 1002;
+    /* above overlay */
+  }
+
+  .hamburger span {
+    height: 3px;
+    width: 100%;
+    background: #222;
+    border-radius: 3px;
+    transition: 0.3s ease;
+  }
+
+  /* FULLSCREEN OVERLAY */
+  .header-nav ul {
+    position: fixed;
+    inset: 0;
+    background: #ffffffee;
+    backdrop-filter: blur(4px);
+    display: flex;
+    flex-direction: column;
+    padding-top: 100px;
+    padding-left: 24px;
+    padding-right: 24px;
+    gap: 1.2rem;
+    transform: translateY(-100%);
+    opacity: 0;
+    pointer-events: none;
+    transition: 0.35s ease;
+  }
+
+  /* SHOW MENU */
+  .nav-toggle:checked~.header-nav ul {
+    transform: translateY(0);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* ANIMATE BUTTON INTO X */
+  .nav-toggle:checked+.hamburger span:nth-child(1) {
+    transform: translateY(9px) rotate(45deg);
+  }
+
+  .nav-toggle:checked+.hamburger span:nth-child(2) {
+    opacity: 0;
+  }
+
+  .nav-toggle:checked+.hamburger span:nth-child(3) {
+    transform: translateY(-9px) rotate(-45deg);
+  }
+
+  /* MOBILE ITEM STYLE */
+  .header-nav a {
+    padding: 14px 10px;
+    font-size: 18px;
+    border-radius: 6px;
+  }
+
+  .header-nav a.active {
+    background: rgba(0, 0, 0, 0.1);
+  }
+}