From eaa74781963e9760df5ce643a1c033eb3b3f1aec Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Tue, 9 Jun 2020 12:10:13 +0200
Subject: [PATCH] update: better look of user panel on mobile

---
 src/styles/base/header.scss | 40 +++++++++++++++++++++++--------------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index f968b66..b0baab0 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -127,9 +127,13 @@ sib-notifications {
     }
     
     &:focus {
-      background-color: var(--color-user-panel-header-background-open);
+      background-color: transparent;
       color: var(--color-user-panel-header-text-open);
       outline: none;
+
+      @include breakpoint(lg) {
+        background-color: var(--color-user-panel-header-background-open);
+      }
     }
   }
 
@@ -143,14 +147,14 @@ sib-notifications {
       }
 
       hubl-user-avatar {
-        height: 4.8rem;
-        margin-right: 2rem;
-        width: 4.8rem;
+        height: 3.3rem;
+        margin-right: 0;
+        width: 3.3rem;
 
-        @include breakpoint(sm) {
-          height: 3.3rem;
-          margin-right: 0;
-          width: 3.3rem;
+        @include breakpoint(lg) {
+          height: 4.8rem;
+          margin-right: 2rem;
+          width: 4.8rem;
         }
       }
       
@@ -178,8 +182,14 @@ sib-notifications {
     position: absolute;
     right: 0;
     z-index: 1;
-    width: 100%;
-    top: 83px;
+    /* Quick fix for mobile version */
+    width: 215px;
+    top: 42px;
+    
+    @include breakpoint (lg) {
+      width: 100%;
+      top: 83px;
+    }
     
     > nav {
       background-color: var(--color-user-panel-list-background);
@@ -245,12 +255,12 @@ sib-notifications {
 
 .mobile-menu-icon {
 
-  display: none;
+  display: block;
+  padding-left: 0;
+  font-size: 24px;
 
-  @include breakpoint(sm) {
-    display: block;
-    padding-left: 0;
-    font-size: 24px;
+  @include breakpoint(lg) {
+    display: none;
   }
 }