@casoon/dragonfly/ui/regions/sidebar.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/*
 * Sidebar Module
 *
 * Layout rules for sidebar navigation or contextual content. Uses grid column logic and Container Queries.
 */

/**
 * Sidebar Component
 * 
 * Sidebar navigation and content for layouts with side columns.
 * Sidebars serve as additional navigation areas or for displaying contextual information.
 * 
 * @layer components.sidebar
 * 
 * Basic Usage:
 * <aside class="sidebar">
 *   <nav class="nav">
 *     <ul class="links">
 *       <li><a href="#" class="link">Dashboard</a></li>
 *       <li><a href="#" class="link">Settings</a></li>
 *       <li><a href="#" class="link">Profile</a></li>
 *     </ul>
 *   </nav>
 * </aside>
 * 
 * Variants:
 * <aside class="sidebar left">...</aside>
 * <aside class="sidebar right">...</aside>
 * <aside class="sidebar collapsed">...</aside>
 */

@layer components {
  .sidebar {
    background-color: var(--color-neutral-100, #f3f4f6);
    grid-column: span 3;
    padding-block: var(--space-4);
    padding-inline: var(--space-3);
    
    /* Header-Bereich */
    .header {
      border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
      margin-bottom: var(--space-4);
      padding-bottom: var(--space-2);
      
      .title {
        color: var(--color-neutral-900, #111827);
        font-size: var(--text-lg);
        font-weight: var(--font-medium, 500);
        margin: 0;
      }
    }
    
    /* Navigation */
    .nav {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      
      .links {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        list-style: none;
        margin: 0;
        padding: 0;
      }
      
      .link {
        color: var(--color-neutral-700, #374151);
        display: block;
        padding: var(--space-2);
        text-decoration: none;
        transition: color 150ms ease;
        
        &:hover {
          color: var(--color-primary, #3b82f6);
        }
        
        &.active {
          color: var(--color-primary, #3b82f6);
          font-weight: var(--font-semibold, 600);
        }
      }
    }
    
    /* Menu list */
    .menu {
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    /* Menu items */
    .item {
      width: 100%;
      
      &.active {
        > .link {
          background-color: color-mix(in srgb, var(--color-primary-500) 10, transparent);
          color: var(--color-primary, #3b82f6);
          font-weight: var(--font-medium, 500);
        }
      }
    }
    
    /* Menu links */
    .link {
      border-radius: var(--radius-md, 0.375rem);
      color: var(--color-neutral-700, #374151);
      display: block;
      padding: var(--space-2) var(--space-3);
      text-decoration: none;
      transition: background-color 150ms ease, color 150ms ease;
      
      &:hover {
        background-color: var(--color-neutral-200, #e5e7eb);
        color: var(--color-neutral-900, #111827);
      }
    }
    
    /* Submenu */
    .submenu {
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
      list-style: none;
      margin: var(--space-1) 0 0 0;
      padding-left: var(--space-4);
      
      .link {
        font-size: var(--text-sm, 0.875rem);
        padding: var(--space-1) var(--space-3);
      }
    }
    
    /* Toggle button for collapse */
    .toggle {
      background: none;
      border: none;
      cursor: pointer;
      display: none;
      
      @media (max-width: 768px) {
        display: block;
      }
    }
    
    /* Content (for collapse) */
    .content {
      width: 100%;
    }
    
    /* Variants */
    &.left {
      grid-column: 1 / span 3;
    }
    
    &.right {
      order: 2;
    }
    
    &.light {
      background-color: var(--color-neutral-50);
    }
    
    &.dark {
      background-color: var(--color-neutral-800, #1f2937);
      color: var(--color-neutral-100, #f3f4f6);
      
      .title {
        color: var(--color-white, #fff);
      }
      
      .link {
        color: var(--color-neutral-300, #d1d5db);
        
        &:hover {
          background-color: var(--color-neutral-700, #374151);
          color: var(--color-white, #fff);
        }
      }
      
      .item.active > .link {
        background-color: color-mix(in srgb, var(--color-primary-500) 30, transparent);
      }
    }
    
    /* Collapsible-Verhalten */
    &.collapsible {
      @media (max-width: 768px) {
        .toggle {
          display: block;
        }
        
        .content {
          display: none;
          
          &.open {
            display: block;
          }
        }
      }
    }
    
    /* Responsive adjustments */
    @container layout (max-width: 768px) {
      grid-column: span 12;
      order: 2;
    }
  }
}