feat(#228): replace tabs with menu

deckgo · Oct 21, 2019 · 328f0ae · 328f0ae
1 parent 6d79344
commit 328f0ae
Show file tree

Hide file tree

Showing 14 changed files with 158 additions and 96 deletions.
diff --git a/remote/src/app/app-root.tsx b/remote/src/app/app-root.tsx
@@ -33,25 +33,37 @@ export class AppRoot {
         return (
             <ion-app>
                 <ion-router useHash={false}>
-                    <ion-route-redirect from="/" to="/remote"/>
-
-                    <ion-route component="app-tabs">
-                        <ion-route url="/remote" component="tab-home">
-                            <ion-route component="app-remote"></ion-route>
-                            <ion-route url="/:room" component="app-remote"></ion-route>
-                        </ion-route>
-
-                        <ion-route url="/timer" component="tab-timer">
-                            <ion-route component="app-timer"></ion-route>
-                        </ion-route>
-
-                        <ion-route url="/about" component="tab-about">
-                            <ion-route component="app-about"></ion-route>
-                        </ion-route>
-                    </ion-route>
+                    <ion-route url="/" component="app-remote"></ion-route>
+                    <ion-route url="/remote" component="app-remote"></ion-route>
+                    <ion-route url="/remote/:room" component="app-remote"></ion-route>
+
+                    <ion-route url="/timer" component="app-timer"></ion-route>
+
+                    <ion-route url="/about" component="app-about"></ion-route>
                 </ion-router>
 
-                <ion-router-outlet animated={true}></ion-router-outlet>
+                <ion-menu side="start" type="push" swipeGesture={false} content-id="menu-content">
+                    <ion-header>
+                        <ion-toolbar>
+                            <ion-title slot="start" class="ion-no-padding ion-margin-start ion-margin-end">
+                                <a href="/">
+                                    <app-logo></app-logo>
+                                    <span>DeckDeckGo</span>
+                                </a>
+                            </ion-title>
+                        </ion-toolbar>
+                    </ion-header>
+
+                    <ion-content>
+                        <ion-menu-toggle autoHide={false}>
+                            <ion-item detail={false} href="/" routerDirection="forward"><ion-label>Remote</ion-label></ion-item>
+                            <ion-item detail={false} href="/timer" routerDirection="forward"><ion-label>Timer</ion-label></ion-item>
+                            <ion-item detail={false} href="/about" routerDirection="forward"><ion-label>About</ion-label></ion-item>
+                        </ion-menu-toggle>
+                    </ion-content>
+                </ion-menu>
+
+                <ion-nav id="menu-content"/>
 
                 <ion-modal-controller></ion-modal-controller>
 

diff --git a/remote/src/app/components/app-logo/app-logo.scss b/remote/src/app/components/app-logo/app-logo.scss
@@ -0,0 +1,15 @@
+div {
+  color: transparent;
+
+  vertical-align: var(--deckgo-logo-vertical-align);
+  margin-right: var(--deckgo-logo-margin-end);
+
+  background-color: transparent;
+  background-image: var(--deckgo-logo-url, url('/assets/img/deckdeckgo-logo.svg'));
+  background-repeat: no-repeat;
+
+  width: var(--deckgo-logo-size);
+  height: var(--deckgo-logo-size);
+
+  display: inline-block;
+}
diff --git a/remote/src/app/components/app-logo/app-logo.tsx b/remote/src/app/components/app-logo/app-logo.tsx
@@ -0,0 +1,13 @@
+import {Component, h} from '@stencil/core';
+
+@Component({
+  tag: 'app-logo',
+  styleUrl: 'app-logo.scss',
+  shadow: true
+})
+export class AppLogo {
+
+  render() {
+    return <div></div>;
+  }
+}
diff --git a/remote/src/app/pages/app-about/app-about.tsx b/remote/src/app/pages/app-about/app-about.tsx
@@ -10,6 +10,14 @@ export class AppAbout {
         return [
             <ion-header>
                 <ion-toolbar color="primary">
+                    <ion-buttons slot="start">
+                        <ion-menu-toggle>
+                            <ion-button>
+                                <ion-icon slot="icon-only" name="menu"></ion-icon>
+                            </ion-button>
+                        </ion-menu-toggle>
+                    </ion-buttons>
+
                     <ion-title class="ion-text-uppercase">DeckDeckGo</ion-title>
                 </ion-toolbar>
             </ion-header>,

diff --git a/remote/src/app/pages/app-remote/app-remote.tsx b/remote/src/app/pages/app-remote/app-remote.tsx
@@ -481,6 +481,15 @@ export class AppRemote {
             <ion-header>
                 <ion-toolbar color="primary">
                     <ion-title class="ion-text-uppercase">DeckDeckGo</ion-title>
+
+                    <ion-buttons slot="start">
+                        <ion-menu-toggle>
+                            <ion-button>
+                                <ion-icon slot="icon-only" name="menu"></ion-icon>
+                            </ion-button>
+                        </ion-menu-toggle>
+                    </ion-buttons>
+
                     <ion-buttons slot="end">
                         <ion-button onClick={() => this.openSettingsModal()}>
                             <ion-icon name="settings"></ion-icon>

diff --git a/remote/src/app/pages/app-tabs/app-tabs.tsx b/remote/src/app/pages/app-tabs/app-tabs.tsx
diff --git a/remote/src/app/pages/app-timer/app-timer.tsx b/remote/src/app/pages/app-timer/app-timer.tsx
@@ -126,6 +126,14 @@ export class AppTimer {
         return [
             <ion-header>
                 <ion-toolbar color="primary">
+                    <ion-buttons slot="start">
+                        <ion-menu-toggle>
+                            <ion-button>
+                                <ion-icon slot="icon-only" name="menu"></ion-icon>
+                            </ion-button>
+                        </ion-menu-toggle>
+                    </ion-buttons>
+
                     <ion-title class="ion-text-uppercase">DeckDeckGo</ion-title>
                 </ion-toolbar>
             </ion-header>,

diff --git a/remote/src/assets/img/deckdeckgo-logo-invert.svg b/remote/src/assets/img/deckdeckgo-logo-invert.svg
diff --git a/remote/src/assets/img/deckdeckgo-logo.svg b/remote/src/assets/img/deckdeckgo-logo.svg