<aside class="sidebar" style="position:fixed;top:var(--hdr-h);left:0;width:var(--sb-w);height:calc(100vh - var(--hdr-h));background:var(--bg-nav);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:50;overflow-y:auto">
  <div class="sb-brand" style="padding:1rem 1.1rem;border-bottom:1px solid var(--border)">
    <h2 style="font-size:.82rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:.4rem;margin:0">
      <span class="brand-dot" style="width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse-glow 2s ease-in-out infinite"></span>
      Mek-Tech
    </h2>
    <p style="font-size:.6rem;color:var(--text-dim);margin:.15rem 0 0">Consultant Platform</p>
  </div>
  <nav class="sb-nav" style="flex:1;padding:.4rem 0">
    <% (typeof navSections !== 'undefined' ? navSections : []).forEach(function(section) { %>
      <div class="sb-sep" style="font-size:.55rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.6px;padding:.6rem 1rem .2rem;font-weight:600"><%= section.label %></div>
      <% section.items.forEach(function(item) { %>
        <a href="<%= activeClientId && !item.href.includes('client_id') && item.href !== '/' && !item.href.startsWith('/clients/') && !item.href.startsWith('/settings') && !item.href.startsWith('/ai') ? item.href + (item.href.includes('?') ? '&' : '?') + 'client_id=' + activeClientId : item.href %>" class="sb-item<%= item.active ? ' active' : '' %>" style="display:flex;align-items:center;gap:.55rem;padding:.5rem .9rem;margin:1px .45rem;border-radius:8px;font-size:.78rem;color:var(--text-muted);text-decoration:none;transition:all .18s">
          <span class="sb-icon" style="width:20px;display:flex;align-items:center;justify-content:center"><i data-lucide="<%= item.icon %>"></i></span>
          <span><%= item.label %></span>
        </a>
      <% }); %>
    <% }); %>
  </nav>
</aside>
