Ionic framework is one the most famous hybrid frameworks in the world of tech, in this article I'll show how to make a custom Side navigation in you ionic 4 application, actually it works not only for ionic 4 but also for ionic 3 and maybe for the up coming versions of ionic framework, so in order to follow up with me you need to have a basic knowledge for ionic 4 and it's dependencies I'm talking about Angular 4 and SCSS and also a basic competences in Typscript although in this tutorial I'm not going to touch any of logic code, mainly only scss and htm, So if you are good to go just open your terminal and your code editor and let's stat.

1. Wireframing our Side Navigation

I have been done a little wire frame for what I'm gonna a build using Invision tool to wireframe, here is what we will create in this tutorial, basically just a sidenav that will show up when we click on the hamburger icon, this nav contain our logo and some list of pages to make navigation easy in our application, that's it. Wireframing our Side Navigation

2. Creating sidemenu Project

After having an idea of what we are going to build, now it's time to put our hands in our terminals and generate the ionic 4 project with sidenav template of course., ionic framework team makes all that easy for us, so you only need to tap this little command in your terminal or command line.

        ionic start customSideMenu sidemenu --type=angular

Don't forget to add --type=angular for generating an ionic 4 application with angular framework.

In this tutorial we will work almost only in two files which are app.componement.html and global.scss because we are going to customize the side menu know as drawer menu in the world of android development so the files that we will touch are those two file as you can see in this picture below.

vscode-ionic-project

3. Adding SCSS code

Open global.scss file and let's add some scss code there, in the previous version of ionic there was app.scss file and in that file we find all code related to app.component.html or other components or pages, so here we are in ionic 4 we will respect it's architecture, all right! please just copy and paste this code below.

/* menu styling */
ion-menu{
    ion-item,
    ion-list, .list-md,
    ion-content{
        --background: var(--dark-color);
        --ion-background-color: var(--dark-color);
    }
    ion-item{
        color: var(--text-color);
    }
    ion-icon{
        color: #21a3ee;
    }
}

.logo-section{
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--dark-color);
    padding: 2em 0;
    min-height: 200px;
    .logo-section__wrapper{
        text-align: center;
        .logo-section__logo{
            display: block;
            width: 150px;
            height: 150px;
            border-radius: 100%;
        }
        .logo-section__title{
            font-size: 1.5rem;
            font-weight: normal;
            color: var(--text-color);
        }
    }
}

But you must check out the variables.scss in theme folder and define some new variables there because we use them in our scss code those variables you should add them inside root.

:root {
  --dark-color: #263238;
  --text-color: #b5b5b5;
}

4. Adding HTML code

Now it's time to add some HTML code to our application and especially in app.component.html, so open this file replace it's existing HTML code with this one below.

<ion-app>
  <ion-split-pane>
    <ion-menu>
      <div class="logo-section">
          <div class="logo-section__wrapper">
            <img class="logo-section__logo" src="assets/imgs/logo.png" />
            <h3 class="logo-section__title">SideMenu</h3>
          </div>
      </div>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

3. Adding assets files

In this tutorial we walk through how to customize a side menu navigation in ionic 4 application, so last thing here is to add our logo in assets > imgs folders, just as you can see in this image below. logo path ionic 4 app

4. Preview our application

Now that we have done with our side menu navigation let's preview in our browser by running this command in the terminal

ionic serve

If everything is fine normally you'll see something like this:

ionic 4 sidemenu app.

5. Conclusion

This is the end of this tutorial, we see how we can customize our side menu in ionic 4 application it was easy then we thought, we only need to make change in 3 files and add a logo image, that's almost all what need to do, ionic 4 allows you do so much powerful things, that's why I love it.