Skip to content

Commit 8d0b9fd

Browse files
Copilot0xrinegade
Copilot
and
0xrinegade
committed
Fix navbar layout and implement comprehensive ASCII responsive navigation system
Co-authored-by: 0xrinegade <[email protected]>
1 parent 03ca2b6 commit 8d0b9fd

File tree

2 files changed

+409
-81
lines changed

2 files changed

+409
-81
lines changed

‎src/components/Layout.js‎

Lines changed: 47 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export default function Layout({ children, title = 'OpenSVM P2P Exchange' }) {
8383
{ key: 'help', label: 'HELP', icon: '?', href: '/help' },
8484
];
8585

86-
// Sidebar navigation items (secondary sections)
86+
// Sidebar navigation items (secondary sections)
8787
const sidebarNavItems = [
8888
{ key: 'myoffers', label: 'MY OFFERS', icon: 'M', href: '/myoffers' },
8989
{ key: 'disputes', label: 'DISPUTES', icon: 'D', href: '/disputes' },
@@ -106,58 +106,51 @@ export default function Layout({ children, title = 'OpenSVM P2P Exchange' }) {
106106
</a>
107107

108108
<div className="app-layout">
109-
{/* Top Header */}
110-
<header className="app-header">
111-
<div className="header-content">
112-
<div className="logo-section">
109+
{/* ASCII Header with proper responsive design */}
110+
<header className="ascii-header">
111+
<div className="ascii-header-content">
112+
{/* Logo Section */}
113+
<div className="ascii-logo-section">
113114
<Image
114115
src="/images/opensvm-logo.svg"
115116
alt="OpenSVM P2P Exchange"
116-
className="logo-image"
117-
width={24}
118-
height={24}
117+
className="ascii-logo-image"
118+
width={20}
119+
height={20}
119120
priority
120121
/>
121-
<h1 className="logo-text">OpenSVM P2P</h1>
122+
<h1 className="ascii-logo-text">OPENSVM P2P</h1>
122123
</div>
123124

124-
{/* Desktop Navigation - Horizontal layout for desktop */}
125-
<nav className="desktop-nav">
126-
{/* Primary navigation items */}
127-
{topNavItems.map((item) => (
128-
<Link
129-
key={item.key}
130-
href={item.href}
131-
className={`nav-tab ${router.pathname === item.href ? 'active' : ''}`}
132-
>
133-
<span className="nav-label">{item.label}</span>
134-
</Link>
135-
))}
136-
137-
{/* Secondary navigation items (previously in sidebar) */}
138-
{sidebarNavItems.map((item) => (
139-
<Link
140-
key={item.key}
141-
href={item.href}
142-
className={`nav-tab ${router.pathname === item.href ? 'active' : ''}`}
143-
>
144-
<span className="nav-label">{item.label}</span>
145-
</Link>
146-
))}
125+
{/* Desktop Navigation - ASCII Styled */}
126+
<nav className="ascii-nav-desktop">
127+
<div className="ascii-nav-tabs">
128+
{/* Primary navigation items */}
129+
{topNavItems.map((item) => (
130+
<Link
131+
key={item.key}
132+
href={item.href}
133+
className={`ascii-nav-tab ${router.pathname === item.href ? 'active' : ''}`}
134+
>
135+
{item.label}
136+
</Link>
137+
))}
138+
139+
{/* Secondary navigation items */}
140+
{sidebarNavItems.map((item) => (
141+
<Link
142+
key={item.key}
143+
href={item.href}
144+
className={`ascii-nav-tab ${router.pathname === item.href ? 'active' : ''}`}
145+
>
146+
{item.label}
147+
</Link>
148+
))}
149+
</div>
147150
</nav>
148151

149-
{/* RIGHT SIDE: ALL HEADER CONTROLS */}
150-
<div className="header-controls">
151-
{/* PROFILE element - now properly in the flex container */}
152-
<div className="profile-nav">
153-
<Link
154-
href="/profile"
155-
className={router.pathname === '/profile' ? 'active' : ''}
156-
>
157-
PROFILE
158-
</Link>
159-
</div>
160-
152+
{/* Header Controls - Simplified and ASCII styled */}
153+
<div className="ascii-header-controls">
161154
{/* Network selector */}
162155
<NetworkSelector
163156
networks={networks}
@@ -171,59 +164,32 @@ export default function Layout({ children, title = 'OpenSVM P2P Exchange' }) {
171164
onLanguageChange={handleLanguageChange}
172165
/>
173166

174-
{/* Theme toggle */}
175-
<ThemeToggle />
176-
177-
{/* Explorer link */}
178-
<a
179-
href={network.explorerUrl}
180-
target="_blank"
181-
rel="noopener noreferrer"
182-
className="explorer-link"
183-
>
184-
SOLANA EXPLORER
185-
</a>
186-
187-
{/* Install App button with proper prominence */}
188-
<PWAInstallButton className="header-prominent-action" />
189-
190167
{/* Connected wallet info */}
191168
{connected && publicKey && (
192-
<span className="connection-status">
193-
Connected: {publicKey.toString().slice(0, 8)}...{publicKey.toString().slice(-8)}
169+
<span className="ascii-wallet-status">
170+
{publicKey.toString().slice(0, 6)}...{publicKey.toString().slice(-4)}
194171
</span>
195172
)}
196173

197174
{/* Phantom wallet connection button */}
198-
<div className="header-wallet-container">
175+
<div className="ascii-wallet-container">
199176
<PhantomWalletButton />
200177
</div>
201178
</div>
202179
</div>
203180
</header>
204181

205-
{/* Mobile Navigation - Stacked below header */}
206-
<nav className="mobile-nav">
207-
<div className="mobile-nav-buttons">
208-
{/* Primary navigation items */}
209-
{topNavItems.map((item) => (
210-
<Link
211-
key={item.key}
212-
href={item.href}
213-
className={`mobile-nav-btn ${router.pathname === item.href ? 'active' : ''}`}
214-
>
215-
<span className="nav-label">{item.label}</span>
216-
</Link>
217-
))}
218-
219-
{/* Secondary navigation items */}
220-
{sidebarNavItems.map((item) => (
182+
{/* Mobile Navigation - ASCII Grid Layout */}
183+
<nav className="ascii-nav-mobile">
184+
<div className="ascii-nav-grid">
185+
{/* All navigation items in mobile grid */}
186+
{[...topNavItems, ...sidebarNavItems].map((item) => (
221187
<Link
222188
key={item.key}
223189
href={item.href}
224-
className={`mobile-nav-btn ${router.pathname === item.href ? 'active' : ''}`}
190+
className={`ascii-nav-button ${router.pathname === item.href ? 'active' : ''}`}
225191
>
226-
<span className="nav-label">{item.label}</span>
192+
{item.label}
227193
</Link>
228194
))}
229195
</div>

0 commit comments

Comments
 (0)