<mat-toolbar-row fxHide fxShow.gt-sm class="container" fxLayout="row" fxLayout.xs="row" fxLayoutAlign="space-between center">
<div class="main-menu" fxLayout="row" fxHide fxShow.gt-sm>
<a mat-button class="mat-button" [routerLink]="['/home/one']">Home</a>
<a [routerLink]="['/home/products/all']" routerLinkActive="router-link-active" mat-button class="mat-button">Products</a>
<a mat-button [matMenuTriggerFor]="shop" class="mat-button" (click)="openMegaMenu()">Shop<mat-icon class="caret">arrow_drop_down</mat-icon></a>
<mat-menu #shop="matMenu" [overlapTrigger]="false" class="app-dropdown mega-menu">
<div fxLayout="row wrap">
<div fxFlex="20" fxLayout="column" class="p-1">
<a mat-menu-item routerLink="/"><b>Butter & Eggs</b></a>
<mat-divider></mat-divider>
<a mat-menu-item routerLink="/">Butter Pelegrino</a>
<a mat-menu-item routerLink="/">Eggs</a>
</div>
<div fxFlex="20" class="p-1">
<a mat-menu-item routerLink="/"><b>Fruits</b></a>
<mat-divider></mat-divider>
<button mat-menu-item>Grapes</button>
<button mat-menu-item>Bananas</button>
<button mat-menu-item>Apples</button>
<button mat-menu-item>Peach</button>
</div>
<div fxFlex="20" class="p-1">
<a mat-menu-item routerLink="/"><b>Cheese</b></a>
<mat-divider></mat-divider>
<button mat-menu-item>Gauda</button>
<button mat-menu-item>Radovo</button>
</div>
<div fxFlex="20" class="p-1">
<a mat-menu-item routerLink="/"><b>Vegetables</b></a>
<mat-divider></mat-divider>
<button mat-menu-item>Cabbage</button>
<button mat-menu-item>Broccoli</button>
<button mat-menu-item>Radish</button>
<button mat-menu-item>Beet</button>
<button mat-menu-item>Carrots</button>
</div>
<div fxFlex="20" class="p-1">
<a mat-menu-item routerLink="/"><b>Milk</b></a>
<mat-divider></mat-divider>
<button mat-menu-item>Alpsko</button>
<button mat-menu-item>Berane</button>
</div>
</div>
</mat-menu>
<a mat-button mat-button [matMenuTriggerFor]="blog" class="mat-button">Blog<mat-icon class="caret">arrow_drop_down</mat-icon></a>
<mat-menu #blog="matMenu" [overlapTrigger]="false" class="app-dropdown">
<a mat-menu-item [routerLink]="['/blog/blog-list']">Blog List</a>
<a mat-menu-item [routerLink]="['/blog/blog-column']">Blog Columns</a>
<a mat-menu-item [routerLink]="['/blog/blog-details']">Blog Details</a>
</mat-menu>
<a mat-button [matMenuTriggerFor]="pages" class="mat-button">Pages<mat-icon class="caret">arrow_drop_down</mat-icon></a>
<mat-menu #pages="matMenu" [overlapTrigger]="false" class="app-dropdown">
<a [routerLink]="['/pages/about']" mat-menu-item>About Us</a>
<a mat-menu-item [routerLink]="['/pages/faq']" >FAQ</a>
<a mat-menu-item [routerLink]="['/pages/contact']">Contact</a>
<a mat-menu-item [routerLink]="['/pages/wishlist']">Wishlist</a>
<a mat-menu-item [routerLink]="['/pages/checkout']">Checkout</a>
<a mat-menu-item [routerLink]="['/pages/cart']">Cart</a>
<a mat-menu-item [routerLink]="['/pages/my-account']">My Account</a>
<a mat-menu-item [routerLink]="['/pages/error']">404</a>
</mat-menu>
<a [routerLink]="['/pages/contact']" routerLinkActive="router-link-active" mat-button class="mat-button">Contact</a>
</div>
<!-- <app-shopping-widgets *ngIf="url == '/home/one'" [shoppingCartItems]="shoppingCartItems"></app-shopping-widgets> -->
<!-- <div class="main-menu-wrapper" fxLayout="row" fxLayoutAlign="space-between center" >
<div class="commerce-buttons" fxLayout="row" fxLayoutAlign="end center">
<button mat-button class="flex-row-button mat-button" fxLayoutAlign="space-between center" [matMenuTriggerFor]="menu">
<div class="mat-button-wrapper">
<div class="" >
<mat-icon class="mat-icon-lg mat-icon material-icons">local_grocery_store</mat-icon>
<span class="cart-count-wrapper">{{shoppingCartItems.length}}</span>
</div>
<div class="top-cart">
<span>{{ getTotal() | async | currency:productsService?.currency:'symbol'}}</span>
</div>
</div>
</button>
<mat-menu #menu="matMenu">
<div class="spCard-dropdown">
<div class="card-list-title" fxLayout="row" fxLayoutAlign="space-between start">
<a [routerLink]="['/cart']" routerLinkActive="router-link-active" ><p>CHECK CARD</p></a>
<p>{{shoppingCartItems.length}} ITEM</p>
</div>
<mat-divider></mat-divider>
<p class="woo-message" *ngIf="!shoppingCartItems.length">Please add product<p>
<div class="new-product" fxLayout="column" *ngIf="shoppingCartItems.length">
<div class="item" fxLayout="row" fxLayoutAlign="start start" *ngFor="let item of shoppingCartItems">
<div class="product">
<img [src]="item.product.pictures" alt="">
</div>
<div class="desc">
<p>{{item.product.name}}</p>
<span>{{item.quantity}} X {{item.product.price}}</span>
</div>
<div class="close-circle">
<a (click)="removeItem(item)"><i class="material-icons">
delete
</i></a>
</div>
</div>
<mat-divider></mat-divider>
<div class="total" fxLayout="row" fxLayoutAlign="space-between center">
<p class="text-muted">Subtotal: </p>
<span>{{ getTotal() | async | currency:productsService?.currency:'symbol' }}</span>
</div>
</div>
</div>
</mat-menu>
</div>
</div> -->
</mat-toolbar-row>
