diff --git a/app.py b/app.py index bf055c5..e393693 100644 --- a/app.py +++ b/app.py @@ -132,7 +132,7 @@ def layout(title: str, body: str) -> str: :root{{--bg:#0b1020;--panel:#070c1b;--panel2:#0b1222;--card:#ffffff;--txt:#0f172a;--muted:#64748b;--acc:#0ea5e9;--acc2:#2563eb;--ok:#14b8a6;--border:#e2e8f0}} *{{box-sizing:border-box}} body{{font-family:Inter,system-ui,Arial;margin:0;background:#f1f5f9;color:var(--txt);display:flex;min-height:100vh}} -nav{{width:236px;background:linear-gradient(180deg,#050a17,#0a1329);color:#e2e8f0;border-right:1px solid #0f172a;padding:14px 10px;position:sticky;top:0;height:100vh;overflow:auto}} +nav{{width:236px;background:linear-gradient(180deg,#050a17,#0a1329);color:#e2e8f0;border-right:1px solid #0f172a;padding:14px 10px;position:sticky;top:0;height:100vh;overflow:auto;z-index:60}} .brand{{font-weight:800;letter-spacing:.2px;margin:4px 8px 12px 8px;color:#c7d2fe}} .navsection{{margin:12px 8px 6px 8px;color:#94a3b8;font-size:12px;text-transform:uppercase;letter-spacing:.08em}} nav a{{display:flex;gap:10px;align-items:center;color:#e2e8f0;text-decoration:none;padding:10px 10px;border-radius:10px;margin:4px 6px;border:1px solid transparent}} @@ -140,6 +140,8 @@ nav a:hover{{background:#0f1b36;border-color:#1e2a4a}} .app{{flex:1;display:flex;flex-direction:column;min-width:0}} .topbar{{height:56px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:10px;position:sticky;top:0;z-index:10}} .topbar h1{{font-size:18px;margin:0;font-weight:700}} +.menu-btn{{display:none;border:1px solid #cbd5e1;background:#fff;color:#0f172a;border-radius:8px;padding:6px 10px;font-size:18px;line-height:1}} +.nav-backdrop{{display:none;position:fixed;inset:0;background:rgba(2,6,23,.35);z-index:55}} .topbar .right{{margin-left:auto;display:flex;gap:8px;color:#64748b}} main{{padding:14px;max-width:1400px}} .card{{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;margin:10px 0;box-shadow:0 2px 10px rgba(15,23,42,.04)}} @@ -167,12 +169,14 @@ small{{color:var(--muted)}} }} @media (max-width:760px){{ body{{display:block}} - nav{{position:fixed;left:0;right:0;bottom:0;top:auto;height:64px;width:100%;display:flex;align-items:center;overflow:auto;white-space:nowrap;padding:6px 8px;z-index:50}} - .brand,.navsection{{display:none}} - nav a{{margin:0 4px;min-width:auto;padding:8px 10px}} + nav{{position:fixed;left:0;top:0;bottom:0;height:100vh;width:236px;transform:translateX(-105%);transition:transform .2s ease;box-shadow:0 18px 40px rgba(0,0,0,.35)}} + body.nav-open nav{{transform:translateX(0)}} + body.nav-open .nav-backdrop{{display:block}} + .brand,.navsection{{display:block}} + nav a{{margin:4px 6px;padding:10px 10px}} nav a span{{display:inline}} - nav a span:last-child{{display:none}} - .app{{padding-bottom:72px}} + .menu-btn{{display:inline-block}} + .app{{padding-bottom:0}} .topbar{{position:sticky;top:0}} main{{padding:10px 8px}} .row{{flex-direction:column;align-items:stretch}} @@ -188,6 +192,8 @@ small{{color:var(--muted)}}