Create a side menu in angular 9 with bootstrap 4 and font-awesome | E-commerce

Side menu for our ecommerce project was very important to filter the different categories of project. 

How to add bootstrap 4 in angular 9? Go the this series of article and come back.

How to add font-awesome in angular 9. Which is very similar to bootstrap concatenation.

Go to the angular ecommerce project path in  terminal, then type command  

npm install font-awesome –save

After installation is completed, Similar to the bootstrap add node module file path to angular.json{}.

Now, paste the below code in your files header.component.html, header.component.ts, header.component.css and I do changes in app.component.html.

Code: header.component.html

<aside class=”bg-dark”>

  <ul>

  <li><div class=”icons”><i class=”fa fa-male”></i></div><div class=”linktitle”>Mens wear</div></li>

  <li><div class=”icons”><i class=”fa fa-female”></i></div><div class=”linktitle”>Womens wear</div></li>

  <li><div class=”icons”><i class=”fa fa-bed”></i></div><div class=”linktitle”>Furnitures</div></li>

  <li><div class=”icons”><i class=”fa fa-laptop”></i></div><div class=”linktitle”>Electronics</div></li>

  <li><div class=”icons”><i class=”fa fa-heart”></i></div><div class=”linktitle”>Favorite</div></li>  

</ul> 

  </aside>

<nav class=”navbar navbar-expand-md bg-dark pb-0 fixed-top” id=”banner”>

  <div class=”container-fluid “>

  <!– Brand –>

  <a class=”navbar-brand” href=”#”><span>Helperscript</span> Shopify</a>

  <!– Toggler/collapsibe Button –>

  <button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#collapsibleNavbar”>

    <span class=”navbar-toggler-icon”></span>

  </button>

  <!– Navbar links –>

  <div class=”collapse navbar-collapse” id=”collapsibleNavbar”>

    <ul class=”navbar-nav ml-auto”>

      <li class=”nav-item” (click)=”navigate(‘/products’)” [ngClass]=”product ?’active’:””>

        <a class=”nav-link” routerLink=”/products”>Products</a>

      </li>

      <li class=”nav-item” (click)=”navigate(‘/offers’)” [ngClass]=”offers ?’active’:””>

        <a class=”nav-link” routerLink=”/offers”>offers</a>

      </li>

      <li class=”nav-item” (click)=”navigate(‘/cart’)” [ngClass]=”cart ?’active’:””>

        <a class=”nav-link” routerLink=”/cart”><i class=”fa fa-shopping-cart”></i></a>

      </li> 

     <!– Dropdown –>

    <li class=”nav-item dropdown”>

      <a class=”nav-link dropdown-toggle” href=”#” id=”navbardrop” data-toggle=”dropdown”>

        Jasim

      </a>

      <div class=”dropdown-menu dropdown-menu-right”>

        <a class=”dropdown-item” href=”#”>email@gmail.com</a>

        <a class=”dropdown-item” href=”#”>Settings</a>

        <a class=”dropdown-item” href=”#”>Logout</a>

      </div>

    </li>

    </ul>

  </div>

  </div>

</nav>

Code: header.component.ts

import { Component, OnInit } from ‘@angular/core’;

import {Router} from ‘@angular/router’

@Component({

  selector: ‘app-header’,

  templateUrl: ‘./header.component.html’,

  styleUrls: [‘./header.component.css’]

})

export class HeaderComponent implements OnInit {

   public product = true;

   public offers = false;

   public cart  = false;

  constructor(private route:Router) { }

  ngOnInit(): void {

  }

  navigate(page){

    console.log(page);

    if(page === ‘/products’){

      this.product = true;

      this.offers = false;

      this.cart  = false;

   }else if(page === ‘/offers’){

     this.product = false;

     this.offers = true;

     this.cart  = false;

   }else if(page === ‘/cart’){

     this.product = false;

     this.offers = false;

     this.cart  = true;

   }else{

   }

  }

}

Code:header.component.css

@import url(‘https://fonts.googleapis.com/css?family=Gothic+A1|Kaushan+Script|Libre+Baskerville|Lobster’);

.body{

  font-family: ‘Gothic A1’, sans-serif;

  font-size:16px;

  }

  p{

  color:#6c6c6f;

  font-size:1em;

  }

    h1,h2,h3,h4,h5,h6{color:#323233;text-transform:uppercase;}

    .navbar-brand  span{

        color: #fed136;

        font-size:25px;font-weight:700;letter-spacing:0.1em;

        font-family: ‘Kaushan Script’,‘Helvetica Neue’,Helvetica,Arial,cursive;

    }

    .navbar-brand {

        color: #fff;

        font-size:25px;

        font-family: ‘Kaushan Script’,‘Helvetica Neue’,Helvetica,Arial,cursive;

        font-weight:700;

        letter-spacing:0.1em;

    }

    .navbar-nav .nav-item .nav-link{

        padding: 1.1em 1em!important;

        font-size: 120%;

        font-weight: 500;

        letter-spacing: 1px;

        color: #fff;

       font-family: ‘Gothic A1’, sans-serif;

    }

    .navbar-nav .nav-item .nav-link:hover{color:#fed136;}

    .nav-item.active{

       border-bottom: 4px solid #fed136;

    }

    .navbar-expand-md .navbar-nav .dropdown-menu{

        border-top:3px solid #fed136;

    }

    .dropdown-item:hover{background-color:#fed136;color:#000;}

    nav{-webkit-transition: padding-top .3s,padding-bottom .3s;

        -moz-transition: padding-top .3s,padding-bottom .3s;

        transition: padding-top .3s,padding-bottom .3s;

        border: none;

        }

        /* aside side nav */

        aside

        {

        height:600px;

        width:180px;

        float:left;

        position: fixed;

        padding-top: 83px;

        }

        ul

        {

        padding:0px;

        margin:0px;

        border-bottom:1px solid #1c1f21;

        }

       aside ul li

        {

        list-style-type:none;

        color:#fff;

        padding:10px;

        /* border-bottom:1px solid #272a2c; */

        border-top:1px solid #1c1f21;

        overflow: auto;

        cursor:pointer;

        }

       /* aside ul li:first-child{border-top:none;} */

        .fa

        {

        color:#fed136;

        display:block;

        }

      aside  ul li:hover .fa

        {

        color:#fed136;

        }

      aside  ul li:hover .linktitle

        {

        color: #f3d143;;

        }

      aside  ul li div

        {

        float:left;

        }

       aside .icons

        {

        padding:10px;

        }

       aside .linktitle

        {

        line-height: 35px;

        padding-left: 10px;

        }

        /* Reponsive menu code */

        @media all and (max-width: 600px) {

        aside

        {

        width:60px;

        padding:0px 10px;

        }

        ul li

        {

        overflow:hidden;

        padding:0px 10px;

        }

        .linktitle

        {

        position: absolute;

        z-index: -1;

        left: -50px;

        padding: 29px 15px;

        line-height:0px;

        background:#222527;

        }

        ul li:hover .linktitle

        {

        left:80px;

        }

        .icons

        {

        padding: 20px 10px;

        }

        ul li:hover .icons

        {

        -webkit-transform:rotate(360deg);

        -moz-transform:rotate(360deg);

        -ms-transform:rotate(360deg);

        -o-transform:rotate(360deg);

        transform:rotate(360deg);

        }

        }

        /* aside side nav end */

 Now you can see the above side menu.

One thought on “Create a side menu in angular 9 with bootstrap 4 and font-awesome | E-commerce”

Leave a Reply

Your email address will not be published. Required fields are marked *