feat(кабинет): мобильный адаптив — гамбургер-меню + выезжающий сайдбар (Telegram на телефоне)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
wasrusgen 2026-06-01 21:23:06 +03:00
parent 509ce225b9
commit 11486ce8a8

View File

@ -172,10 +172,36 @@ body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);displ
.exp-d{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.exp-btns{display:flex;flex-wrap:wrap;gap:10px}
@media print{.sb,.hdr,.pb,.hero,.nav,.exp-bar,.modal,.mic,.inp-bar{display:none!important}.main,.sv,.scroll,.pad{display:block!important;overflow:visible!important;height:auto!important;margin:0!important;padding:0!important}body{background:#fff}}
/* ── Мобильный (Telegram на телефоне) ── */
.hdr-burger{display:none;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;padding:0 4px;line-height:1;flex-shrink:0}
.sb-backdrop{display:none;position:fixed;inset:54px 0 0 0;background:rgba(0,0,0,.55);z-index:40}
.sb-backdrop.show{display:block}
@media(max-width:680px){
.hdr{padding:0 12px;gap:8px}
.hdr-burger{display:block}
.hdr-t{font-size:12px}
.hdr-client{display:none}
.elena-nm{display:none}
.sb{position:fixed;left:-260px;top:54px;bottom:0;z-index:50;width:240px;transition:left .25s ease;box-shadow:3px 0 18px rgba(0,0,0,.45)}
.sb.open{left:0}
.main{width:100%}
.hero{padding:13px 15px;gap:11px}
.hero-ic{width:38px;height:38px;font-size:17px}
.hero-h{font-size:16px}
.hero-d{font-size:12px}
.chat{padding:16px 13px;gap:11px}
.msg{max-width:90%}
.bb{font-size:13.5px}
.inbar{padding:10px 13px;gap:8px}
.icon-btn{width:40px;height:40px}
.run-card{padding:20px 16px;margin:8px 14px 16px}
.exp-bar{padding:16px 14px}
}
</style>
</head>
<body>
<header class="hdr">
<button class="hdr-burger" onclick="toggleSb()" aria-label="Меню"></button>
<div class="hdr-ic">@</div>
<div class="hdr-t">wasrusgen1<span class="hdr-sep"></span><b>КОНСАЛТИНГ</b></div>
<div class="hdr-client" id="hdrClient"></div>
@ -226,7 +252,8 @@ body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);displ
</div>
</div>
<div class="layout">
<aside class="sb">
<div class="sb-backdrop" id="sbBackdrop" onclick="toggleSb()"></div>
<aside class="sb" id="sbNav">
<div class="sb-nav">
<div class="si" id="si0" onclick="go(0)" style="margin-bottom:4px"><div class="si-num" style="background:rgba(255,255,255,.1);color:rgba(255,255,255,.7)">👤</div><div class="si-body"><div class="si-name">Профиль компании</div><div class="si-sub">О вашей деятельности</div></div></div>
<div style="height:1px;background:rgba(255,255,255,.06);margin:4px 18px 8px"></div>
@ -311,8 +338,17 @@ const PCTS={1:20,2:40,3:60,4:80,5:100};
function esc(s){return (s||"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}
function fmt(s){return esc(s).replace(/\*\*(.+?)\*\*/g,"<strong>$1</strong>")}
function toggleSb(){
const sb=document.getElementById('sbNav'), bd=document.getElementById('sbBackdrop');
const open=sb.classList.toggle('open'); bd.classList.toggle('show',open);
}
function closeSb(){
const sb=document.getElementById('sbNav'), bd=document.getElementById('sbBackdrop');
if(sb)sb.classList.remove('open'); if(bd)bd.classList.remove('show');
}
function go(n){
if(document.getElementById('si'+n).classList.contains('locked'))return;
if(window.innerWidth<=680)closeSb();
cur=n;
document.querySelectorAll('.sv').forEach(s=>s.classList.remove('active'));
document.getElementById('sv'+n).classList.add('active');