Working on product page

angular.json

@@ -39,6 +39,7 @@
             ],
             "styles": [
               "node_modules/font-awesome/css/font-awesome.css",
+
               "src/styles.scss"
             ],
             "scripts": []

src/app/layout/footer/component/footer-contact-info/footer-contact-info.component.html

@@ -2,27 +2,27 @@
   <div class="container">
     <div class="row">
       <div class="col-12 col-md-5 col-sm-3 col-lg-3">
-        <strong>
-          Our experts are available 24/7:
-        </strong>
+
+        Our experts are available 24/7:
+
       </div>
       <div class=" col-12  col-md-6 col-sm-3 col-lg-2">
-        <strong>
-          <i class="fa fa-phone" aria-hidden="true"></i> {{contact_info.contact_no}}
-        </strong>
+
+        <i class="fa fa-phone" aria-hidden="true"></i> {{contact_info.contact_no}}
+
       </div>
       <div class=" col-12  col-md-4 col-sm-3 col-lg-2">
         <a href="#">
-          <strong>
-            <i class="fa fa-envelope"></i> Email Us
-          </strong>
+
+          <i class="fa fa-envelope"></i> Email Us
+
         </a>
       </div>
       <div class="col-12  col-md-4 col-sm-3 col-lg-2">
         <a href="#">
-          <strong>
-              <i class="fa fa-comments" aria-hidden="true"></i> Live Chat
-          </strong>
+
+          <i class="fa fa-comments" aria-hidden="true"></i> Live Chat
+
         </a>
       </div>
       <div class="col-12  col-md-4 col-sm-3 col-lg-3 text-right">
@@ -34,4 +34,4 @@
       </div>
     </div>
   </div>
-</section>
+</section>

src/app/layout/footer/component/footer-contact-info/footer-contact-info.component.spec.ts

