diff --git a/css/style.css b/css/style.css index c079296..226a1a1 100644 --- a/css/style.css +++ b/css/style.css @@ -329,6 +329,13 @@ a:hover { color: #fff; text-shadow: none; } } +/* === NAV SOL + WALLET GROUP === */ +.nav-sol-wallet-group { + display: flex; + align-items: center; + gap: 3px; +} + /* === NAV SOL PRICE TICKER === */ .nav-sol-price { display: flex; @@ -343,7 +350,7 @@ a:hover { color: #fff; text-shadow: none; } background: rgba(153, 69, 255, 0.08); border: 1px solid rgba(153, 69, 255, 0.25); border-radius: 4px; - margin-right: 2px; + margin-right: 0; white-space: nowrap; cursor: default; transition: all 0.3s ease; @@ -390,7 +397,7 @@ a:hover { color: #fff; text-shadow: none; } display: flex; align-items: center; margin-left: 0; - margin-right: 0.5rem; + margin-right: 0; } .nav-wallet-btn { diff --git a/js/nav.js b/js/nav.js index 1ceb2c0..520cb52 100644 --- a/js/nav.js +++ b/js/nav.js @@ -86,9 +86,8 @@ // Bind mobile dropdown toggles after rendering initMobileDropdowns(); - // Inject SOL price ticker and wallet button after nav loads - injectSolPrice(); - injectWalletButton(); + // Inject shared wrapper for SOL price + wallet, then inject both + injectSolWalletGroup(); } catch (err) { console.warn('Nav load failed, keeping existing:', err); } @@ -151,10 +150,35 @@ } } - // ─── SOL Price Ticker ────────────────────────────────────── - function injectSolPrice() { + // ─── SOL + Wallet Group Wrapper ──────────────────────────── + function injectSolWalletGroup() { const navContainer = document.querySelector('.nav-container'); - if (!navContainer || document.getElementById('navSolPrice')) return; + const navStatus = document.querySelector('.nav-status'); + if (!navContainer) return; + + // Don't inject twice + if (document.getElementById('navSolWalletGroup')) return; + + // Create shared wrapper + const group = document.createElement('div'); + group.id = 'navSolWalletGroup'; + group.className = 'nav-sol-wallet-group'; + + // Insert before nav-status + if (navStatus) { + navContainer.insertBefore(group, navStatus); + } else { + navContainer.appendChild(group); + } + + // Now inject SOL price and wallet into the group + injectSolPrice(group); + injectWalletButton(group); + } + + // ─── SOL Price Ticker ────────────────────────────────────── + function injectSolPrice(parent) { + if (!parent || document.getElementById('navSolPrice')) return; const wrap = document.createElement('div'); wrap.id = 'navSolPrice'; @@ -166,15 +190,7 @@ `; - // Insert before wallet wrap or nav-status - const walletWrap = document.getElementById('navWalletWrap'); - const navStatus = document.querySelector('.nav-status'); - const insertBefore = walletWrap || navStatus; - if (insertBefore) { - navContainer.insertBefore(wrap, insertBefore); - } else { - navContainer.appendChild(wrap); - } + parent.appendChild(wrap); fetchSolPrice(); setInterval(fetchSolPrice, 30000); @@ -222,10 +238,8 @@ // ─── Wallet Button Injection ──────────────────────────────── - function injectWalletButton() { - const navContainer = document.querySelector('.nav-container'); - const navStatus = document.querySelector('.nav-status'); - if (!navContainer) return; + function injectWalletButton(parent) { + if (!parent) return; // Don't inject twice if (document.getElementById('navWalletWrap')) return; @@ -242,12 +256,8 @@ `; - // Insert before nav-status (or append to container) - if (navStatus) { - navContainer.insertBefore(wrap, navStatus); - } else { - navContainer.appendChild(wrap); - } + parent.appendChild(wrap); + // Bind click const btn = document.getElementById('navWalletBtn');