feat: navigation rail

scripts/minify-icon-font.ts

@@ -86,6 +86,7 @@ async function minifyIconFont() {
 
     glyphs.push(...codePoints);
   }
+  glyphs.sort();
 
   const pythonPath = `"${await run('npm config get python')}"`;
   console.log(`Using python from npm config ${pythonPath}`);

src/app/modules/menu/navigation/navigation.html

@@ -13,7 +13,7 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<ion-split-pane contentId="main" when="md">
+<ion-split-pane contentId="main" when="lg">
   <ion-menu
     menuId="main"
     contentId="main"
@@ -58,4 +58,4 @@
   </ion-menu>
   <ion-router-outlet id="main"></ion-router-outlet>
 </ion-split-pane>
-<stapps-navigation-tabs *ngIf="showTabbar"></stapps-navigation-tabs>
+<stapps-navigation-tabs></stapps-navigation-tabs>

src/app/modules/menu/navigation/navigation.scss

@@ -15,8 +15,15 @@
 
 @import '../../../../theme/util/mixins';
 
+stapps-navigation-tabs {
+  @include ion-lg-up {
+    display: none;
+  }
+}
+
 :host {
   ion-split-pane {
+    --side-max-width: 256px;
     margin-bottom: calc(var(--ion-tabbar-height) + env(safe-area-inset-bottom));
 
     @include phoneLandscape {
@@ -25,6 +32,11 @@
 
     @include ion-md-up {
       margin-bottom: 0;
+      margin-left: var(--navigation-rail-width);
+    }
+
+    @include ion-lg-up {
+      margin-left: 0;
     }
   }
 

src/app/modules/menu/navigation/tabs.component.scss

@@ -12,6 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
+@import '../../../../theme/util/mixins';
 
 :host {
   position: absolute;
@@ -19,51 +20,41 @@
   left: 0;
   right: 0;
   z-index: 100;
+
+  .menu-button {
+    display: none;
+  }
+
+  @include ion-md-up {
+    right: unset;
+    top: 0;
+
+    .menu-button {
+      display: revert;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      margin-top: var(--spacing-xxl);
+    }
+
+    ion-tab-bar {
+      border-top: unset;
+      position: relative;
+      border-right: var(--border);
+      flex-direction: column;
+      gap: var(--spacing-md);
+      width: var(--navigation-rail-width);
+      height: 100vh;
+    }
+
+    ion-tab-button {
+      flex: unset;
+      height: var(--navigation-rail-item-height);
+    }
+  }
 }
 
 .tab-selected ::ng-deep stapps-icon {
   --fill: 1;
 }
-
-/*:host {
-  display: flex;
-  flex-direction: row;
-  background: var(--ion-color-primary-contrast);
-  justify-content: space-between;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  max-height: calc(var(--ion-tabbar-height) + env(safe-area-inset-bottom));
-  padding-bottom: env(safe-area-inset-bottom);
-
-  a {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 25%;
-    align-items: center;
-    padding: var(--spacing-xs);
-
-    color: var(--ion-color-medium);
-    background: var(--ion-color-primary-contrast);
-    text-decoration: none;
-
-    &.active-root-link {
-      color: var(--ion-color-medium-contrast);
-
-      ion-icon ::ng-deep stapps-icon {
-        --fill: 1;
-      }
-    }
-
-    ion-icon {
-      font-size: 28px;
-    }
-
-    ion-label {
-      text-transform: uppercase;
-      font-size: var(--font-size-xs);
-      font-weight: var(--font-weight-semi-bold);
-    }
-  }
-}*/

src/app/modules/menu/navigation/tabs.template.html

@@ -34,6 +34,11 @@
 -->
 
 <ion-tab-bar slot="bottom" [selectedTab]="selectedTab">
+  <ion-menu-toggle>
+    <ion-tab-button class="menu-button">
+      <ion-icon name="menu"></ion-icon>
+    </ion-tab-button>
+  </ion-menu-toggle>
   <ion-tab-button
     *ngFor="let category of menu; first as isFirst"
     [rootLink]="category.route"

src/theme/variables.scss

@@ -148,6 +148,8 @@
   --border-radius-default: 8px;
 
   --header-spacing-bottom: 70px;
+  --navigation-rail-width: 80px;
+  --navigation-rail-item-height: 56px;
 
   --icon-stroke-width: 1.2;