@@ -8,9 +8,9 @@ describe('FooterContactInfoComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ FooterContactInfoComponent ]
+      declarations: [FooterContactInfoComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

src/app/layout/header/components/brand-menu-dropdown/brand-componant/brand-list/brand-list.component.html

@@ -1,10 +1,6 @@
-<div class="row">
-  <div>
-    <ul>
-      <li>
-        <a [routerLink]="['/products']" [queryParams]="{'q[name_cont]': taxons.name, id: taxons.id}">{{taxons.name}} </a>
-      </li>
-    </ul>
+<ul class="flex-container wrap">
+  <li class="flex-item">
+    <a [routerLink]="['/products']" [queryParams]="{'q[name_cont]': taxons.name, id: taxons.id}">{{taxons.name}} </a>
+  </li>
 
-  </div>
-</div>
+</ul>

src/app/layout/header/components/brand-menu-dropdown/brand-componant/brand-list/brand-list.component.scss

@@ -6,4 +6,38 @@ a:focus {
     color: #a3d032;
     text-decoration: underline;
   }
+}
+
+.flex-container {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -moz-flex;
+  display: -webkit-flex;
+  display: flex;
+}
+
+.wrap {
+  -webkit-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.wrap li {
+  background: gold;
+}
+
+.flex-item {
+  background: tomato;
+  padding: 5px;
+  width: 100px;
+  height: 100px;
+  margin: 10px;
+  line-height: 100px;
+  color: white;
+  font-weight: bold;
+  font-size: 2em;
+  text-align: center;
 }

src/app/layout/header/components/brand-menu-dropdown/brand-menu-dropdown.component.html

@@ -7,9 +7,9 @@
   <div id="dropdown-nested" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-nested">
     <div class="d-flex" *ngIf="taxonomies[0]; let brands_taxonomy">
       <!-- to do -->
-     
-        <app-brand-list [taxons]="taxon" *ngFor="let taxon of brands_taxonomy.root.taxons" (click)="getBrands()"></app-brand-list>
-
+
+
+      <app-brand-list [taxons]="taxon" *ngFor="let taxon of brands_taxonomy.root.taxons" (click)="getBrands()"></app-brand-list>
     </div>
   </div>
-</div>
+</div>

src/app/layout/header/components/brand-menu-dropdown/brand-menu-dropdown.component.scss

@@ -1,4 +1,4 @@
 .dropdown-menu {
-    width: 50rem;
-  }
-  
+  width: 50rem;
+  padding: 10px;
+}

src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-details.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container" *ngIf="!screenwidth">
   <div class="row">
     <div class="col-md-8 ">
       <div class="row">
@@ -26,4 +26,36 @@ <h5>Popular Brands</h5>
       <img [src]="brand?.image_link" alt="" style="display: block; width: 100%;">
     </div>
   </div>
-</div>
+</div>
+
+<div class="container catcon" *ngIf="screenwidth">
+  <div class="row">
+    <div class="col-md-8 catconinner">
+
+      <div class="row catadjustwidth">
+        <div class="col-6 col-sm-6   p-0 no-gutters brandsmenu" [@popOverState]="stateName">
+          <ul>
+            <li *ngFor="let taxon of taxons let i= index" (click)="showCategoryonclick(taxon)">
+              <a class="sucathead" [routerLink]="['/products']" [queryParams]="{id: taxon.id}">
+                {{taxon.name}}
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div class="col-6 col-sm-6  p-0 no-gutters brandsmenu" [@popOverState]="stateName">
+          <ul class="pb-0">
+            <li (click)="backtolist()">Back</li>
+          </ul>
+          <app-categories-list [screenwidth]="screenwidth" [taxons]="menuTaxons"></app-categories-list>
+        </div>
+        <!-- <div class="col-md-5 p-0" *ngFor="let taxon of taxons">
+          <div>
+            <a [routerLink]="['/products']" [queryParams]="{id: taxon.id}">
+              <b class="sucathead">{{taxon.name}}</b>
+            </a>
+            <app-categories-list [taxons]="taxon.taxons"></app-categories-list>
+          </div>
+        </div> -->
+      </div>
+    </div>
+  </div>

src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-details.component.scss

@@ -1,10 +1,111 @@
 .sucathead {
-  color: #000;
-  text-decoration: underline;
+  color: #282828;
+  text-decoration: none;
   font-size: 14px;
 }
 
-a {
-  color: #747474;
+.brandsmenu a {
+  color: #fff;
   text-decoration: None;
+}
+
+.brandsmenu a:hover {
+  color: #a3d032;
+  text-decoration: underline;
+}
+
+.brandsmenu {
+  ul {
+    list-style: none;
+    padding: 0.5rem 0 0.5rem 1.5rem;
+    margin: 0px;
+    background-color: #adadad;
+    li {
+      padding: 0.5rem 0.4rem;
+      background-color: #adadad;
+      border-bottom: 1px solid #ccc;
+      color: #fff;
+      cursor: pointer;
+      &::after {
+        font-family: 'FontAwesome';
+        content: "\f105";
+        width: 20px;
+        height: 57px;
+        margin-right: 12px;
+        right: 0px;
+        position: absolute;
+        background-size: 10px;
+      }
+      &:hover::after {
+        color: #a3d032
+      }
+      &:hover {
+        background-color: #fff;
+        color: #a3d032 !important;
+        border-radius: 4px 0px 0px 4px;
+      }
+      uL>LI {
+        POSITION: absolute;
+        LEFT: 20%;
+        WIDTH: 78%;
+        TOP: 0PX;
+        display: NONE;
+      }
+    }
+  }
+}
+
+.catadjustwidth {
+  width: 220%;
+}
+
+@media screen and (min-width: 320px) and (max-width: 332x) {
+  .sucathead {
+    color: #fff;
+  }
+  .catadjustwidth {
+    width: 220%;
+  }
+}
+
+@media screen and (min-width: 375px) and (max-width: 413px) {
+  .sucathead {
+    color: #fff;
+  }
+  .catadjustwidth {
+    width: 216%;
+  }
+}
+
+@media screen and (min-width: 414px) and (max-width: 627px) {
+  .sucathead {
+    color: #fff;
+  }
+  .catadjustwidth {
+    width: 215%;
+  }
+}
+
+@media screen and (min-width: 628px) and (max-width: 767px) {
+  .sucathead {
+    color: #fff;
+  }
+  .catadjustwidth {
+    width: 215%;
+  }
+}
+
+@media screen and(min-width: 628px) and(max-width: 768px) {
+  .catadjustwidth {
+    width: 310%;
+  }
+  .brandsmenu a {
+    color: #fff !important;
+  }
+  .catcon {
+    padding: 0px;
+  }
+  .catconinner {
+    padding: 0px;
+  }
 }

src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-details.component.ts

@@ -1,19 +1,58 @@
 import { APP_DATA } from './../../../../../../shared/data/app-data';
-import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, OnChanges, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
 
 @Component({
   selector: 'app-categories-details',
   templateUrl: './categories-details.component.html',
-  styleUrls: ['./categories-details.component.scss']
+  styleUrls: ['./categories-details.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  animations: [
+    trigger('popOverState', [
+      state('show', style({
+        left: -50 + '%'
+      })),
+      state('hide', style({
+        left: 0
+      })),
+      transition('show => hide', animate('100ms ease-out')),
+      transition('hide => show', animate('200ms ease-in'))
+    ])
+  ]
 })
 export class CategoriesDetailsComponent implements OnInit {
   @Input() taxons;
   @Input() taxonName;
   @Input() BTaxon;
+  @Input() screenwidth;
+  menuTaxons: any;
+  @Output() onSubCatClicked: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  show = false;
+  get stateName() {
+    return this.show ? 'show' : 'hide'
+  }
 
   taxon = APP_DATA;
   constructor() { }
+
+  showCategoryonclick(taxon) {
+    this.show = !this.show;
+    this.menuTaxons = taxon.taxons;
+    this.onSubCatClicked.emit(true);
+  }
+  backtolist() {
+    this.show = !this.show;
+    this.onSubCatClicked.emit(false);
+  }
   ngOnInit() {
+
   }
   get brand() {
     return this.taxon[this.taxonName];

src/app/layout/header/components/categories-menu-dropdown/categories-components/categories-details/categories-list/categories-list.component.html

@@ -1,4 +1,13 @@
+<div *ngIf="!screenwidth">
+    <div *ngFor="let taxon of taxons">
+        <a [routerLink]="['/products']" [queryParams]="{id: taxon.id}">{{taxon.name}} </a>
+    </div>
+</div>
+<div class="subbandmenu" *ngIf="screenwidth">
+    <ul>
+        <li *ngFor="let taxon of taxons">
+            <a [routerLink]="['/products']" [queryParams]="{id: taxon.id}">{{taxon.name}} </a>
 
-<div *ngFor="let taxon of taxons">
-    <a [routerLink]="['/products']" [queryParams]="{id: taxon.id}">{{taxon.name}} </a>
+        </li>
+    </ul>
 </div>