Editable header

<header-context (loaded)="hdr = $event"/>

  <style>
    .header-container {
      display: flex;
      align-items: center;
      padding: 0 1.5rem;
      height: 64px;
      background: #ffffff;
      border-bottom: 1px solid #eaeaea;
      gap: 20px;
      font-family: sans-serif;
    }

    /* Hamburger Button Styling */
    .burger-btn {
      display: none; /* Hidden by default */
      flex-direction: column;
      justify-content: space-around;
      width: 24px;
      height: 18px;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
      z-index: 10;
    }

    .burger-line {
      width: 24px;
      height: 2px;
      background-color: #333;
      border-radius: 10px;
    }

    .admin-badge {
      background: #c70e01;
      color: white;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: 8px;
      font-weight: bold;
    }

    /* Floating Menu Overlay */
    .drawer-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(2px);
      z-index: 999;
    }

    .drawer-content {
      position: fixed;
      top: 0;
      left: 0;
      width: 300px;
      height: 100%;
      background: white;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      box-shadow: 5px 0 15px rgba(0,0,0,0.1);
      animation: slideIn 0.25s ease-out;
    }

    @keyframes slideIn {
      from { transform: translateX(-100%); }
      to { transform: translateX(0); }
    }

    .drawer-header {
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
    }

    .drawer-link {
      padding: 16px 20px;
      border-bottom: 1px solid #f9f9f9;
      text-decoration: none;
      color: #333;
      font-weight: 500;
    }

    /* Responsive Logic */
    @media (max-width: 850px) {
      .desktop-only { display: none !important; }
      .burger-btn { display: flex !important; }
    }
  </style>

  <if [condition]="hdr">
    <div class="header-container">
      
      <div class="burger-btn" (click)="hdr.menuOpen = true">
        <div class="burger-line"/>
        <div class="burger-line"/>
        <div class="burger-line"/>
      </div>

      <a [href]="hdr.navigation.homeUrl" style="display: flex; align-items: center;">
        <img [src]="hdr.branding.logoUrl" style="height: 30px;"/>
      </a>

      <div class="desktop-only" style="display: flex; gap: 24px; margin-left: 10px;">
        <loop [data]="hdr.navigation.entries" let="navItem">
          <a [href]="navItem.url" style="text-decoration: none; color: #666; font-size: 14px; font-weight: 500;">
            {{ navItem.title }}
          </a>
        </loop>
      </div>

      <div style="flex: 1;"/>

      <div style="display: flex; align-items: center; gap: 16px;">
        <div class="desktop-only" style="font-size: 14px;">
          <if [condition]="hdr.user.isLoggedIn">
            <span style="color: #444;">{{ hdr.user.name }}</span>
            <if [condition]="hdr.user.isAdmin">
              <span class="admin-badge">ADMIN</span>
            </if>
          </if>
        </div>
        <cart-button-1/>
      </div>

      <if [condition]="hdr.menuOpen">
        <div class="drawer-overlay" (click)="hdr.menuOpen = false"/>
        
        <div class="drawer-content">
          <div class="drawer-header">
            <img [src]="hdr.branding.logoUrl" style="height: 24px;"/>
            <div (click)="hdr.menuOpen = false" style="font-size: 28px; cursor: pointer; line-height: 1;">
              &times;
            </div>
          </div>

          <div style="display: flex; flex-direction: column; overflow-y: auto;">
            <loop [data]="hdr.navigation.entries" let="mItem">
              <a [href]="mItem.url" class="drawer-link" (click)="hdr.menuOpen = false">
                {{ mItem.title }}
              </a>
            </loop>
          </div>

          <if [condition]="hdr.user.isLoggedIn">
            <div style="margin-top: auto; padding: 20px; background: #fcfcfc; border-top: 1px solid #eee;">
              <div style="color: #888; font-size: 12px; margin-bottom: 4px;">Signed in as</div>
              <div style="font-weight: 600; display: flex; align-items: center;">
                {{ hdr.user.name }}
                <if [condition]="hdr.user.isAdmin"><span class="admin-badge">ADMIN</span></if>
              </div>
            </div>
          </if>
        </div>
      </if>

    </div>
  </if>