src/dependencies.pug

@@ -4,13 +4,8 @@
 //- script(src="lib/html-imports.js")
 
 script(
+  type="module"
   src="https://unpkg.com/@startinblox/oidc@0.5"
-  data-authority=`${sdn}/openid/`,
-  data-client_id=`${client_id}`,
-  data-response_type='id_token token',
-  data-scope='openid profile email',
-  data-automaticSilentRenew='true',
-  data-loadUserInfo='true'
 )
 
 script(src="/scripts/index.js")
@@ -36,4 +31,5 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
 script(type="module" src="https://unpkg.com/@startinblox/core@0.6")
 script(type="module" src="https://unpkg.com/@startinblox/router@0.6")
 script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
+script(type="module" src="https://unpkg.com/@startinblox/component-notifications")
 

src/header.pug

@@ -7,16 +7,33 @@
   i#search-icon.icon-magnifier(aria-hidden='true')
   i#close-search-icon.icon-close(aria-hidden='true')
 
-details
-  summary#notifications-button
-    div.menu-notification
-      div 7
-  #notifications
-    include page-notifications.pug
-
-sib-display#profile(
-  data-fields='first_name, account.picture',
-  widget-account.picture='sib-display-img',
+sib-notifications(
+  id-suffix="inbox",
   bind-user
 )
 
+details#user-controls
+  summary(tabindex='0' role='button')
+    sib-display#user-controls__profile(
+      data-fields='first_name, account.picture',
+      widget-account.picture='sib-display-img',
+      bind-user
+    )
+  #user-controls__panel
+    include page-user-panel.pug
+
+button#login(onclick="document.querySelector('sib-auth').login();") login
+
+
+sib-auth
+  sib-auth-provider(
+    class="sib-auth-provider"
+    data-authority=`${sdn}/openid/`
+    data-client_id=`${client_id}`,
+    data-id="paris"
+    data-response_type='id_token token',
+    data-scope='openid profile email',
+    data-automaticSilentRenew='true',
+    data-loadUserInfo='true'
+  )
+

src/index.pug

@@ -10,7 +10,7 @@ html(lang="en")
     include dependencies.pug
   body
     div.layer
-      header#header
+      header#header(role='banner')
         include header.pug
       #content
         include menu-left.pug

src/page-notifications.pug

-div.frame
-  h1 Notifications
-
-  sib-display(
-    bind-user
-    data-fields='summary'
-)
\ No newline at end of file

src/page-project-profile.pug.orig

-.frame
-
-  include templates/template-customer.pug
-  include templates/template-team.pug
-
-  sib-display(
-    data-fields='block-title, infos, block-lead, block-fee, block-customer, block-team',
-    extra-context='{"project-profile":"${sdn}/projects/"}'
-    
-    set-block-title='const-title1, number, customer.name, const-title2, name, entitled, creationDate',
-    value-const-title1='N°',
-    value-const-title2='-',
-    value-entitled='Creation date:'
-
-    set-infos='block-description, block-logo',
-    set-block-description='label-description, description',
-    set-block-logo='customer.logo',
-    value-label-description='DESCRIPTION:',
-    widget-customer.logo='sib-display-img',
-
-    set-block-fee='label-fee, details-cell, details-business',
-    set-details-cell='cell-name, cell-fee, percentage',
-    set-details-business='business-contribution, businessProvider, comma, businessProviderFee, percentage',
-    value-label-fee='FEE:',
-    value-cell-name='Happy Dev Paris:',
-    value-cell-fee='5',
-    value-percentage='%',
-    value-business-contribution='Business contribution:',
-    value-comma=', ',
-
-    set-block-customer='label-customer, customer',
-    value-label-customer='CUSTOMER INFORMATIONS:'
-    widget-customer='customer-template',
-    
-    set-block-team='label-team, members',
-    value-label-team='TEAM:'
-    widget-members='team-template',
-    multiple-members,
-    
-    bind-resources
-  )
-<<<<<<< HEAD
-
-  div(name='block-team')
-    h2(name='label-team') Team:
-    sib-display(
-      id-suffix='members',
-      data-fields='teammate-img, teammate-profile, teammate-job',
-      set-teammate-img='user.account.picture',
-      set-teammate-profile='user.first_name, user.last_name, user.groups',
-      set-teammate-job='name',
-      widget-user.account.picture='sib-display-img',
-      widget-user.groups='sib-display-lookuplist',
-      next='profile',
-      bind-resources,
-    )
-=======
->>>>>>> b8190bc... ui(all pages): MR!13 - upgrade to sib-core v0.6

src/page-user-panel.pug

+nav(role="user's functionalities menu")
+  sib-router
+    ul
+      sib-route(name='')
+        li
+          a(href='#') My profile
+      sib-route(name='')
+        li
+          a(href='#') Settings
+      sib-route(name='')
+        li
+          a Admin
+    sib-route
+      button(role='log out') Log out

src/scripts/index.js

@@ -45,5 +45,4 @@ document.addEventListener('DOMContentLoaded', function (event) {
       rightMenu.classList.toggle('offsite-is-closed');
     })
   })
-  
 });

src/styles/header.scss

