diff --git a/index.html b/index.html index 9451602..6b0ae0f 100644 --- a/index.html +++ b/index.html @@ -191,11 +191,8 @@ .modal-actions .btn { flex: 1; } /* ── SAFE AREA / MOBILE ── */ - .bottom-nav { - padding-bottom: env(safe-area-inset-bottom); - } .dashboard-content { - padding-bottom: calc(80px + env(safe-area-inset-bottom)); + padding-bottom: 40px; } /* ── TOUCH TARGETS ── */ @@ -755,51 +752,124 @@ display: inline-block; } - /* ── BOTTOM NAV ── */ - .bottom-nav { - position: fixed; - bottom: 0; - left: 0; - right: 0; - background: var(--bg); - border-top: 1px solid var(--border); - display: flex; - z-index: 100; - } - .bn-item { - flex: 1; + /* ── HAMBURGER MENU ── */ + .hamburger-btn { + width: 38px; + height: 38px; display: flex; flex-direction: column; align-items: center; - padding: 10px 0 14px; + justify-content: center; + gap: 5px; cursor: pointer; - border: none; background: transparent; - color: var(--muted); - font-family: var(--font-body); - font-size: 11px; - gap: 4px; - transition: color 0.15s; + border: none; + padding: 4px; + border-radius: 8px; + transition: background 0.15s; } - .bn-item.active { color: var(--teal); } - .bn-item .bn-icon { font-size: 20px; line-height: 1; } - .bn-badge { + .hamburger-btn:hover { background: var(--surface2); } + .hamburger-btn span { + display: block; + width: 20px; + height: 2px; + background: var(--white); + border-radius: 2px; + transition: all 0.2s; + } + .hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } + .hamburger-btn.open span:nth-child(2) { opacity: 0; } + .hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } + + .menu-overlay { + position: fixed; + inset: 0; + z-index: 150; + pointer-events: none; + } + .menu-overlay.open { pointer-events: all; } + + .menu-backdrop { + position: absolute; + inset: 0; + background: rgba(0,0,0,0.5); + opacity: 0; + transition: opacity 0.2s; + } + .menu-overlay.open .menu-backdrop { opacity: 1; } + + .menu-drawer { + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 240px; + background: var(--surface); + border-left: 1px solid var(--border); + display: flex; + flex-direction: column; + transform: translateX(100%); + transition: transform 0.25s cubic-bezier(0.16,1,0.3,1); + padding: 0 0 max(24px, env(safe-area-inset-bottom)); + } + .menu-overlay.open .menu-drawer { transform: translateX(0); } + + .menu-header { + padding: 20px 20px 16px; + border-bottom: 1px solid var(--border); + margin-bottom: 8px; + } + .menu-header .menu-user-name { + font-family: var(--font-display); + font-weight: 700; + font-size: 16px; + } + .menu-header .menu-user-email { + font-size: 12px; + color: var(--muted); + margin-top: 2px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .menu-item { + display: flex; + align-items: center; + gap: 14px; + padding: 14px 20px; + cursor: pointer; + background: transparent; + border: none; + color: var(--white); + font-family: var(--font-body); + font-size: 15px; + width: 100%; + text-align: left; + transition: background 0.15s; position: relative; } - .bn-badge::after { - content: attr(data-count); - position: absolute; - top: -4px; - right: -8px; + .menu-item:hover { background: var(--surface2); } + .menu-item.active { color: var(--teal); } + .menu-item .mi-icon { font-size: 20px; width: 24px; text-align: center; } + .menu-item .mi-badge { + margin-left: auto; background: var(--danger); color: white; - font-size: 9px; + font-size: 10px; font-weight: 700; border-radius: 10px; - padding: 1px 5px; + padding: 2px 7px; display: none; } - .bn-badge[data-count]:not([data-count="0"])::after { display: block; } + .menu-item .mi-badge.show { display: block; } + + .menu-divider { + height: 1px; + background: var(--border); + margin: 8px 20px; + } + .menu-spacer { flex: 1; } /* ── PANEL VIEWS ── */ .panel { display: none; } @@ -1028,14 +1098,46 @@
+ + +
@@ -1081,22 +1183,22 @@
- +
+
- + +
+ +
-
Friends
+
Friends' Steps
-
+
-
- - -
@@ -1471,11 +1561,11 @@ function refreshProfileUI() { const name = currentUserData.displayName || currentUser.email.split('@')[0]; const initial = name[0].toUpperCase(); const avatarUrl = currentUserData.avatarUrl || ''; - - document.getElementById('nav-name').textContent = name; setAvatarEl(document.getElementById('nav-avatar'), 'nav-avatar-initial', initial, avatarUrl, 36); setAvatarEl(document.getElementById('settings-avatar-display'), 'settings-avatar-initial', initial, avatarUrl, 48); document.getElementById('settings-display-name-show').textContent = name; + document.getElementById('menu-user-name').textContent = name; + document.getElementById('menu-user-email').textContent = currentUser.email; } function setAvatarEl(wrapEl, initialId, initial, url, size) { @@ -1742,8 +1832,13 @@ function renderFriendsPanel() { } function updateBadge() { - const badge = document.getElementById('bn-friends-badge'); - badge.setAttribute('data-count', pendingReceived.length); + const badge = document.getElementById('mi-friends-badge'); + if (pendingReceived.length > 0) { + badge.textContent = pendingReceived.length; + badge.classList.add('show'); + } else { + badge.classList.remove('show'); + } } window.sendFriendRequest = async function() { @@ -1813,11 +1908,24 @@ window.respondRequest = async function(requestId, status) { window.switchPanel = function(name) { document.querySelectorAll('.panel').forEach(p => p.classList.remove('active')); document.getElementById('panel-' + name).classList.add('active'); - document.querySelectorAll('.bn-item').forEach(b => b.classList.remove('active')); - document.getElementById('bn-' + name).classList.add('active'); + document.querySelectorAll('.menu-item').forEach(b => b.classList.remove('active')); + const mi = document.getElementById('mi-' + name); + if (mi) mi.classList.add('active'); if (name === 'friends') loadFriends(); } +window.toggleMenu = function() { + const overlay = document.getElementById('menu-overlay'); + const btn = document.getElementById('hamburger-btn'); + const isOpen = overlay.classList.contains('open'); + if (isOpen) { closeMenu(); } else { overlay.classList.add('open'); btn.classList.add('open'); } +} + +window.closeMenu = function() { + document.getElementById('menu-overlay').classList.remove('open'); + document.getElementById('hamburger-btn').classList.remove('open'); +} + // ───────────────────────────────────────────── // COPY WEBHOOK // ───────────────────────────────────────────── @@ -1948,7 +2056,7 @@ document.getElementById('profile-name-input').addEventListener('input', updatePr document.getElementById('profile-avatar-input').addEventListener('input', updateProfilePreview); document.addEventListener('keydown', e => { - if (e.key === 'Escape') closeProfileModal(); + if (e.key === 'Escape') { closeProfileModal(); closeMenu(); } }); let ptrStartY = 0;