ui + feature(header): issue #105 - User panel

- Transform it into HTML5 component detail + summary.
- Add/remove styles.
- Add "animation" on menu-header
- Make it clear for keyboard users + some accessibility.
- Refactoring, code moved.
- Add JS.

src/header.pug

@@ -12,11 +12,15 @@ sib-notifications(
   bind-user
 )
 
-sib-display#profile(
+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
 

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-user-panel.pug

@@ -0,0 +1,14 @@
+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

@@ -72,6 +72,21 @@
   }
 }
 
+details {
+  cursor: pointer;
+
+  summary {
+
+    &::-moz-list-bullet {
+      list-style-type: none;
+    }
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+}
+
 details {
   position: relative;
 
@@ -101,7 +116,15 @@ details {
   }
 }
 
-#profile {
+details#user-controls {
+
+  summary:focus {
+    background-color: $color-purple-dark;
+    color: $color-white;
+    outline: none;
+  }
+
+  #user-controls__profile {
     div {
       display: flex;
       flex-direction: row-reverse;
@@ -112,11 +135,11 @@ details {
     
       img {
         border-radius: 100%;
-      height: 48px;
+        height: 4.8rem;
         margin-right: 2rem;
         object-fit: cover;
         object-position: center;
-      width: 48px;
+        width: 4.8rem;
       }
 
       sib-display-div[name='first_name'] {
@@ -136,5 +159,66 @@ details {
         }
       }
     }
+  }
+
+  #user-controls__panel {
+    height: 0;
+    position: absolute;
+    right: 0;
+    z-index: 1;
+    
+    > 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;
+      }
+    }
+  }
+
+  &[open] {
+    background-color: $color-purple-dark;
+    color: $color-white;
+
+    #user-controls__profile {
+
+      div {
+
+        sib-display-div[name='first_name'] {
+
+          div[name='first_name'] {
+            @include icon('close');
+      
+            &::before {
+              margin-left: 1.5rem;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 

src/styles/variables.scss

@@ -15,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%);