Creating a side menu component for desktop (content overlaps ion-split-pane)

Hi everyone,

I’m working on ionic 5 app for desktop browsers (no a UWP app).

I created a side menu component that always has to be visible. The thing is that page content overlaps the side menu.

As you can see in the image, the menu has three buttons, but the page content overlaps it. I would like the side menu to be a kind of component of each page and therefore have its specific weight, so that there are no more overlaps. Also, after some navigation, the side-menu disappears.

I will appreciate your help on this.

Thanks in advance.

Here is the code:

side-menu.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { MenuController } from '@ionic/angular';
import { AuthService } from 'src/app/services/auth.service';

@Component({
  selector: 'app-side-menu',
  templateUrl: './side-menu.component.html',
  styleUrls: ['./side-menu.component.scss'],
})
export class SideMenuComponent implements OnInit {

  constructor(
    private authService: AuthService,
    private router: Router,
    private menu: MenuController
    ) { }

  ngOnInit() {}


  logout() {
    this.authService.stopAuthentication();
  }

  goToDairySupply() {
    this.router.navigate(['route/4']);
  }

  goTo(route: string) {
    this.router.navigate([route]);
  }
  
  goToCategories() {
    
  }
}

side-menu.component.scss

.main-split-pane {

 --side-max-width: 20%;

}

side-menu.component.html

<ion-split-pane  class="main-split-pane" contentId="my-content"> 

  <ion-menu  class="main-menu" contentId="my-content">

    <ion-content>

      <ion-list>

        <ion-menu-toggle auto-hide="false">

          <ion-item (click)="goToDairySupply()">

            <ion-icon slot="start" [name]="'color-fill-outline'"></ion-icon>

            <ion-label>

              Análisis de Laboratorio

            </ion-label>

          </ion-item>

          <ion-item (click)="goTo('route/1')">

            <ion-icon slot="start" [name]="'storefront-outline'"></ion-icon>

            <ion-label color="menu-label">

              Recolección de Leche

            </ion-label>

          </ion-item>

          <ion-item (click)="goTo('core/category')">

            <ion-icon slot="start" [name]="'color-fill-outline'"></ion-icon>

            <ion-label>

              Categorias

            </ion-label>

          </ion-item>

        </ion-menu-toggle>

      </ion-list>

    </ion-content>

  </ion-menu> 

</ion-split-pane>

For all of my components I have component.module.ts:

component.module.ts

import { IonicModule } from '@ionic/angular';

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { DependentComponentDirective } from '../directives/dynamics/dependent-component.directive';

import { MatDialogModule } from '@angular/material/dialog';

import { MaterialModule } from 'src/app/material.module';

// Components

import { SideMenuComponent } from './side-menu/side-menu.component';

import { HeaderComponent } from './header/header.component';

import { AddNodeComponent } from './tree/add-node/add-node.component';

import { CategoryCreateDialogComponent } from './core/category/category-create-dialog/category-create-dialog.component';

import { FormComponent } from './form/form.component';

@NgModule({

    imports: [

        IonicModule,

        CommonModule,

        FormsModule,

        ReactiveFormsModule,

        MatDialogModule,

        MaterialModule

    ],

    declarations: [

        DependentComponentDirective,

        SideMenuComponent,

        HeaderComponent,

        AddNodeComponent,

        CategoryCreateDialogComponent,

        FormComponent],

    exports: [HeaderComponent, AddNodeComponent, CategoryCreateDialogComponent,

        SideMenuComponent, FormComponent]

})

export class ComponentModule {}

In order to include the side menu in a page, I have to import ComponentModule on page Module and include tag on page html. Here is an example:

tree-category.page.html
(I also created a header component)

<app-header [title]="title"></app-header>
<ion-content padding>
  <app-side-menu></app-side-menu>
  <ion-grid fixed>
    <ion-row>
      <ion-col size="1"></ion-col>
...
</ion-content>

tree-category.module.ts

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { TreeCategoryPageRoutingModule } from './tree-category-routing.module';

import { TreeCategoryPage } from './tree-category.page';

import { MaterialModule } from '../../../../material.module';

import { ComponentModule } from '../../../../components/component.module';

@NgModule({

  imports: [

    CommonModule,

    FormsModule,

    IonicModule,

    TreeCategoryPageRoutingModule,

    MaterialModule,

    ComponentModule

  ],

  declarations: [TreeCategoryPage],

})

export class TreeCategoryPageModule {}

1 post - 1 participant

Read full topic