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.
i’m used to big watches invicta