From dc15b3dbd4e7acd7896b83b3af7d6497059a62a9 Mon Sep 17 00:00:00 2001
From: Carmine De Rosa <dslaky@gmail.com>
Date: Wed, 19 Aug 2020 09:25:39 +0200
Subject: [PATCH] add actions in header

.
---
 components/header/header.html |   9 +-
 components/header/header.scss | 176 ++++++++++++++++++++++------------
 src/scss/global.scss          |  11 ++-
 3 files changed, 134 insertions(+), 62 deletions(-)

diff --git a/components/header/header.html b/components/header/header.html
index d0f1370..812cef3 100644
--- a/components/header/header.html
+++ b/components/header/header.html
@@ -1,10 +1,15 @@
 <header class="component-header">
 
-  <div class="container d-flex h-100">
-    <div class="hamburger hamburger--spin my-auto">
+  <div class="container header-wrapper">
+    <button class="hamburger hamburger--spin my-auto">
       <span class="hamburger-box">
         <span class="hamburger-inner"></span>
       </span>
+    </button>
+
+    <div class="actions">
+      <button class="icon icon-user"></button>
+      <button class="icon icon-cart"><span class="qty">3</span></button>
     </div>
 
     <ul class="menu">
diff --git a/components/header/header.scss b/components/header/header.scss
index 629a9b6..637fea9 100644
--- a/components/header/header.scss
+++ b/components/header/header.scss
@@ -11,79 +11,115 @@
   background: $olive;
   color: $white;
 
-  .hamburger {
+  .header-wrapper {
     display: flex;
-    margin-right: 20px;
-  }
-
-  .menu {
-    display: none;
-    list-style: none;
-    margin: 0;
-    padding: 0;
+    position: relative;
 
-    .item {
+    .hamburger {
       display: flex;
-      color: $white;
-      margin: auto 20px;
-      font-size: $font-20;
-      letter-spacing: 2px;
+      margin-right: 20px;
+    }
 
-      .label {
+    .actions {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+
+      .icon {
+        position: relative;
+        margin: 0 5px;
+        padding: 0;
+        background: none;
+        border: none;
         color: $white;
+        font-size: $font-24;
+
+        .qty {
+          position: absolute;
+          top: -5px;
+          right: -5px;
+          height: 15px;
+          width: 15px;
+          border-radius: 50%;
+          background: $orange;
+          color: $white;
+          font-size: $font-12;
+          line-height: $font-16;
+          font-family: $font-sans;
+        }
       }
+    }
 
-      &.active {
-        border-bottom: 2px solid $white;
-      }
+    .menu {
+      display: none;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      .item {
+        display: flex;
+        color: $white;
+        margin: auto 20px;
+        font-size: $font-20;
+        letter-spacing: 2px;
 
-      &.disabled {
         .label {
-          color: $white-alpha;
+          color: $white;
+        }
+
+        &.active {
+          border-bottom: 2px solid $white;
+        }
+
+        &.disabled {
+          .label {
+            color: $white-alpha;
+          }
         }
       }
     }
-  }
 
-  .sidebar-menu {
-    position: fixed;
-    top: $header-height-mobile;
-    left: 0;
-    height: calc(100vh - #{$header-height-mobile});
-    background: $olive;
-    display: block;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    transform: translateX(-100%);
-    transition: transform .3s;
-
-    .item {
+    .sidebar-menu {
+      position: fixed;
+      top: $header-height-mobile;
+      left: 0;
+      height: calc(100vh - #{$header-height-mobile});
+      background: $olive;
       display: block;
-      color: $white;
-      margin: 20px;
-      font-size: $font-20;
-      letter-spacing: 2px;
-      padding: 20px;
-      border-bottom: 1px dotted $gray;
-
-      .label {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      transform: translateX(-100%);
+      transition: transform .3s;
+
+      .item {
+        display: block;
         color: $white;
-      }
-
-      &.active {
-        //border-bottom: 2px solid $white;
-      }
+        margin: 20px;
+        font-size: $font-20;
+        letter-spacing: 2px;
+        padding: 20px;
+        border-bottom: 1px dotted $gray;
 
-      &.disabled {
         .label {
-          color: $white-alpha;
+          color: $white;
+        }
+
+        &.active {
+          //border-bottom: 2px solid $white;
+        }
+
+        &.disabled {
+          .label {
+            color: $white-alpha;
+          }
         }
       }
-    }
 
-    &.active {
-      transform: translateX(0%);
+      &.active {
+        transform: translateX(0%);
+      }
     }
   }
 }
@@ -95,13 +131,35 @@
   .component-header {
     height: $header-height;
 
-    .menu {
-      display: flex;
-    }
+    .header-wrapper {
+      .actions {
+        position: absolute;
+        right: 0;
+
+        .icon {
+          margin: 0 5px;
+          font-size: $font-30;
+
+          .qty {
+            position: absolute;
+            top: -15px;
+            right: -15px;
+            height: 25px;
+            width: 25px;
+            font-size: $font-20;
+            line-height: $font-24;
+          }
+        }
+      }
 
-    .sidebar-menu {
-      top: $header-height;
-      height: calc(100vh - #{$header-height});
+      .menu {
+        display: flex;
+      }
+
+      .sidebar-menu {
+        top: $header-height;
+        height: calc(100vh - #{$header-height});
+      }
     }
   }
 }
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 80f164a..00839e6 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -26,6 +26,11 @@ button {
     outline: none;
     text-decoration: none;
   }
+
+  &::-moz-focus-inner {
+    border: 0 !important;
+  }
+
 }
 
 .font-serif {
@@ -101,7 +106,11 @@ button {
 .main-content {
 
   min-height: calc(100vh - #{$footer-height});
-  padding: $header-height 40px 0 40px;
+  padding: $header-height-mobile 40px 0 40px;
+
+  @media (min-width: map-get($grid-breakpoints, 'md')) {
+    padding: $header-height 40px 0 40px;
+  }
 
   &.container-fluid {
     &.full-width {