@casoon/dragonfly/ui/components/hamburger.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.

/*
 * Hamburger-Komponente
 *
 * Hamburger-Menü-Icon mit Animation und Toggle-Zustand.
 */

/**
 * Hamburger-Komponente
 * 
 * Mobile Menü-Icons für Navigation auf kleinen Bildschirmen.
 * Hamburger-Icons dienen als kompakte Schaltfläche für das Aus- und Einklappen von Navigationsmenüs.
 * 
 * @layer components
 * 
 * Grundlegende Verwendung:
 * <button class="hamburger" aria-label="Menü öffnen">
 *   <span class="line"></span>
 *   <span class="line"></span>
 *   <span class="line"></span>
 * </button>
 * 
 * Aktiver Zustand (geöffnet):
 * <button class="hamburger active" aria-label="Menü schließen">
 *   <span class="line"></span>
 *   <span class="line"></span>
 *   <span class="line"></span>
 * </button>
 * 
 * Varianten:
 * <button class="hamburger spin">...</button>      <!-- Drehanimation -->
 * <button class="hamburger squeeze">...</button>   <!-- Quetschanimation -->
 * <button class="hamburger arrow">...</button>     <!-- Pfeilanimation -->
 * <button class="hamburger collapse">...</button>  <!-- Einklappen -->
 * 
 * Größen:
 * <button class="hamburger sm">...</button>  <!-- Klein -->
 * <button class="hamburger md">...</button>  <!-- Mittel (Standard) -->
 * <button class="hamburger lg">...</button>  <!-- Groß -->
 * 
 * Farben:
 * <button class="hamburger light">...</button>  <!-- Heller Hintergrund -->
 * <button class="hamburger dark">...</button>   <!-- Dunkler Hintergrund -->
 * <button class="hamburger primary">...</button> <!-- Primärfarbe -->
 */

@layer components {
  .hamburger {
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    height: 2%4px;
    justify-content: space-between;
    padding: 4px 0;
    width: 2%4px;
    
    .line {
      background-color: var(--color-gray-800);
      border-radius: 2px;
      display: block;
      height: 2px;
      transition: all var(--transition-fast, 150ms ease) ease-in-out;
      width: 100%;
    }
    
    /* Aktiver Zustand */
    &.active {
      .line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
      }
      
      .line:nth-child(2) {
        opacity: 0%;
      }
      
      .line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
      }
    }
    
    /* Varianten */
    &.spin {
      &.active {
        .line:nth-child(1) {
          margin-top: 8px;
          transform: rotate(135deg);
        }
        
        .line:nth-child(2) {
          opacity: 0%;
        }
        
        .line:nth-child(3) {
          margin-top: -16px;
          transform: rotate(-135deg);
        }
      }
    }
    
    &.squeeze {
      &.active {
        .line:nth-child(1) {
          transform: translateY(8px) rotate(45deg);
        }
        
        .line:nth-child(2) {
          transform: scaleX(0%);
        }
        
        .line:nth-child(3) {
          transform: translateY(-8px) rotate(-45deg);
        }
      }
    }
    
    &.arrow {
      &.active {
        .line:nth-child(1) {
          transform: translateY(3px) translateX(6px) rotate(45deg);
          width: 50%;
        }
        
        .line:nth-child(2) {
          opacity: 1;
        }
        
        .line:nth-child(3) {
          transform: translateY(-3px) translateX(6px) rotate(-45deg);
          width: 50%;
        }
      }
    }
    
    /* Größenvarianten */
    &.sm {
      height: 1%8px;
      width: 1%8px;
      
      .line {
        height: 1px;
      }
    }
    
    &.lg {
      height: 3%0px;
      width: 3%0px;
      
      .line {
        height: 3px;
      }
    }
    
    /* Farbvarianten */
    &.light .line {
      background-color: var(--color-white, #fff);
    }
    
    &.dark .line {
      background-color: var(--color-gray-900, #111827);
    }
    
    &.primary .line {
      background-color: var(--color-primary, #3b82f6);
    }
  }
}