@@ -73,81 +73,149 @@
 }
 
 details {
-  summary::-webkit-details-marker {
-    display: none;
+  cursor: pointer;
+
+  summary {
+
+    &::-moz-list-bullet {
+      list-style-type: none;
+    }
+
+    &::-webkit-details-marker {
+      display: none;
+    }
   }
+}
 
-  #notifications-button {
-    cursor: pointer;
+details {
+  position: relative;
+
+  .sib-notifications__button {
+    @include icon('bell');
     font-size: 3rem;
-    list-style-type: none;
-    position: relative;
-    @include icon(bell);
-    
-    .menu-notification {
-      //flex-basis: 3em;
-      align-items: center;
-      display: flex;
-      flex-direction: column;
-      flex-grow: 0;
-      flex-shrink: 0;
-      justify-content: center;
-      left: 0.3rem;
+
+    &::before {
+      margin-left: 0;
+    }
+
+    img {
+      display: none;
+    }
+
+    .sib-notifications__counter {
+      left: 2.1rem;
       position: absolute;
-      top: -0.3rem;
-      width: 2em;
+      top: -3px;
+    }
+  }
+
+  .sib-notifications__list {
+    position: absolute;
+    right: 0;
+    top: 5.6rem;
+  }
+}
+
+details#user-controls {
+
+  summary:focus {
+    background-color: $color-purple-dark;
+    color: $color-white;
+    outline: none;
+  }
 
-      @extend %notification;
+  #user-controls__profile {
+    div {
+      display: flex;
+      flex-direction: row-reverse;
+      
+      > * {
+        vertical-align: middle;
+      }
+    
+      img {
+        border-radius: 100%;
+        height: 4.8rem;
+        margin-right: 2rem;
+        object-fit: cover;
+        object-position: center;
+        width: 4.8rem;
+      }
+
+      sib-display-div[name='first_name'] {
+        align-items: center;
+        display: flex;
+
+        div[name='first_name'] {
+          align-items: flex-end;
+          display: flex;
+          font-size: 1.8rem;
+          font-weight: 600;
+          @include icon('arrow-down');
+    
+          &::before {
+            margin-left: 1.5rem;
+          }
+        }
+      }
     }
   }
 
-  #notifications {
-    bottom: 0;
+  #user-controls__panel {
     height: 0;
-    left: 0;
     position: absolute;
     right: 0;
     z-index: 1;
-  
-    > div {
+    
+    > nav {
+      background-color: $color-white;
+      box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
       position: absolute;
       right: 0;
       top: 0;
+      width: 208px;
+      
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        
+        li {
+          border-bottom: 1px solid $color-213-20-91;
+          margin-right: 0;
+          padding: 1.6rem 1.3rem;
+
+          a {
+            color: $color-text-base;
+            text-decoration: none;
+          }
+        }
+      }
+
+      button {
+        color: $color-text-base;
+        margin: 1.6rem 1.3rem;
+      }
     }
   }
-}
 
-#profile {
-  div {
-    display: flex;
-    flex-direction: row-reverse;
-    
-    > * {
-      vertical-align: middle;
-    }
-  
-    img {
-      border-radius: 100%;
-      height: 48px;
-      margin-right: 2rem;
-      object-fit: cover;
-      object-position: center;
-      width: 48px;
-    }
+  &[open] {
+    background-color: $color-purple-dark;
+    color: $color-white;
 
-    sib-display-div[name='first_name'] {
-      align-items: center;
-      display: flex;
+    #user-controls__profile {
 
-      div[name='first_name'] {
-        align-items: flex-end;
-        display: flex;
-        font-size: 1.8rem;
-        font-weight: 600;
-        @include icon('arrow-down');
-  
-        &::before {
-          margin-left: 1.5rem;
+      div {
+
+        sib-display-div[name='first_name'] {
+
+          div[name='first_name'] {
+            @include icon('close');
+      
+            &::before {
+              margin-left: 1.5rem;
+            }
+          }
         }
       }
     }

src/styles/main.scss

@@ -13,6 +13,7 @@
 :root {
   font-size: 62.5%;
   font-family: Open Sans, sans-serif;
+  --sib-notifications-theme: #{$color-46-100-50};
   
   body {
     //box-sizing: border-box;

src/styles/menu-left.scss

@@ -93,7 +93,9 @@
   
         > sib-display {
           
-          @extend %notification;
+          > div:first-of-type {
+            @extend %notification;
+          }
         }
       }
 

src/styles/variables.scss

@@ -6,6 +6,7 @@ $color-white:            hsl(0, 0%,100%);
 $color-selective-yellow: hsl(43, 100%, 50%);
 $color-mikado-yellow:    hsl(45, 95%, 54%);
 $color-mustard:          hsl(46, 100%, 67%);
+$color-46-100-50:        hsl(46, 100%, 50%);
 
 $color-rolling-stone:    hsl(210, 4%, 50%);
 $color-taupe-gray:       hsl(210, 5%, 56%);
@@ -14,6 +15,7 @@ $color-anti-flash-white: hsl(210, 25%, 95%);
 $color-text-base:        hsl(213, 4%, 50%);
 $color-gainsboro:        hsl(213, 13%, 86%);
 $color-gainsboro-a02:    hsla(213, 13%, 86%, 0.2);
+$color-213-20-91:        hsl(213, 20%, 91%);
 $color-bombay:           hsl(215, 9%, 73%);
 $color-manatee:          hsl(215, 6%, 63%);
 $color-dark-lava:        hsl(216, 4%, 22%);
@@ -101,18 +103,15 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
 }
 
 %notification {
-
-  > div:first-of-type {
-    align-items: center;
-    background-color: $color-mustard;
-    border-radius: 100%;
-    color: $color-dark-lava;
-    display: flex;
-    font-size: 1.3rem;
-    height: 1.7em;
-    justify-content: center;
-    width: 1.7em;
-  }
+  align-items: center;
+  background-color: $color-mustard;
+  border-radius: 100%;
+  color: $color-dark-lava;
+  display: flex !important;
+  font-size: 1.3rem;
+  height: 1.7em;
+  justify-content: center;
+  width: 1.7em;
 }
 
 %shadow {