fix a lot of problems and add js for menus

src/header.pug

@@ -14,7 +14,7 @@ sib-notifications(
 
 include templates/hd-user-avatar.pug
 
-details#user-controls
+details#user-controls.notLoggedIn
   summary(tabindex='0' role='button')
     sib-display#user-controls__profile(
       fields='firstName, account.picture'
@@ -24,11 +24,10 @@ details#user-controls
   #user-controls__panel
     include page-user-panel.pug
 
-.jsToggleLeftMenu.mobile-menu-icon
-  button.icon-menu
-
 button(role='log in' onclick="document.querySelector('sib-auth').login();") Login
 
+button.notLoggedIn.mobile-menu-icon.icon-menu#toggleMainMenu
+
 sib-auth
   sib-auth-provider(
     data-authority=`${authority}`

src/menu-left.pug

@@ -7,7 +7,7 @@ sib-widget(name='hd-create')
     p.create You are not part of any ${value} yet. To create a new one, you can go to the 
       sib-link(next='admin') administration panel
 
-nav#main__menu.jsLeftMenu.mobile-closed
+nav#main__menu.jsLeftMenu
   sib-router#navbar-router(default-route='members')
     //- sib-route.menu(name='members')
     //-   div.menu-label Members
@@ -19,32 +19,33 @@ nav#main__menu.jsLeftMenu.mobile-closed
     //- sib-route(name='job-offer-create', hidden)
     //- sib-route(name='job-offer-edit', use-id, hidden)
     //- div.divider
-    div.menu-wrapper
-      div.menu
-        div.menu-chevron
-          div.menu-icon.icon-arrow-up
-        div.menu-label Projects
-        div.menu-icon.icon-folder-alt
-      sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
-      div.sub-menu.menu-notification
-        sib-display.project-tab(
-          data-src=`${endpoints.projects}`
-          fields='project(customer.name, name), badge'
-          class-customer.name='project-customer'
-          class-name='project-name'
-          empty-widget='hd-create'
-          empty-value='project'
-          search-fields='team'
-          search-widget-team='sib-form-hidden'
-          search-value-team='-'
-          hd-inherit-user-id='search-value-team'
-          hd-inherit-widgets
-          widget-badge='hd-counter'
-          action-badge='badge'
-          order-by='customer.name'
-          next='project'
-        )
-    div.divider
+    //- div
+    //-   div.menu
+    //-     div.menu-chevron
+    //-       sib-link(next='admin-project-list')
+    //-         div.menu-icon.icon-arrow-right
+    //-     div.menu-label Projects
+    //-     div.menu-icon.icon-folder-alt
+    //-   sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
+    //-   div.sub-menu.menu-notification
+    //-     sib-display.project-tab(
+    //-       data-src=`${endpoints.projects}`
+    //-       fields='project(customer.name, name), badge'
+    //-       class-customer.name='project-customer'
+    //-       class-name='project-name'
+    //-       empty-widget='hd-create'
+    //-       empty-value='project'
+    //-       search-fields='team'
+    //-       search-widget-team='sib-form-hidden'
+    //-       search-value-team='-'
+    //-       hd-inherit-user-id='search-value-team'
+    //-       hd-inherit-widgets
+    //-       widget-badge='hd-counter'
+    //-       action-badge='badge'
+    //-       order-by='customer.name'
+    //-       next='project'
+    //-     )
+    //- div.divider
     div
       div.menu
         div.menu-chevron

src/page-admin.pug

@@ -1,4 +1,4 @@
-.views-container
+.views-container.sidebar-is-closed
   #admin-circles(hidden)
     include page-admin-circles.pug
   #admin-projects(hidden)
@@ -16,6 +16,6 @@ nav.jsRightMenu(role='navigation')
       sib-route(name='admin-circles')
         li
           a Circles
-      sib-route(name='admin-projects')
-        li
-          a Projects
+      //- sib-route(name='admin-projects')
+      //-   li
+      //-     a Projects

src/page-circle-edit.pug

@@ -3,7 +3,7 @@ div.content-box__info
   include templates/hd-user-avatar.pug
 
   sib-widget(name='hd-user-groups')
-    template ${value.name}
+    template ${await value.name}
 
   sib-widget(name='team-template-edit')
     template

src/page-circle-profile.pug

@@ -25,10 +25,10 @@ sib-router(default-route='circle-profile', hidden)
 
     sib-display.block(
       bind-resources
-      fields='members.user'
+      fields='members'
 
-      multiple-members.user=''
-      widget-members.user='circle-team-template'
+      multiple-members=''
+      widget-members='circle-team-template'
     )
 
     div.box-button

src/page-circle.pug

@@ -1,4 +1,4 @@
-.views-container
+.views-container.sidebar-is-closed
   .content-box.full-width.with-form
     div.content-box__header
       sib-ac-checker(permission='acl:Read', bind-resources)
@@ -9,9 +9,7 @@
           class-name='h1-like'
           class-description='h1-aside description'
         )
-        .mobile-sidebar-button.jsMobileSidebarOpenButton
-          button.icon-arrow-left-circle
-            span MENU
+        button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
     div.content-box__info
       sib-ac-checker(permission='acl:Read', bind-resources)
         #circle-chat(hidden)
@@ -19,7 +17,7 @@
         #circle-information(hidden)
           include page-circle-profile.pug
 
-nav.jsRightMenu.mobile-closed(role='navigation')
+nav.jsRightMenu(role='navigation')
   sib-router(default-route='circle-chat')
     ul
       li.jsOffsiteToggle

src/page-project.pug

@@ -1,4 +1,4 @@
-.views-container
+.views-container.sidebar-is-closed
   .content-box.full-width.with-form
     div.content-box__header
       sib-ac-checker(permission='acl:Read', bind-resources)
@@ -28,7 +28,7 @@ dialog(id='project-contributions-help').modal
     button.icon-close
   img(src='/images/contributions-help.png')
 
-nav.jsRightMenu.mobile-closed(role='navigation')
+nav.jsRightMenu(role='navigation')
   sib-router(default-route='project-chat')
     ul
       li.jsOffsiteToggle

src/scripts/index.js

@@ -48,14 +48,33 @@ function closeUserControls() {
   if (userControls) userControls.removeAttribute("open");
 }
 
+function closeLeftMenu() {
+  let leftMenu = document.querySelector('#main__menu');
+  if (leftMenu) leftMenu.removeAttribute("open");
+}
+
+function closeRightMenu() {
+  let rightMenu = document.querySelectorAll('.jsRightMenu');
+  if(Array.from(rightMenu).filter(el=>el.hasAttribute('open')).length > 0) {
+    Array.from(document.querySelectorAll('.views-container')).forEach(vC => vC.classList.toggle('sidebar-is-closed'));
+    Array.from(rightMenu).forEach(el => el.removeAttribute('open'));
+  }
+}
+
+function openRightMenu() {
+  let rightMenu = document.querySelectorAll('.jsRightMenu');
+  Array.from(rightMenu).forEach(el => el.setAttribute('open', ''));
+  Array.from(document.querySelectorAll('.views-container')).forEach(vC => vC.classList.toggle('sidebar-is-closed'));
+}
+
 document.addEventListener('DOMContentLoaded', function (event) {
   const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
-  const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
-  const viewsContainer = Array.from(document.querySelectorAll('.views-container'));
 
   //- View change event
-  // window.addEventListener('navigate', (event) => {
-  // });
+  window.addEventListener('navigate', (event) => {
+    closeLeftMenu();
+    closeUserControls();
+  });
 
   //- Toggle sub-menus
   menuWrappers.forEach(menuWrapper => {
@@ -65,35 +84,26 @@ document.addEventListener('DOMContentLoaded', function (event) {
     });
   });
 
-  //- Open/close menu on the right
-  rightMenus.forEach(rightMenu => {
-    const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
-
-    btnRightMenu.addEventListener('click', e => {
-      rightMenus.forEach(rM => rM.classList.toggle('offsite-is-closed'));
-      viewsContainer.forEach(vC => vC.classList.toggle('sidebar-is-closed'));
-    })
-  });
-
   //- Watch every sib-forms & update data-src of linked sib-display
-  document.querySelectorAll('sib-form').forEach(function(el) {
-    el.addEventListener("save", function(event) {
+  document.querySelectorAll('sib-form').forEach(function (el) {
+    el.addEventListener("save", function (event) {
       //clear cache on this resource
       //NOTE: this is required because the cache is not refreshed after POSTing changes on the resource
-      if(el.component.resource != null) el.component.resource.clearCache();
+      if (el.component.resource != null) el.component.resource.clearCache();
 
       // if of the edited resource || id of the container of the created resource
       const resourceId = event.detail.resource['@id'] || el.dataset.src;
 
       //update all displays which use this resource
       Array.from(document.querySelectorAll('sib-display'))
-      .filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource
-      .forEach(e => e.dataset.src = e.dataset.src); // and update them
+        .filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource
+        .forEach(e => e.dataset.src = e.dataset.src); // and update them
     });
   });
 
   document.querySelector('sib-auth').getUser().then(user => {
     if (user !== null) {
+      document.querySelectorAll('.notLoggedIn').forEach(el => el.style.visibility = 'visible');
       // Hide login button if already logged
       document.querySelector('button[role="log in"]').setAttribute('style', 'display:none !important');
       // Set current user id on set-user-id of sib-display
@@ -106,13 +116,52 @@ document.addEventListener('DOMContentLoaded', function (event) {
 
   // Document -> close menu
   document.addEventListener("click", event => {
-    if (!event.target.closest('#user-controls')) closeUserControls();
+    if (!event.target.closest('#user-controls')) {
+      closeUserControls();
+    }
+    if (!event.target.closest('#main__menu') && event.target.id != "toggleMainMenu") {
+      closeLeftMenu();
+    }
+    if (!event.target.className.includes('jsMobileSidebarOpenButton') && !event.target.className.includes('jsOffsiteToggle')) {
+      closeRightMenu();
+    }
+  });
+
+  document.querySelector('#toggleMainMenu').addEventListener('click', event => {
+    let leftMenu = document.querySelector('#main__menu');
+    if (leftMenu.hasAttribute('open')) {
+      closeLeftMenu();
+    } else {
+      leftMenu.setAttribute('open', '');
+    }
+  });
+
+  Array.from(document.querySelectorAll('.jsMobileSidebarOpenButton')).forEach(el => {
+    el.addEventListener('click', event => {
+      openRightMenu();
+    });
+  });
+
+  const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
+  rightMenus.forEach(rightMenu => {
+    const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
+    btnRightMenu.addEventListener('click', e => {
+      if (rightMenu.hasAttribute('open')) {
+        closeRightMenu();
+      } else {
+        openRightMenu();
+      }
+    })
   });
 
   // listen for keypress
   document.onkeydown = (e) => {
     e = e || window.event;
-    if (e.key === "Escape" || e.key === "Esc") closeUserControls();
+    if (e.key === "Escape" || e.key === "Esc") {
+      closeUserControls();
+      closeLeftMenu();
+      closeRightMenu();
+    }
   };
 
 });

src/styles/base/header.scss

@@ -56,6 +56,10 @@
     }
   }
 
+  .notLoggedIn {
+    visibility: hidden;
+  }
+
   sib-notifications {
 
     @include breakpoint(sm) {
@@ -259,6 +263,7 @@
     @include breakpoint(sm) {
       display: block;
       padding-left: 0;
+      font-size: 26px;
     }
   }
 }

src/styles/base/main.scss

@@ -212,19 +212,14 @@ h5 {
   .mobile-sidebar-button {
     @include breakpoint(sm) {
       float: right;
-      
-      button {
-        color: $color-233-18-29;
+      color: $color-233-18-29;
+      font-size: 1.8rem;
+      font-weight: bold!important;
 
-        &::before {
-          font-size: 2.2rem;
-          margin-right: 1.2rem;
-        }
-      }
-
-      span {
-        font-size: 1.8rem;
-        font-weight: bold;
+      &::before {
+        font-size: 2.2rem;
+        font-weight: normal;
+        margin-right: 1.2rem;
       }
     }
 

src/styles/base/menu-left.scss

@@ -189,9 +189,17 @@
     }
   }
 
-  &.jsLeftMenu.mobile-opened {
+  &.jsLeftMenu {
 
     @include breakpoint(sm) {
+      display: none;
+    }
+  }
+
+  &.jsLeftMenu[open] {
+
+    @include breakpoint(sm) {
+      display: block;
       bottom: 0;
       box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
       min-width: 80%;
@@ -201,11 +209,4 @@
       z-index: 1;
     }
   }
-
-  &.jsLeftMenu.mobile-closed {
-
-    @include breakpoint(sm) {
-      display: none;
-    }
-  }
 }

src/styles/components/sidebar.scss

@@ -15,8 +15,10 @@
     /*-webkit-backface-visibility: hidden;*/
 
     &.sidebar-is-closed {
-      margin-left: -15.5rem;
-      transform: translate(15.5rem);
+      @include breakpoint(769px, 0) {
+        margin-left: -15.5rem;
+        transform: translate(15.5rem);
+      }
     }
   }
 
@@ -111,7 +113,14 @@
       }
     }
 
-    &.jsRightMenu.offsite-is-closed {
+    &.jsRightMenu {
+
+      @include breakpoint(sm) {
+        display: none;
+      }
+    }
+
+    &.jsRightMenu:not([open]) {
       transform: translate(15.5rem);
 
       & .jsOffsiteToggle::before {
@@ -119,9 +128,10 @@
       }
     }
     
-    &.jsRightMenu.mobile-opened {
+    &.jsRightMenu[open] {
 
       @include breakpoint(sm) {
+        display: block;
         background: $color-221-51-90;
         bottom: 0;
         box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
@@ -132,12 +142,5 @@
         z-index: 1;
       }
     }
-
-    &.jsRightMenu.mobile-closed {
-
-      @include breakpoint(sm) {
-        display: none;
-      }
-    }
   }
 }

src/styles/layout/circle/circle-profile.scss

@@ -14,7 +14,7 @@
       grid-template-columns: 7vh auto;
       grid-template-rows: repeat(2, 5.2vh);
 
-      >[name='user.account.picture'] {
+      >[name='account.picture'] {
         align-items: center;
         align-self: center;
         background-color: $color-213-20-91;
@@ -61,7 +61,7 @@
           margin-bottom: 1px;
           margin-left: 0.6rem;
 
-          [name='user.groups'] {
+          [name='groups'] {
             @extend %tag-role;
           }
         }

src/templates/hd-circle-team.pug

@@ -3,23 +3,24 @@ include hd-user-avatar.pug
 sib-widget(name='circle-team-template')
   template
     sib-display(
-      data-src='${await value}'
-      fields='user.account.picture, sup(user.name, is_admin, user.groups), sub(user.profile.city)'
+      data-src='${await value.user}'
+      fields='account.picture, sup(name, isadmin, groups), sub(profile.city)'
+      value-isadmin='${await value.is_admin}'
 
-      class-user.name='user-name'
-      class-is_admin='tag-admin'
-      class-user.groups='tag-group'
-      class-user.profile.city='city'
+      class-name='user-name'
+      class-isadmin='tag-admin'
+      class-groups='tag-group'
+      class-profile.city='city'
 
-      widget-user.account.picture='hd-user-avatar'
-      widget-is_admin='hd-user-admin'
-      widget-user.groups='hd-user-groups'
+      widget-account.picture='hd-user-avatar'
+      widget-isadmin='hd-circle-user-admin'
+      widget-groups='hd-circle-user-groups'
 
-      multiple-user.groups=''
+      multiple-groups=''
     )
 
-sib-widget(name='hd-user-admin')
-  template ${await value ? "Administrator" : ""}
+sib-widget(name='hd-circle-user-admin')
+  template ${(await value) != "false" ? "Administrator" : ""}
 
-sib-widget(name='hd-user-groups')
+sib-widget(name='hd-circle-user-groups')
   template ${await value.name}

src/templates/hd-project-team.pug

@@ -12,14 +12,14 @@ sib-widget(name='hd-project-team')
       class-user.profile.city='city'
 
       widget-user.account.picture='hd-user-avatar'
-      widget-is_admin='hd-user-admin'
-      widget-user.groups='hd-user-groups'
+      widget-is_admin='hd-project-user-admin'
+      widget-user.groups='hd-project-user-groups'
 
       multiple-user.groups=''
     )
 
-sib-widget(name='hd-user-admin')
+sib-widget(name='hd-project-user-admin')
   template ${await value ? "Administrator" : ""}
 
-sib-widget(name='hd-user-groups')
+sib-widget(name='hd-project-user-groups')
   template ${await value.name}