<!--
~ Copyright (C) 2023 StApps
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
~
~ This program is distributed in the hope that it will be useful, but WITHOUT
~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
~ more details.
~
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see <https://www.gnu.org/licenses/>.
-->

<stapps-offline-notice></stapps-offline-notice>
<ion-split-pane contentId="main" when="xl">
  <ion-menu menuId="main" contentId="main" type="overlay" side="start" swipe-gesture="false">
    <ion-header>
      <ion-toolbar color="primary" mode="ios">
        <ion-buttons slot="start"></ion-buttons>
        <ion-title class="clickable" rootLink="/">
          <ion-img src="assets/imgs/header.svg" class="logo"></ion-img>
        </ion-title>
      </ion-toolbar>
    </ion-header>
    @if (menu) {
      <ion-content>
        @for (category of menu; track category; let isFirst = $first) {
          <ion-list>
            @if (category.title !== '') {
              <ion-item
                [rootLink]="category.route"
                [redirectedFrom]="isFirst ? '/' : category.route"
                lines="none"
                class="menu-category"
              >
                <ion-icon slot="end" [name]="$any(category.icon)"></ion-icon>
                <ion-label> {{ category.translations[language]?.title | titlecase }} </ion-label>
              </ion-item>
            }
            @for (item of category.items; track item) {
              <ion-item [rootLink]="item.route" [redirectedFrom]="item.route">
                <ion-icon slot="end" [name]="$any(item.icon)"></ion-icon>
                <ion-label> {{ item.translations[language]?.title | titlecase }} </ion-label>
              </ion-item>
            }
          </ion-list>
        }
      </ion-content>
    }
  </ion-menu>
  <ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane>
<stapps-navigation-tabs></stapps-navigation-tabs>
