/* ══════════════════════════════════════════════ SIDE DRAWER NAV · solar-gong-manager Add to : ══════════════════════════════════════════════ */ /* Hide old bottom nav */ .nav { display: none !important; } /* Remove old bottom padding, no nav bar anymore */ .page { padding: 14px 14px 24px !important; } /* ── HAMBURGER BUTTON ── */ .hdr-menu-btn { width: 34px; height: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4.5px; cursor: pointer; border-radius: 8px; border: 1px solid var(--border2); background: var(--panel); flex-shrink: 0; transition: background .15s; order: -1; } .hdr-menu-btn:active { background: var(--bg3); } .hdr-menu-btn span { display: block; width: 14px; height: 1.5px; background: var(--txt); border-radius: 1px; transition: transform .22s cubic-bezier(.32,.72,0,1), opacity .22s; } .hdr-menu-btn.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hdr-menu-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hdr-menu-btn.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ── OVERLAY ── */ .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 400; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .nav-overlay.open { display: block; } /* ── SIDE DRAWER ── */ .side-drawer { position: fixed; top: 0; left: -280px; width: 265px; height: 100%; height: 100dvh; background: var(--bg2); border-right: 1px solid var(--border2); z-index: 401; transition: left .28s cubic-bezier(.32,.72,0,1); display: flex; flex-direction: column; overflow: hidden; box-shadow: 4px 0 24px rgba(0,0,0,0.08); } .side-drawer.open { left: 0; } .side-drawer-hdr { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .side-drawer-logo-title { font-size: 16px; font-weight: 800; color: var(--acc); letter-spacing: -.5px; line-height: 1; } .side-drawer-logo-sub { font-size: 10px; color: var(--txt3); font-family: 'JetBrains Mono', monospace; margin-top: 2px; } .side-drawer-close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; color: var(--txt3); transition: background .12s; } .side-drawer-close:active { background: var(--bg3); } .side-drawer-body { flex: 1; overflow-y: auto; padding: 8px; -webkit-overflow-scrolling: touch; } .side-nav-section-label { font-size: 9px; font-weight: 700; color: var(--txt3); text-transform: uppercase; letter-spacing: 1px; font-family: 'JetBrains Mono', monospace; padding: 10px 10px 4px; } .side-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px; cursor: pointer; color: var(--txt2); font-size: 13px; font-weight: 600; transition: background .12s, color .12s; user-select: none; } .side-nav-item:active { background: var(--bg3); } .side-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--txt3); transition: color .12s; } .side-nav-item.active { background: var(--acc2); color: var(--acc); } .side-nav-item.active svg { color: var(--acc); } .side-nav-badge { margin-left: auto; font-size: 9px; font-weight: 700; font-family: 'JetBrains Mono', monospace; background: var(--bg3); color: var(--txt3); padding: 2px 7px; border-radius: 10px; border: 1px solid var(--border2); } .side-nav-item.active .side-nav-badge { background: var(--acc2); color: var(--acc); border-color: transparent; } .side-nav-divider { height: 1px; background: var(--border); margin: 6px 4px; } /* Footer */ .side-drawer-footer { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; cursor: pointer; transition: background .12s; } .side-drawer-footer:active { background: var(--bg3); } .side-drawer-footer-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border2); background: var(--panel); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--acc); overflow: hidden; flex-shrink: 0; } .side-drawer-footer-avatar img { width: 100%; height: 100%; object-fit: cover; } .side-drawer-footer-name { font-size: 12px; font-weight: 700; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-drawer-footer-role { font-size: 10px; color: var(--txt3); font-family: 'JetBrains Mono', monospace; margin-top: 1px; text-transform: uppercase; letter-spacing: .5px; }