vignesh/supplier_central_frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: restore official Bulma brand and burger navigation layout to prevent header overlapping

Browse source
This commit is contained in:
vickytechkey 2026-08-20 21:57:30 +05:30
parent 12df350823
commit 92a6e9fb03
1 changed files with 52 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/App.tsx
View file

@ -808,34 +808,59 @@ 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')}>
<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>
<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>
<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">
<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="navbar-item bg-transparent border-none cursor-pointer"
onClick={() => { setActiveTab('login'); navigateTo('login'); }}
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={() => { setActiveTab('register'); navigateTo('signup'); }}
onClick={() => { setIsMobileMenuOpen(false); setActiveTab('register'); navigateTo('signup'); }}
>
Get Started
</button>
</div>
</div>
</div>
</div>
</div>
</nav>
)}
{/* Main Content Area */}