110 refactor app routing navigation

front-end/src/app/tabs/menu/menu.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { IDEATranslationsModule } from '@idea-ionic/common';
+
+import { MenuRoutingModule } from './menu.routing.module';
+import { MenuPage } from './menu.page';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    IDEATranslationsModule,
+    MenuRoutingModule
+  ],
+  declarations: [MenuPage]
+})
+export class MenuModule {}

front-end/src/app/tabs/menu/menu.page.html

@@ -0,0 +1,30 @@
+<ion-header>
+  <ion-toolbar *ngIf="app.isInMobileMode()" color="ideaToolbar">
+    <ion-title class="ion-text-center">
+      {{ 'TABS.MENU' | translate }}
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <ion-list lines="inset" style="padding: 0; max-width: 500px; margin: 0 auto;">
+    <ion-item-divider>
+      <ion-label>{{ 'MENU.PAGES' | translate }}</ion-label>
+    </ion-item-divider>
+    <ion-item button color="white" (click)="app.goToInTabs(['home'])">
+      <ion-icon name="home" slot="start"></ion-icon>
+      <ion-label>{{ 'MENU.HOME' | translate }}</ion-label>
+    </ion-item>
+    <ion-item button color="white" (click)="app.goToInTabs(['sessions'])">
+      <ion-icon name="calendar" slot="start"></ion-icon>
+      <ion-label>{{ 'MENU.AGENDA' | translate }}</ion-label>
+    </ion-item>
+    <ion-item button color="white" (click)="app.goToInTabs(['venues'])">
+      <ion-icon name="map" slot="start"></ion-icon>
+      <ion-label>{{ 'MENU.VENUES' | translate }}</ion-label>
+    </ion-item>
+    <ion-item button color="white" (click)="app.goToInTabs(['organizations'])">
+      <ion-icon name="business" slot="start"></ion-icon>
+      <ion-label>{{ 'MENU.ORGANIZATIONS' | translate }}</ion-label>
+    </ion-item>
+  </ion-list>
+</ion-content>

front-end/src/app/tabs/menu/menu.page.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+import { AppService } from 'src/app/app.service';
+
+@Component({
+  selector: 'app-menu',
+  templateUrl: './menu.page.html',
+  styleUrls: ['./menu.page.scss']
+})
+export class MenuPage {
+  constructor(public app: AppService) {}
+}

front-end/src/app/tabs/menu/menu.routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { MenuPage } from './menu.page';
+
+const routes: Routes = [
+  { path: '', component: MenuPage }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class MenuRoutingModule {}

front-end/src/app/tabs/organizations/organizations.page.html

@@ -1,8 +1,8 @@
 <ion-header>
   <ion-toolbar *ngIf="app.isInMobileMode()" color="ideaToolbar">
-    <ion-segment-button value="list">
+    <ion-title class="ion-text-center">
       {{ 'ORGANIZATIONS.LIST' | translate }}
-    </ion-segment-button>
+    </ion-title>
   </ion-toolbar>
 </ion-header>
 <ion-content>

front-end/src/app/tabs/tabs.component.html

@@ -3,9 +3,23 @@
     <ion-tab-button (click)="app.goTo([''])">
       <ion-img [src]="app.getIcon()"></ion-img>
     </ion-tab-button>
+    <ng-container *ngIf="app?.user.spot?.paymentConfirmedAt">
+      <ion-tab-button tab="home">
+        <ion-label>{{ 'TABS.HOME' | translate }}</ion-label>
+      </ion-tab-button>
+      <ion-tab-button tab="agenda">
+        <ion-label>{{ 'TABS.AGENDA' | translate }}</ion-label>
+      </ion-tab-button>
+      <ion-tab-button tab="venues">
+        <ion-label>{{ 'TABS.VENUES' | translate }}</ion-label>
+      </ion-tab-button>
+    </ng-container>
     <ion-tab-button tab="user">
       <ion-label>{{ 'TABS.USER' | translate }}</ion-label>
     </ion-tab-button>
+    <ion-tab-button tab="menu" *ngIf="app?.user.spot?.paymentConfirmedAt">
+      <ion-label>{{ 'TABS.MENU' | translate }}</ion-label>
+    </ion-tab-button>
     <ion-tab-button tab="manage" *ngIf="app.userCanManageSomething()">
       <ion-label>{{ 'TABS.MANAGE' | translate }}</ion-label>
     </ion-tab-button>
@@ -14,9 +28,23 @@
 
 <ion-tabs class="mobileTabs" *ngIf="app.isInMobileMode()">
   <ion-tab-bar color="ideaToolbar" slot="bottom">
+    <ng-container *ngIf="app?.user.spot?.paymentConfirmedAt">
+      <ion-tab-button tab="home">
+        <ion-icon icon="home"></ion-icon>
+      </ion-tab-button>
+      <ion-tab-button tab="agenda">
+        <ion-icon icon="calendar"></ion-icon>
+      </ion-tab-button>
+      <ion-tab-button tab="venues">
+        <ion-icon icon="map"></ion-icon>
+      </ion-tab-button>
+    </ng-container>
     <ion-tab-button tab="user">
       <ion-icon icon="person"></ion-icon>
     </ion-tab-button>
+    <ion-tab-button tab="menu" *ngIf="app?.user.spot?.paymentConfirmedAt">
+      <ion-icon icon="menu"></ion-icon>
+    </ion-tab-button>
     <ion-tab-button tab="manage" *ngIf="app.userCanManageSomething()">
       <ion-icon icon="settings"></ion-icon>
     </ion-tab-button>

front-end/src/app/tabs/tabs.routing.module.ts

@@ -17,6 +17,10 @@ const routes: Routes = [
         path: 'manage',
         loadChildren: (): Promise<any> => import('./manage/manage.module').then(m => m.ManageModule)
       },
+      {
+        path: 'menu',
+        loadChildren: (): Promise<any> => import('./menu/menu.module').then(m => m.MenuModule)
+      },
       {
         path: 'venues',
         loadChildren: (): Promise<any> => import('./venues/venues.module').then(m => m.VenuesModule)

front-end/src/assets/i18n/en.json

@@ -117,9 +117,20 @@
     "NEW_PASSWORD": "New password"
   },
   "TABS": {
+    "HOME": "Home",
+    "AGENDA": "Agenda",
+    "VENUES": "Venues",
     "USER": "You",
+    "MENU": "Menu",
     "MANAGE": "Manage"
   },
+  "MENU": {
+    "PAGES": "Pages",
+    "HOME": "Home",
+    "AGENDA": "Agenda",
+    "VENUES": "Venues",
+    "ORGANIZATIONS": "Organizations"
+  },
   "USER": {
     "ESN_ACCOUNTS": "ESN Accounts",
     "FIRST_NAME": "First name",

front-end/src/global.scss

@@ -297,12 +297,6 @@ ion-list {
 ion-list-header {
   padding-left: 0;
 }
-ion-item ion-label p {
-  color: var(--ion-color-step-600) !important;
-}
-ion-item ion-label p a {
-  color: var(--ion-color-step-450) !important;
-}
 ion-item-divider {
   border-bottom: none !important;
   margin-top: 10px !important;