POC sidemenu

source/ios/App/App/capacitor.config.json

@@ -2,5 +2,13 @@
 	"appId": "com.gueopic.gueopic",
 	"appName": "Gueopic",
 	"webDir": "www",
-	"bundledWebRuntime": false
+	"bundledWebRuntime": false,
+	"plugins": {
+		"SplashScreen": {
+			"launchAutoHide": false,
+			"showSpinner": true,
+			"androidSpinnerStyle": "small",
+			"iosSpinnerStyle": "small"
+		}
+	}
 }

source/ios/App/App/config.xml

@@ -2,5 +2,9 @@
 <widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
   <access origin="*" />
 
+  <feature name="SQLitePlugin">
+    <param name="ios-package" value="SQLitePlugin"/>
+  </feature>
+
 
 </widget>

source/ios/App/Podfile

@@ -10,9 +10,14 @@ def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
+  pod 'CapacitorCamera', :path => '../../node_modules/@capacitor/camera'
+  pod 'CapacitorFilesystem', :path => '../../node_modules/@capacitor/filesystem'
   pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
   pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
+  pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
   pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
+  pod 'CapacitorVoiceRecorder', :path => '../../node_modules/capacitor-voice-recorder'
+  pod 'CordovaPlugins', :path => '../capacitor-cordova-ios-plugins'
 end
 
 target 'App' do

source/src/app/app-routing.module.ts

@@ -25,6 +25,16 @@ const routes: Routes = [
         (m) => m.PlaygroundPageModule,
       ),
   },
+  // Sidebar outlet
+  {
+    path: '',
+    loadChildren: () =>
+      import('./menu/menu.module').then((m) => m.MenuPageModule),
+    outlet: 'sidebar',
+    data: {
+      isSidebar: true,
+    },
+  },
 ];
 
 @NgModule({

source/src/app/app.component.html

@@ -1,3 +1,17 @@
 <ion-app>
-  <ion-router-outlet></ion-router-outlet>
+  <ion-split-pane contentId="main-content" when="md">
+    <ion-menu
+      contentId="main-content"
+      menuId="detail-evaluation"
+      type="overlay"
+      side="start"
+      swipe-gesture="false"
+      [disabled]="isMobile"
+    >
+      <ion-content>
+        <router-outlet name="sidebar"></router-outlet>
+      </ion-content>
+    </ion-menu>
+    <ion-router-outlet id="main-content"></ion-router-outlet>
+  </ion-split-pane>
 </ion-app>

source/src/app/app.component.scss

@@ -0,0 +1,8 @@
+ion-menu {
+  --side-min-width: 50%;
+  --side-max-width: 50%;
+}
+ion-router-outlet.split-pane-side {
+  --side-min-width: 50%;
+  --side-max-width: 50%;
+}

source/src/app/app.component.ts

@@ -25,6 +25,10 @@ export class AppComponent implements OnInit {
     private router: Router,
   ) {}
 
+  get isMobile() {
+    return window.innerWidth < 768;
+  }
+
   ngOnInit() {
     this.platform.ready().then((res) => {
       console.debug('Platform initialized:', res);

source/src/app/menu/menu.page.html

@@ -1,6 +1,6 @@
 <ion-header>
   <ion-toolbar>
-    <ion-buttons slot="start">
+    <ion-buttons *ngIf="!routeData?.isSidebar" slot="start">
       <ion-button [routerLink]="['/home']" routerDirection="back">
         {{ 'common.actions.back' | translate }}
       </ion-button>

source/src/app/menu/menu.page.ts

@@ -4,6 +4,7 @@ import {
   OnDestroy,
   OnInit,
 } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ModalController } from '@ionic/angular';
 import { ItemWithFilesModel } from '../../core/models/item-with-files.model';
 import { VerbWithFilesModel } from '../../core/models/verb-with-files.model';
@@ -33,9 +34,14 @@ export class MenuPage implements OnInit, OnDestroy {
     public modalController: ModalController,
     private audioService: AudioService,
     public appTranslateService: AppTranslateService,
+    private route: ActivatedRoute,
   ) {}
 
+  get routeData() {
+    return this.route.snapshot.data;
+  }
   ngOnInit() {
+    console.log('tset', this.route.snapshot.data);
     this.itemsStateService.loadAll();
     this.verbsStateService.loadAll();
     this.settingsStateService.loadAll(true);