oggui/ogWebconsole/src/app/layout/sidebar/sidebar.component.html

<mat-nav-list class="sidebar-content">
  <div disabled class="user-info">
    <div class="user-info-wrapper" matTooltipShowDelay="1000">
      <img ngSrc="assets/images/logo.png" alt="Logo" class="user-logo" height="500" width="500"/>
      <span class="user-logged">
      {{ 'welcomeUser' | translate:{username: username} }}
      </span>
    </div>
  </div>
  <mat-divider class="white-divider"></mat-divider>

  <mat-list-item routerLink="/groups" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_GROUPS' | translate }}"
    matTooltipShowDelay="1000">
    <span class="entry">
      <mat-icon class="icon">apartment</mat-icon>
      <span>{{ 'groups' | translate }}</span>
    </span>
  </mat-list-item>

  <mat-list-item (click)="toggleCommandSub()" matTooltip="{{ 'TOOLTIP_ACTIONS' | translate }}"
    matTooltipShowDelay="1000">
    <span class="entry">
      <mat-icon class="icon">playlist_play</mat-icon>
      <span>{{ 'actions' | translate }}</span>
    </span>
  </mat-list-item>

  <!-- Submenu items for commands -->
  <mat-nav-list *ngIf="showCommandSub" style="padding-left: 20px;">
    <mat-list-item routerLink="/commands" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_COMMANDS' | translate }}"
      matTooltipShowDelay="1000">
      <span class="entry">
        <mat-icon class="icon">chevron_right</mat-icon>
        <span>{{ 'commands' | translate }}</span>
      </span>
    </mat-list-item>
    <mat-list-item routerLink="/commands-groups" (click)="onItemClick()"
      matTooltip="{{ 'TOOLTIP_COMMAND_GROUPS' | translate }}" matTooltipShowDelay="1000">
      <span class="entry">
        <mat-icon class="icon">chevron_right</mat-icon>
        <span>{{ 'commandGroups' | translate }}</span>
      </span>
    </mat-list-item>
    <mat-list-item routerLink="/commands-task" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_TASKS' | translate }}"
      matTooltipShowDelay="1000">
      <span class="entry">
        <mat-icon class="icon">chevron_right</mat-icon>
        <span>{{ 'tasks' | translate }}</span>
      </span>
    </mat-list-item>
  </mat-nav-list>

  <mat-list-item routerLink="/subnets" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_SUBNETS' | translate }}"
    matTooltipShowDelay="1000">
    <span class="entry">
      <mat-icon class="icon">lan</mat-icon>
      <span> {{ 'subnets' | translate }}</span>
    </span>
  </mat-list-item>

  <mat-list-item (click)="toggleOgBootSub()" matTooltip="{{ 'TOOLTIP_BOOT' | translate }}"
    matTooltipShowDelay="1000">
    <span class="entry">
      <mat-icon class="icon">desktop_windows</mat-icon>
      <span>{{ 'boot' | translate }}</span>
    </span>
  </mat-list-item>

  <!-- Submenu items for Boot -->
  <mat-nav-list *ngIf="showOgBootSub" style="padding-left: 20px;">
    <mat-list-item routerLink="/pxe-images" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_PXE_IMAGES' | translate }}"
      matTooltipShowDelay="1000">
      <span class="entry">
        <mat-icon class="icon">album</mat-icon>
        <span>{{ 'ogLive' | translate }}</span>
      </span>
    </mat-list-item>
    <mat-list-item routerLink="/pxe" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_PXE_TEMPLATES' | translate }}"
      matTooltipShowDelay="1000">
      <span class="entry">
        <mat-icon class="icon">assignment</mat-icon>
        <span>{{ 'pxeTemplates' | translate }}</span>
      </span>
    </mat-list-item>
    <mat-list-item routerLink="/pxe-boot-file" (click)="onItemClick()"
      matTooltip="{{ 'TOOLTIP_PXE_BOOT_FILES' | translate }}" matTooltipShowDelay="1000">
      <span class="entry">
        <mat-icon class="icon">save</mat-icon>
        <span>{{ 'pxeBootFiles' | translate }}</span>
      </span>
    </mat-list-item>
  </mat-nav-list>

  <mat-list-item routerLink="/calendars" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_CALENDARS' | translate }}"
    matTooltipShowDelay="1000">
    <span class="entry">
      <mat-icon class="icon">calendar_month</mat-icon>
      <span>{{ 'calendars' | translate }}</span>
    </span>
  </mat-list-item>

  <mat-list-item (click)="toggleSoftwareSub()" matTooltip="{{ 'TOOLTIP_SOFTWARE' | translate }}"
    matTooltipShowDelay="1000">
    <span class="entry">
      <mat-icon class="icon">terminal</mat-icon>
      <span>{{ 'software' | translate }}</span>
    </span>
  </mat-list-item>

  <!-- Submenu items for Software -->
  <mat-nav-list *ngIf="showSoftwareSub" style="padding-left: 20px;">
    <mat-list-item routerLink="/software" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_SOFTWARE_LIST' | translate }}"
      matTooltipShowDelay="1000">
      <span class="entry">
        <mat-icon class="icon">list</mat-icon>
        <span>{{ 'softwareList' | translate }}</span>
      </span>
    </mat-list-item>
    <mat-list-item routerLink="/software-profiles" (click)="onItemClick()"
      matTooltip="{{ 'TOOLTIP_SOFTWARE_PROFILES' | translate }}" matTooltipShowDelay="1000">
      <span class="entry">
        <mat-icon class="icon">folder_shared</mat-icon>
        <span>{{ 'softwareProfiles' | translate }}</span>
      </span>
    </mat-list-item>
    <mat-list-item routerLink="/operative-systems" (click)="onItemClick()"
      matTooltip="{{ 'TOOLTIP_OPERATIVE_SYSTEMS' | translate }}" matTooltipShowDelay="1000">
      <span class="entry">
        <mat-icon class="icon">terminal</mat-icon>
        <span>{{ 'operativeSystems' | translate }}</span>
      </span>
    </mat-list-item>
  </mat-nav-list>

  <mat-list-item routerLink="/repositories" (click)="onItemClick()"
    matTooltip="{{ 'TOOLTIP_REPOSITORIES' | translate }}" matTooltipShowDelay="1000">
    <span class="entry">
      <mat-icon class="icon">warehouse</mat-icon>
      <span>{{ 'repositories' | translate }}</span>
    </span>
  </mat-list-item>

  <mat-list-item routerLink="/menus" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_MENUS' | translate }}"
    matTooltipShowDelay="1000">
    <span class="entry">
      <mat-icon class="icon">list</mat-icon>
      <span>{{ 'menus' | translate }}</span>
    </span>
  </mat-list-item>
</mat-nav-list>