<aside class="sidebar" id="sidebar">
  <button class="sidebar-toggle" onclick="toggleSidebar()">☰</button>
  <nav class="sidebar-nav">
    <a href="#" class="nav-item active">
      <span class="nav-icon">⊞</span>
      <span class="nav-label">Dashboard</span>
    </a>
    <a href="#" class="nav-item">
      <span class="nav-icon">◈</span>
      <span class="nav-label">Kategoriler</span>
    </a>
  </nav>
</aside>

<style>
.sidebar {
  width: 240px; height: 100vh; position: sticky; top: 0;
  border-right: 1px solid var(--border); overflow: hidden;
  transition: width 0.25s cubic-bezier(0.16,1,0.3,1);
}
.sidebar.collapsed { width: 64px; }
.nav-item { display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 1rem; border-radius: 0.5rem; }
.sidebar.collapsed .nav-label { opacity: 0; width: 0; }
</style>