feature: mobile - header

src/styles/header/_index.scss

@@ -22,21 +22,11 @@ header {
     }
   }
 
-  .icon-menu {
-    font-size: 24px;
-  }
-
   .tag {
     align-self: flex-start;
     padding: 4px 15px;
     margin-top: 16px;
     margin-left: 60px;
-
-    @media (max-width: 640px) {
-      align-self: center;
-      margin-top: 0;
-      margin-left: 15px;
-    }
   }
 
   solid-notifications {
@@ -257,9 +247,6 @@ header {
   }
 
   details {
-    .icon-arrow-down {
-      
-    }
 
     &[open] {
       summary {
@@ -286,9 +273,6 @@ header {
         display: none;
       }
       /* End */
-      >.labelled-avatar {
-        padding-top: 11px;
-      }
     }
   }
 
@@ -319,4 +303,105 @@ header {
       }
     }
   }
+
+
+
+
+
+  @media (max-width: 768px) {
+    height: 50px;
+
+    .icon-menu {
+      font-size: 24px;
+    }
+
+    .tag {
+      align-self: center;
+      margin: 0;
+      margin-left: 15px;
+    }
+    
+    details.user-menu {
+
+      .user-firstname {
+        display: none;
+      }
+
+      summary {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        height: 50px;
+        padding: 0;
+
+        >.labelled-avatar .avatar {
+          height: 32px;
+          width: 32px;
+        }
+
+        .sm-arrow-down {
+          width: 16px;
+          height: 16px;
+          background: white;
+          border-radius: 50%;
+          text-align: center;
+          position: absolute;
+          top: 26px;
+          right: -1px;
+          box-shadow: 0 0 4px 0 rgba(46, 63, 87, 0.18);
+
+          .icon::before {
+            font-size: 10px;
+          }
+        }
+      }
+
+      &[open] {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 72px;
+
+        summary {
+          display: flex;
+          height: 72px;
+        }
+
+        .labelled-avatar {
+          display: none;
+        }
+
+        .user-firstname {
+          display: flex;
+          align-items: center;
+          padding-right: 15px;
+          padding-left: 15px;
+          width: 100%;
+
+          [name="segment3"] {
+            margin-left: auto;
+
+            .icon::before {
+              font-size: 20px;
+            }
+          }
+        }
+
+        .panel {
+          top: 72px;
+          height: calc(100vh - 72px);
+          background: white;
+
+          >nav {
+            box-shadow: none;
+
+            >ul>li:last-child {
+              border-bottom: 1px solid #d6cece;
+            }
+          }
+        }
+      }
+    }
+  }
 }

src/styles/index.scss

@@ -175,7 +175,7 @@ solid-display>div {
 }
 
 
-$small: "max-width: 640px";
+$small: "max-width: 768px";
 
 .segment {
   @media($small) {