feature: header - last styling + alignment with flexbox

src/dependencies.pug

@@ -26,7 +26,7 @@ if endpoints.get
       //- script(type="module" src="/lib/solid-job-board/dist/index.js" defer)
 
   if endpoints.get.uploads && endpoints.get.skills && endpoints.get.users
-      script(type="module" src="https://cdn.skypack.dev/@startinblox/component-directory@1.3" defer)
+      //-script(type="module" src="https://cdn.skypack.dev/@startinblox/component-directory@1.3" defer)
       //- script(type="module" src="/lib/solid-directory/dist/index.js" defer)
 
   if endpoints.get.dashboards

src/index.pug

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

src/styles/header/_index.scss

@@ -3,78 +3,72 @@ header {
   position: fixed;
   z-index: 999;
 
-  .v-aligned::before {
+  solid-link {
-    content: "";
+    align-self: center;
-    display: inline-block;
-    vertical-align: middle;
-    height: 100%;
-  }
 
-  img.logo {
+    img.logo {
-    max-width: 200px;
+      max-width: 200px;
-  }
+      max-height: 34px;
-
+      vertical-align: middle;
-  /* Remove the disclosure triangle */
-  details {
-    &[open] {
-      summary {
-        background-color: var(--color-heading);
-        color: #fff;
-        .text-color-heading {
-          color: #fff;
-        }
-      }
-    }
-    summary {
-      display: block;
-      cursor: pointer;
-      padding-right: 15px;
-      padding-left: 15px;
-      &::marker {
-        display: none;
-      }
     }
   }
-  /* End */
+
+  .tag {
+    align-self: flex-start;
+    padding: 4px 15px;
+    margin-top: 16px;
+    margin-left: 60px;
+  }
+
+  >div {
+    display: flex;
+  }
+
+  div.test {
+    display: flex;
+    margin-left: auto;
+  }
 
   solid-notifications {
     color: var(--color-heading);
+    align-self: center;
 
     @media(min-width: 640px) {
-      padding: 0;
+      margin-right: 23px;
     }
 
     .solid-notifications__container {
       position: relative;
 
-      .solid-notifications__button {
+      &[open] summary {
-        font-size: 2.5rem;
+        background-color: white;
+        color: var(--color-heading);
+      }
 
-        @media(min-width: 1024px) {
+      .solid-notifications__button {
-          font-size: 3rem;
+        font-size: 24px;
-        }
 
         &::before {
           margin-left: 0;
         }
 
+        &:hover {
+          background: white;
+        }
+
         img {
           display: none;
         }
 
         .solid-notifications__counter {
-          left: 2rem;
+          left: 21px;
           position: absolute;
           top: 1px;
 
-          @media(min-width: 1024px) {
-            left: 2.1rem;
-            top: -3px;
-          }
-
           span {
             background-color: var(--color-primary);
             color: white;
+            font-size: 11px;
           }
         }
       }
@@ -91,8 +85,8 @@ header {
           display: block;
           position: absolute;
           left: auto;
-          right: -2.1em;
+          right: -2.2em;
-          top: 5em;
+          top: 4em;
           transform: initial;
           width: 0;
           z-index: 4;
@@ -129,7 +123,7 @@ header {
           position: absolute;
           left: auto;
           right: -2.3em;
-          top: 3.95em;
+          top: 2.95em;
           width: 347px;
         }
 
@@ -168,7 +162,7 @@ header {
           }
 
           .solid-notification {
-            padding: 1.2rem 0 1.5rem;
+            padding: 16px 0 5px;
 
             &[data-read] {
               opacity: 0.5;
@@ -180,8 +174,8 @@ header {
               display: flex;
               height: 35px;
               justify-content: center;
-              margin-left: 1.6rem;
+              margin-left: 16px;
-              margin-right: 1.4rem;
+              margin-right: 14px;
               overflow: hidden;
               position: relative;
               vertical-align: middle;
@@ -206,7 +200,7 @@ header {
 
               .solid-notification__title {
                 color: var(--color-heading);
-                font-size: 1.3rem;
+                font-size: 13px;
                 font-weight: 600;
 
                 .solid-notification__title__side {
@@ -225,8 +219,8 @@ header {
 
               .solid-notification__summary {
                 color: #636363;
-                font-size: 1.2rem;
+                font-size: 12px;
-                line-height: 1.7rem;
+                line-height: 17px;
                 margin-top: 4px;
 
                 @media(min-width: 640px) {
@@ -251,4 +245,61 @@ header {
       }
     }
   }
+
+  details {
+    &[open] {
+      summary {
+        background-color: var(--color-heading);
+        color: #fff;
+        .text-color-heading {
+          color: #fff;
+        }
+      }
+    }
+    summary {
+      display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
+      cursor: pointer;
+      padding-right: 15px;
+      padding-left: 15px;
+      height: 72px;
+
+      /* To remove the disclosure triangle on Chrome (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Customizing_the_disclosure_widget) */
+      &::marker,
+      &::-webkit-details-marker {
+        display: none;
+      }
+      /* End */
+      >.labelled-avatar {
+        padding-top: 11px;
+      }
+    }
+  }
+
+  .panel {
+    height: 0;
+    position: absolute;
+    right: 0;
+    z-index: 1;
+    /* Quick fix for mobile version */
+    width: 100%;
+    top: 72px;
+
+    >nav {
+      box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
+      height: auto;
+      width: 100%;
+
+      solid-route,
+      solid-link,
+      button {
+        display: block;
+      }
+
+      li,
+      button {
+        width: 100%;
+        text-align: left;
+      }
+    }
+  }
 }

src/views/partials/header.pug

@@ -1,61 +1,63 @@
-.segment.lg-quarter
+
+div
+
   solid-link(next='dashboard')
     img.logo(src=`${clientLogo || '/images/logo.png'}`)
 
-.segment.lg-quarter
-  span.tag.reversed.color-primary.text-semibold(data-trans='header.beta')
 
-.segment.lg-quarter
+  span.tag.reversed.text-semibold(data-trans='header.beta')
-  solid-notifications.notLoggedIn(
-    nested-field="inbox"
-    bind-user
-  )
 
-details.segment.notLoggedIn
+  div.test
-  summary.text-right(style='height:72px;padding-top:11px;')
+    solid-notifications.segment.notLoggedIn(
-    solid-display.labelled-avatar(
+      nested-field="inbox"
-      fields='segment1(account.picture), segment2(first_name), segment3(button)'
-      class-segment1='segment'
-      class-segment2='segment margin-left-small'
-      class-segment3='segment margin-left-xxsmall'
-      class-account.picture="avatar"
-      class-first_name="text-small text-semibold text-color-heading"
-      class-button='icon icon-arrow-down'
-      widget-account.picture='hubl-user-avatar'
       bind-user
     )
-  div
-    nav.bg-color-white.text-semibold.text-color-heading(style="position:absolute")
-      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')
-        li.segment.padding-small.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
-                  a.icon.icon-people.icon-third.icon-small.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
-                  a.icon.icon-globe.icon-third.icon-small.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
-                  a.icon.icon-folder-alt.icon-third.icon-small.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')
-        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.notLoggedIn.segment.lg-hidden.icon-menu#toggleMainMenu
+    details.segment.notLoggedIn
+      summary.text-right
+        solid-display.labelled-avatar(
+          fields='segment1(account.picture), segment2(first_name), segment3(button)'
+          class-segment1='segment'
+          class-segment2='segment margin-left-small'
+          class-segment3='segment margin-left-xxsmall'
+          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
+        )
+      div.panel
+        nav.bg-color-white.text-semibold.text-color-heading
+          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')
+            li.segment.padding-small.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
+                      a.icon.icon-people.icon-third.icon-small.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
+                      a.icon.icon-globe.icon-third.icon-small.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
+                      a.icon.icon-folder-alt.icon-third.icon-small.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')
+            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')
 
-  sib-auth(style='display:none!important', auto-login)
+      button.notLoggedIn.segment.lg-hidden.icon-menu#toggleMainMenu
-    sib-auth-provider(
+
-      data-authority=`${authority}`
+      sib-auth(style='display:none!important', auto-login)
-      data-id=`${authorityName || "authority"}`
+        sib-auth-provider(
-      data-client-name=`${clientName || "Hubl"}`
+          data-authority=`${authority}`
-    )
+          data-id=`${authorityName || "authority"}`
+          data-client-name=`${clientName || "Hubl"}`
+        )