NavSidebar Navigation

---
/**
 * NavSidebar
 * Verticale zijbalk navigatie. Geschikt voor dashboards en portals.
 */
interface Props {
  logo: string;
  links: { label: string; href: string; icon?: string; active?: boolean }[];
  bottomLinks?: { label: string; href: string; icon?: string }[];
  collapsed?: boolean;
}
const { logo, links, bottomLinks = [], collapsed = false } = Astro.props;
---
<aside class={`nsb${collapsed ? ' nsb--collapsed' : ''}`}>
  <div class="nsb-logo-wrap">
    <a href="/" class="nsb-logo">{collapsed ? logo.charAt(0) : logo}</a>
  </div>
  <nav class="nsb-nav">
    <ul class="nsb-links">
      {links.map(l => (
        <li>
          <a href={l.href} class={`nsb-link${l.active ? ' nsb-link--active' : ''}`}>
            {l.icon && <span class="nsb-icon">{l.icon}</span>}
            {!collapsed && <span class="nsb-label">{l.label}</span>}
          </a>
        </li>
      ))}
    </ul>
    {bottomLinks.length > 0 && (
      <ul class="nsb-links nsb-links--bottom">
        {bottomLinks.map(l => (
          <li>
            <a href={l.href} class="nsb-link">
              {l.icon && <span class="nsb-icon">{l.icon}</span>}
              {!collapsed && <span class="nsb-label">{l.label}</span>}
            </a>
          </li>
        ))}
      </ul>
    )}
  </nav>
</aside>
<style>
  .nsb { width: 240px; height: 100vh; background: #fff; border-right: 1px solid #e5e7eb; display: flex; flex-direction: column; position: sticky; top: 0; }
  .nsb--collapsed { width: 64px; }
  .nsb-logo-wrap { padding: 1.25rem 1rem; border-bottom: 1px solid #f1f5f9; }
  .nsb-logo { font-weight: 800; font-size: 1rem; color: #0a0a0a; text-decoration: none; letter-spacing: -0.02em; }
  .nsb-nav { flex: 1; display: flex; flex-direction: column; padding: 0.75rem 0.5rem; }
  .nsb-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.125rem; }
  .nsb-links--bottom { margin-top: auto; border-top: 1px solid #f1f5f9; padding-top: 0.75rem; }
  .nsb-link { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; font-weight: 500; color: #374151; text-decoration: none; padding: 0.625rem 0.875rem; border-radius: 0.5rem; transition: all 0.15s; }
  .nsb-link:hover { background: #f8fafc; color: #0a0a0a; }
  .nsb-link--active { background: rgba(99,102,241,0.08); color: var(--color-accent,#6366f1); font-weight: 600; }
  .nsb-icon { font-size: 1.0625rem; flex-shrink: 0; }
</style>