Layout

Sidebar

The .quanta-sidebar component provides a fixed navigation panel. Supports expanded, collapsed, and hidden states, with dark-mode and responsive adjustments.

Basic Usage

Wrap your page in a .quanta-with-sidebar and include the sidebar and content areas:

<div class="quanta-with-sidebar">
  <aside id="sidebar" class="quanta-sidebar">
    <div class="quanta-sidebar-header">My App</div>
    <nav class="quanta-sidebar-nav">
      <a href="#home" class="quanta-sidebar-link active">Home</a>
      <a href="#profile" class="quanta-sidebar-link">Profile</a>
      <a href="#settings" class="quanta-sidebar-link">Settings</a>
    </nav>
    <div class="quanta-sidebar-footer">© 2025 My Company</div>
  </aside>
  <div class="quanta-sidebar-content">
    <!-- Page content here -->
  </div>
</div>

Collapsed Mode

Add .collapsed to reduce the sidebar width to icons-only, without hiding it:

<aside class="quanta-sidebar collapsed">…</aside>

Responsive Behavior

On screens ≤768px, the sidebar is hidden by default. Toggle it into view by adding .show:

<aside class="quanta-sidebar show">…</aside>

JavaScript Toggle

Use a simple JS function to toggle the sidebar’s visibility on click:

function toggleSidebar() {
  const sidebar = document.getElementById('sidebar');
  sidebar.classList.toggle('show');
}

Attach this to a button (e.g. with class .quanta-sidebar-toggle) placed anywhere in your UI.