feature: mobile header wip

src/index.pug

@@ -44,10 +44,10 @@ html(lang="en")
       //- include views/partials/notifications.pug
       include views/partials/widgets.pug
 
-      header#header.segment.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.shadow-small.text-disable-selection
         include views/partials/header.pug
 
-      nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.lg-quarter
+      nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.lg-quarter.jsLeftMenu
         include views/partials/menu-left.pug
 
       main#content.segment.lg-three-quarter.text-top.notLoggedIn

src/styles/header/_index.scss

@@ -22,11 +22,21 @@ 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 {
@@ -247,6 +257,10 @@ header {
   }
 
   details {
+    .icon-arrow-down {
+      
+    }
+
     &[open] {
       summary {
         background-color: var(--color-heading);

src/styles/left-nav/_index.scss

@@ -1,4 +1,4 @@
-nav {
+nav#main__menu {
   height: calc(100vh - 72px);
 
   .unread {
@@ -78,5 +78,28 @@ nav {
     padding-left: 20px;
     width: 87%;
   }
+
+  &.jsLeftMenu {
+    display: none;
+
+    @media(min-width: 1024px) {
+      display: block;
+    }
+  }
+
+  &.jsLeftMenu[open] {
+    display: block;
+    bottom: 0;
+    box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
+    width: 80vw;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 1000;
+
+    @media(min-width: 1024px) {
+      display: none;
+    }
+  }
 }
 

src/views/partials/header.pug

@@ -1,8 +1,9 @@
 
 div
 
-  solid-link(next='dashboard')
+  solid-link.segment.sm-hidden(next='dashboard')
     img.logo(src=`${clientLogo || '/images/logo.webp'}`)
+  button.notLoggedIn.segment.lg-hidden.icon-menu#toggleMainMenu
 
 
   span.tag.reversed.text-semibold(data-trans='header.beta')
@@ -22,7 +23,7 @@ div
               type="text"
             )
 
-    details.segment.notLoggedIn
+    details.segment.sm-hidden.notLoggedIn
       summary.text-right
         solid-display.labelled-avatar(
           fields='segment1(account.picture), segment2(first_name), segment3(button)'
@@ -70,3 +71,54 @@ div
           data-client-name=`${clientName || "Hubl"}`
         )
 
+
+
+
+
+    details.segment.lg-hidden.notLoggedIn
+      summary.text-right
+        solid-display.labelled-avatar(
+          fields='segment1(account.picture), segment3(button)'
+          class-segment1='segment'
+          class-segment3='segment'
+          class-account.picture="avatar"
+          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')
+
+      button.notLoggedIn.segment.lg-hidden.icon-menu#toggleMainMenu
+
+      sib-auth(style='display:none!important', auto-login)
+        sib-auth-provider(
+          data-authority=`${authority}`
+          data-id=`${authorityName || "authority"}`
+          data-client-name=`${clientName || "Hubl"}`
+        )
+ 
+