feature: mobile - header

package-lock.json

@@ -1159,9 +1159,9 @@
       }
     },
     "@startinblox/hubl-styling-framework": {
-      "version": "1.0.46",
+      "version": "1.0.48",
-      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.46.tgz",
+      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.48.tgz",
-      "integrity": "sha512-triQEguPDrSSXCBcKwyMTtQRhKz0afkuyHCxQW8Er+4jn+HgMAXMcUcSUZR/hSg6xxxtg7g1YiLOPcDZCZYCjA=="
+      "integrity": "sha512-/bgu6Y2OZvnQhZ485knrgfFZZLm2UyxGcNiIQwtkze96feuJ91h5a0qa6vc6eRmKT4SBQSYHLoDtN4v/2Bcw4Q=="
     },
     "@types/q": {
       "version": "1.5.4",

package.json

@@ -45,7 +45,7 @@
     ]
   },
   "dependencies": {
-    "@startinblox/hubl-styling-framework": "^1.0.46",
+    "@startinblox/hubl-styling-framework": "^1.0.48",
     "fs-extra": "^9.0.1",
     "normalize.css": "^8.0.1",
     "parcel-bundler": "^1.12.4",

src/index.pug

@@ -44,7 +44,7 @@ html(lang="en")
       //- include views/partials/notifications.pug
       include views/partials/widgets.pug
 
-      header#header.segment.sm-full.lg-full.padding-left-large.padding-right-large.shadow-small.text-disable-selection
+      header#header.segment.sm-full.lg-full.padding-left-large.padding-right-large.sm-padding-right-xsmall.sm-padding-left-small.shadow-small.text-disable-selection
         include views/partials/header.pug
 
       nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.lg-quarter.jsLeftMenu

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) {

src/views/partials/header.pug

@@ -23,9 +23,10 @@ div
               type="text"
             )
 
+    //- User menu visible on large screens
     details.segment.sm-hidden.notLoggedIn
       summary.text-right
-        solid-display.labelled-avatar(
+        solid-display.labelled-avatar.padding-top-xsmall(
           fields='segment1(account.picture), segment2(first_name), segment3(button)'
           class-segment1='segment'
           class-segment2='segment margin-left-small'
@@ -71,17 +72,25 @@ div
           data-client-name=`${clientName || "Hubl"}`
         )
 
-
+    //- User menu visible on small screens
-
+    details.user-menu.segment.lg-hidden.notLoggedIn
-
+      summary
-
-    details.segment.lg-hidden.notLoggedIn
-      summary.text-right
         solid-display.labelled-avatar(
           fields='segment1(account.picture), segment3(button)'
           class-segment1='segment'
+          class-segment3='segment sm-arrow-down'
+          class-account.picture="avatar"
+          class-button='icon icon-arrow-down'
+          widget-account.picture='hubl-user-avatar'
+          bind-user
+        )
+        solid-display.user-firstname(
+          fields='segment1(account.picture), segment2(first_name), segment3(button)'
+          class-segment1='segment'
+          class-segment2='segment margin-left-small'
           class-segment3='segment'
           class-account.picture="avatar"
+          class-first_name="text-semibold text-color-heading"
           class-button='icon icon-arrow-down'
           widget-account.picture='hubl-user-avatar'
           bind-user
@@ -91,26 +100,26 @@ div
           ul
             if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
               li.border-bottom.border-color-grey
-                solid-link.segment.padding-small.text-hover(next='profile' data-trans='header.myProfile')
+                solid-link.segment.padding-small.sm-padding-medium.sm-padding-left-xlarge.text-hover(next='profile' data-trans='header.myProfile')
-            li.segment.padding-small.border-bottom.border-color-grey
+            li.segment.padding-small.sm-padding-medium.sm-padding-left-xlarge.border-bottom.border-color-grey
               div(data-trans='header.admin')
               ul.text-normal
                 if (endpoints.users || (endpoints.get && endpoints.get.users))
                   solid-route.text-hover(name='admin-communities')
-                    li.segment.padding-top-small
+                    li.segment.padding-top-small.sm-padding-top-medium
-                      a.icon.icon-people.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.community')
+                      a.icon.icon-people.icon-third.icon-small.icon-margin-right-xsmall(data-trans='admin.menuRight.community')
                 if endpoints.circles || (endpoints.get && endpoints.get.circles)
                   solid-route.text-hover(name='admin-circles')
-                    li.segment.padding-top-small
+                    li.segment.padding-top-small.sm-padding-top-medium
-                      a.icon.icon-globe.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.circles')
+                      a.icon.icon-globe.icon-third.icon-small.icon-margin-right-xsmall(data-trans='admin.menuRight.circles')
                 if endpoints.projects || (endpoints.get && endpoints.get.projects)
                   solid-route.text-hover(name='admin-projects')
-                    li.segment.padding-top-small
+                    li.segment.padding-top-small.sm-padding-top-medium
-                      a.icon.icon-folder-alt.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.projects')
+                      a.icon.icon-folder-alt.icon-third.icon-small.icon-margin-right-xsmall(data-trans='admin.menuRight.projects')
             li.border-bottom.border-color-grey
-              solid-link.segment.padding-small.text-hover(next='about' data-trans='header.about')
+              solid-link.segment.padding-small.sm-padding-medium.sm-padding-left-xlarge.text-hover(next='about' data-trans='header.about')
             li
-              button.segment.padding-small.text-hover.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
+              button.segment.padding-small.sm-padding-medium.sm-padding-left-xlarge.text-hover.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
 
       button.notLoggedIn.segment.lg-hidden.icon-menu#toggleMainMenu