host

Ionic – Hide SideMenu

Table of Contents

Code

Hide Side Menu for a specific Page

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

constructor(public menuCtrl: MenuController) { }

    ionViewDidEnter() {
        // the root left menu should be disabled on this page
        this.menuCtrl.enable(false);
    }

    ionViewWillLeave() {
        // enable the root left menu when leaving this page
        this.menuCtrl.enable(true);
    }
				
			

Ionic – Hide Scrollbar

Table of Contents

Code

Hide Scrollbar

				
					ion-content {
  --offset-bottom: auto!important; //for Scroll ability
  --overflow: hidden;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  // width: calc(100% + 15px);
}
				
			

Custom Scrollbar

				
					ion-content {
  --offset-bottom: auto !important; // for scroll ability
  --overflow: hidden;               // scrollbar hidden
  overflow: auto;                   
  &::-webkit-scrollbar {
    width: 0.25rem;
  }
  &::-webkit-scrollbar-track {
    background: #1e1e24;
  }
  &::-webkit-scrollbar-thumb {
    background: #4444b4;
  }
}
				
			

Ionic – Split Pane Layout

Table of Contents

Code

The Component

				
					
<ion-split-pane when="md"></ion-split-pane>


<ion-split-pane when="(min-width: 40px)"></ion-split-pane>
				
			
				
					<ion-split-pane contentId="main">
  
  <ion-menu contentId="main">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-menu>

  
  <ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane>
				
			

If you want a open/close butten for Desktops

				
					<ion-buttons slot="start">
      <ion-menu-toggle autoHide="false" menu="main-menu">
        <ion-button (click)="toggleMenu()">
          <ion-icon name="menu" slot="icon-only"></ion-icon>
        </ion-button>
      </ion-menu-toggle>
				
			
				
					import { SIZE_TO_MEDIA } from '@ionic/core/dist/collection/utils/media'



  toggleMenu() {
    const splitPane = document.querySelector('ion-split-pane');

  if(window.matchMedia(SIZE_TO_MEDIA[splitPane.when] || splitPane.when).matches)
  splitPane.classList.toggle('split-pane-visible')
}
				
			

Ionic – Side Menu

Table of Contents

Code

page.html

				
					<ion-header="true">
  <ion-toolbar>
    <ion-title>
      TITLE
    </ion-title>
    <ion-buttons slot="start">
      <ion-menu-button menu="main-menu"></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
				
			

app.component.html

				
					<ion-app>
  <ion-menu menuId="main-menu" contentId="main-content" side="start">
    <ion-content>
      <div class="menu-header-bg"></div>
      <div class="header-content">
        <img decoding="async"  alt="" data-src="../assets/image/avatar.jpg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img decoding="async" src="../assets/image/avatar.jpg" alt="" /></noscript>
        <ion-label>
          <h2>Name</h2>
          <p>Title</p>
        </ion-label>
      </div>
      <div class="action-button">
        <ion-button>
          <ion-icon slot="start" name="add"></ion-icon>Add Product
        </ion-button>
      </div>

      <ion-menu-toggle auto-hide="false" *ngFor="let nav of NAV">
        <ion-list class="menu-items" lines="none">
          <ion-item
            routerDirection="root"
            [routerLink]="nav.link"
            [class.active-menu]="active === nav.link"
            [routerLinkActive]="['active']"
          >
            {{ nav.name }}
            <ion-icon
              slot="start"
              [ios]="nav.icon + '-outline'"
              [md]="nav.icon + '-sharp'"
            ></ion-icon>
          </ion-item>
        </ion-list>
      </ion-menu-toggle>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="main-content" main></ion-router-outlet>
</ion-app>

				
			

app.component.scss

				
					.menu-header-bg {
  height: 180px;
  width: 350px;
  background: #fff;
  background: linear-gradient(
    90deg,
    rgb(98, 140, 255) 0%,
    rgb(35, 78, 194) 100%
  );
  box-shadow: 0px 1px 10px rgba(98, 140, 255, 0.5);
  transform: rotate(-15deg);
  border-radius: 10px 10px 10px 50px;
  margin-left: -18px;
  margin-top: -50px;
  margin-bottom: 60px;
}

.header-content {
  position: absolute;
  top: 30px;
  left: 15px;
  display: flex;
  align-items: center;

  img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 7px solid rgb(153, 153, 255);
    margin-right: 14px;
  }

  h2 {
    font-weight: 300;
    color: rgb(255, 255, 255);
  }

  p {
    font-size: 12px;
    color: #e4e4e4;
    font-weight: 100;
    letter-spacing: 0.4px;
  }
}

.action-button {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;

  ion-button {
    text-transform: capitalize;
    font-weight: 300;
    --background: #628cff;
    --border-radius: 7px;
    --box-shadow: none;
  }

  ion-icon {
    margin-right: 1px;
  }
}

.menu-items {
  margin: 0px;

  ion-icon {
    margin-right: 20px;
    color: #86979f;
  }

  ion-item {
    padding-left: 20px;
    margin-bottom: 0px;
    text-transform: capitalize;
  }

  .active {
    border-left: 5px solid;
    color: #628cff;
    padding-left: 15px;
  }

  ion-icon {
    color: #628cff;
  }
}

				
			

app.component.ts

				
					import { Component } from '@angular/core';
import { MenuController } from '@ionic/angular';
import { Router, RouterEvent } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {

  active = '';

  NAV = [
    {
      name: 'home',
      link: 'home',
      icon: 'person-circle'
    },
    {
      name: 'item2',
      link: 'item2',
      icon: 'icon'
    },
    {
      name: 'item3',
      link: 'item3',
      icon: 'icon'
    }
  ]

  constructor(private router: Router, private menu: MenuController) {
    this.router.events.subscribe((event: RouterEvent) => {
      this.active = event.url})
  }
  
}


				
			

Ionic – Deploy to Webhost

Table of Contents

Instruction

				
					cd YourProjectFolder
ng add @angular/pwa
ionic build --prod
				
			

Change in www/index.html

				
					 <base href="/" />      // change this line to your path in the server e.g. "/myfolder/"
 
				
			

Upload your FILES and enjoy your NEW Ionic Site

If ng doesn't work

				
					ng --version

npm install -g @angular/cli
				
			

Go back to top