<ng-container *transloco="let t; prefix: 'layout.menu'">
<div class="menu-container">
  <div>
    <div class="home-menu-section">
      <ul class="layout-menu">
        @if (homeMenu$ | async; as homeMenu) {
          @for (item of homeMenu; track item.label; let i = $index) {
            @if (!item.separator) {
              <li app-menuitem [item]="item" [index]="i" [root]="true" menuKey="home"></li>
            }
          }
        }
      </ul>
      <i class="pi pi-objects-column sidebar-width-btn"
         (click)="widthPanel.toggle($event)"></i>
      <p-popover #widthPanel appendTo="body">
        <div class="sidebar-width-popover">
          <label class="sidebar-width-popover-label">{{ sidebarWidth }}px</label>
          <p-slider
            [(ngModel)]="sidebarWidth"
            [min]="175"
            [max]="400"
            [step]="1"
            (onChange)="onSidebarWidthChange()"
            (onSlideEnd)="saveSidebarWidth()">
          </p-slider>
        </div>
      </p-popover>
    </div>

    <ul class="layout-menu">
      @if (libraryMenu$ | async; as libraryMenu) {
        @for (item of libraryMenu; track item.label; let i = $index) {
          @if (!item.separator) {
            <li app-menuitem [item]="item" [index]="i" [root]="true" menuKey="library"></li>
          }
        }
      }
    </ul>

    <ul class="layout-menu">
      @if (shelfMenu$ | async; as shelfMenu) {
        @for (item of shelfMenu; track item.label; let i = $index) {
          @if (!item.separator) {
            <li app-menuitem [item]="item" [index]="i" [root]="true" menuKey="shelf"></li>
          }
        }
      }
    </ul>

    <ul class="layout-menu">
      @if (magicShelfMenu$ | async; as shelfMenu) {
        @for (item of shelfMenu; track item.label; let i = $index) {
          @if (!item.separator) {
            <li app-menuitem [item]="item" [index]="i" [root]="true" menuKey="magicShelf"></li>
          }
        }
      }
    </ul>
  </div>

  @if (versionInfo) {
    <div class="version-info" style="margin-top: auto;">
      <div class="version-text">
        @if (isSemanticVersion(versionInfo.current)) {
          <a
            [href]="getVersionUrl(versionInfo.current)"
            target="_blank"
            rel="noopener noreferrer"
            class="version-link"
            >
            {{ versionInfo.current }}
          </a>
        } @else {
          <span class="version-label">{{ versionInfo.current }}</span>
        }
      </div>
      @if (isSemanticVersion(versionInfo.current) && versionInfo.latest && versionInfo.latest !== versionInfo.current) {
        <div>
          <a
            (click)="openChangelogDialog()"
            class="update-link"
            >
            {{ t('update') }}
          </a>
        </div>
      }
    </div>
  }
</div>
</ng-container>
