From 92a6e9fb03ab654ed9c556c520b757ebb286e1d5 Mon Sep 17 00:00:00 2001
From: vickytechkey <vichunice@gmail.com>
Date: Thu, 20 Aug 2026 21:57:30 +0530
Subject: [PATCH] fix: restore official Bulma brand and burger navigation
 layout to prevent header overlapping

---
 src/App.tsx | 79 +++++++++++++++++++++++++++++++++++------------------
 1 file changed, 52 insertions(+), 27 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 6fe7019..f441f58 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -808,35 +808,60 @@ export default function App() {
     <>
       {/* Dynamic Header */}
       {currentPage !== 'dashboard' && (
-      <nav className="navbar is-fixed-top px-5 py-2">
-        <div className="flex justify-between items-center max-w-7xl mx-auto px-8 py-4">
-          <button className="navbar-brand font-caslon is-size-4 has-text-weight-bold has-text-primary bg-transparent border-none cursor-pointer" onClick={() => navigateTo('home')}>
-            Tradhox
-          </button>
-          
-          <div className="navbar-menu is-flex is-align-items-center gap-8">
-            <button className="navbar-item bg-transparent border-none cursor-pointer" onClick={() => navigateTo('home')}>Shop</button>
-            <button className="navbar-item bg-transparent border-none cursor-pointer" onClick={() => navigateTo('about')}>Artisans</button>
-            <button className="navbar-item bg-transparent border-none cursor-pointer" onClick={() => navigateTo('about')}>Our Story</button>
-            <button className="navbar-item bg-transparent border-none cursor-pointer" onClick={() => navigateTo('contact')}>Support</button>
-          </div>
+        <nav className="navbar is-fixed-top px-5 py-2" role="navigation" aria-label="main navigation" style={{ position: 'relative' }}>
+          <div className="container">
+            <div className="navbar-brand" style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+              <button 
+                className="navbar-item font-caslon is-size-4 has-text-weight-bold has-text-primary bg-transparent border-none cursor-pointer" 
+                onClick={() => { setIsMobileMenuOpen(false); navigateTo('home'); }}
+                style={{ outline: 'none' }}
+              >
+                Tradhox
+              </button>
+              
+              <button 
+                className={`navbar-burger burger ${isMobileMenuOpen ? 'is-active' : ''}`}
+                aria-label="menu" 
+                aria-expanded={isMobileMenuOpen ? 'true' : 'false'}
+                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+                style={{ background: 'none', border: 'none', marginLeft: 'auto', display: 'block' }}
+              >
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+              </button>
+            </div>
 
-          <div className="navbar-end is-flex is-align-items-center gap-4">
-            <button 
-              className="navbar-item bg-transparent border-none cursor-pointer"
-              onClick={() => { setActiveTab('login'); navigateTo('login'); }}
-            >
-              Login
-            </button>
-            <button 
-              className="button is-primary"
-              onClick={() => { setActiveTab('register'); navigateTo('signup'); }}
-            >
-              Get Started
-            </button>
+            <div className={`navbar-menu ${isMobileMenuOpen ? 'is-active' : ''}`}>
+              <div className="navbar-start">
+                <button className="navbar-item bg-transparent border-none cursor-pointer" onClick={() => { setIsMobileMenuOpen(false); navigateTo('home'); }}>Shop</button>
+                <button className="navbar-item bg-transparent border-none cursor-pointer" onClick={() => { setIsMobileMenuOpen(false); navigateTo('about'); }}>Artisans</button>
+                <button className="navbar-item bg-transparent border-none cursor-pointer" onClick={() => { setIsMobileMenuOpen(false); navigateTo('about'); }}>Our Story</button>
+                <button className="navbar-item bg-transparent border-none cursor-pointer" onClick={() => { setIsMobileMenuOpen(false); navigateTo('contact'); }}>Support</button>
+              </div>
+
+              <div className="navbar-end">
+                <div className="navbar-item">
+                  <div className="buttons">
+                    <button 
+                      className="button is-text has-text-primary bg-transparent border-none cursor-pointer mr-3"
+                      style={{ textDecoration: 'none' }}
+                      onClick={() => { setIsMobileMenuOpen(false); setActiveTab('login'); navigateTo('login'); }}
+                    >
+                      Login
+                    </button>
+                    <button 
+                      className="button is-primary"
+                      onClick={() => { setIsMobileMenuOpen(false); setActiveTab('register'); navigateTo('signup'); }}
+                    >
+                      Get Started
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
-        </div>
-      </nav>
+        </nav>
       )}
       {/* Main Content Area */}
       {currentPage !== 'dashboard' ? (