main-layout.component.html

<!-- Copyright The Linux Foundation and each contributor to LFX. -->
<!-- SPDX-License-Identifier: MIT -->

<!-- Dev Toolbar (fixed at top) -->
<lfx-dev-toolbar></lfx-dev-toolbar>

<div class="flex min-h-screen" [ngClass]="{ 'pt-[48px]': showDevToolbar() }">
  <!-- Sidebar - Desktop: lens switcher (72px) + nav panel (280px) = 352px total -->
  <div class="hidden lg:flex flex-row flex-shrink-0 fixed left-0 bottom-0 w-[344px] z-[60]" [ngClass]="{ 'top-[48px]': showDevToolbar(), 'top-0': !showDevToolbar() }">
    <!-- Lens Switcher Column (72px) -->
    <div class="w-[64px] flex-shrink-0" data-testid="lens-switcher-column">
      <lfx-lens-switcher></lfx-lens-switcher>
    </div>
    <!-- Nav Panel (280px) -->
    <div class="w-[280px] flex-shrink-0">
      <lfx-sidebar [items]="sidebarItems()" [footerItems]="[]" [showMeSelector]="activeLens() === 'me'" [showProjectSelector]="activeLens() === 'foundation'" [showOrgSelector]="activeLens() === 'org'" [grayed]="false"></lfx-sidebar>
    </div>
  </div>

  <!-- Sidebar - Mobile Drawer -->
  <p-drawer
    [visible]="showMobileSidebar()"
    (visibleChange)="onDrawerVisibilityChange($event)"
    position="left"
    [modal]="true"
    [dismissable]="true"
    [showCloseIcon]="true"
    styleClass="lg:hidden w-86 mobile-sidebar-drawer"
    data-testid="mobile-sidebar-drawer">
    <ng-template #header>
      <div class="flex items-center gap-3">
        <a [routerLink]="['/']" class="flex items-center">
          <img src="/images/logo_lfx.svg" alt="LFX Logo" class="w-auto h-5" />
        </a>
      </div>
    </ng-template>
    <!-- Mobile: lens switcher row + nav -->
    <div class="flex flex-col h-full">
      <div class="flex flex-row gap-2 px-3 py-3 border-b border-gray-100">
        <lfx-lens-switcher></lfx-lens-switcher>
      </div>
      <div class="flex-1 min-h-0">
        <lfx-sidebar
          [items]="sidebarItems()"
          [footerItems]="[]"
          [showMeSelector]="activeLens() === 'me'"
          [showProjectSelector]="activeLens() === 'foundation'"
          [showOrgSelector]="activeLens() === 'org'"
          [grayed]="false"
          [mobile]="true"></lfx-sidebar>
      </div>
    </div>
  </p-drawer>

  <!-- Project Selector Backdrop (z-[50]: visual dim only; close is handled by document:click in project-selector) -->
  @if (projectSelectorOpen()) {
    <div
      class="fixed inset-0 z-[50] bg-black/30 cursor-pointer"
      [ngClass]="{ 'top-[48px]': showDevToolbar(), 'top-0': !showDevToolbar() }"
      (click)="closeProjectSelector()"
      data-testid="project-selector-backdrop"></div>
  }

  <!-- Main Content Area -->
  <main class="flex-1 min-w-0 lg:ml-[344px] flex flex-col" data-testid="main-content">
    <!-- Mobile Menu Button -->
    <div class="lg:hidden sticky z-30 bg-white border-b border-gray-200 px-5 py-3" [ngClass]="{ 'top-[48px]': showDevToolbar(), 'top-0': !showDevToolbar() }">
      <button
        type="button"
        class="flex items-center justify-center w-10 h-10 rounded-lg hover:bg-gray-100 transition-colors"
        (click)="toggleMobileSidebar()"
        aria-label="Toggle menu"
        data-testid="mobile-menu-button">
        <i class="fa-light fa-bars text-gray-600 text-xl"></i>
      </button>
    </div>
    <div class="flex-grow px-10 py-6">
      <router-outlet />
    </div>
    <!-- Footer Component -->
    <lfx-footer class="md:ml-8 p-8 mt-auto"></lfx-footer>
  </main>
</div>