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

79
src/App.tsx
View file

@ -808,35 +808,60 @@ export default function App() {
<> <>
{/* Dynamic Header */} {/* Dynamic Header */}
{currentPage !== 'dashboard' && ( {currentPage !== 'dashboard' && (
<nav className="navbar is-fixed-top px-5 py-2"> <nav className="navbar is-fixed-top px-5 py-2" role="navigation" aria-label="main navigation" style={{ position: 'relative' }}>
<div className="flex justify-between items-center max-w-7xl mx-auto px-8 py-4"> <div className="container">
<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')}> <div className="navbar-brand" style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
Tradhox <button
</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'); }}
<div className="navbar-menu is-flex is-align-items-center gap-8"> style={{ outline: 'none' }}
<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> Tradhox
<button className="navbar-item bg-transparent border-none cursor-pointer" onClick={() => navigateTo('about')}>Our Story</button> </button>
<button className="navbar-item bg-transparent border-none cursor-pointer" onClick={() => navigateTo('contact')}>Support</button>
</div> <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' : ''}`}>
<button <div className="navbar-start">
className="navbar-item bg-transparent border-none cursor-pointer" <button className="navbar-item bg-transparent border-none cursor-pointer" onClick={() => { setIsMobileMenuOpen(false); navigateTo('home'); }}>Shop</button>
onClick={() => { setActiveTab('login'); navigateTo('login'); }} <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>
Login <button className="navbar-item bg-transparent border-none cursor-pointer" onClick={() => { setIsMobileMenuOpen(false); navigateTo('contact'); }}>Support</button>
</button> </div>
<button
className="button is-primary" <div className="navbar-end">
onClick={() => { setActiveTab('register'); navigateTo('signup'); }} <div className="navbar-item">
> <div className="buttons">
Get Started <button
</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>
</div> </nav>
</nav>
)} )}
{/* Main Content Area */} {/* Main Content Area */}
{currentPage !== 'dashboard' ? ( {currentPage !== 'dashboard' ? (