feature: Header dropdown & css

src/styles/base/header.scss

@@ -1,26 +1,25 @@
 #header {
-  max-height: 51px;
-  height: 51px;
+  max-height: 83px;
+  height: 83px;
   align-items: center;
   background-color: $color-0-0-100;
   color: $color-216-4-22;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
   display: flex;
   flex-shrink: 0;
-  padding: 1.6rem 0.64rem;
+  // padding: 1.6rem 0.64rem;
   position: relative;
   z-index: 1;
 
   > *:not(sib-widget) {
     padding: 0 2.5rem;
   }
-}
 
-#logo {
+  #logo {
     flex: 1 1 0;
-}
+  }
   
-#search-bar {
+  #search-bar {
     position: relative;
     
     #search-input {
@@ -58,10 +57,10 @@
         }
       }
     }
-}
+  }
   
-details {
-  // cursor: pointer;
+  details {
+    margin-right: 2.5rem;
   
     summary {
   
@@ -73,9 +72,9 @@ details {
         display: none;
       }
     }
-}
+  }
   
-details {
+  details {
     position: relative;
   
     .sib-notifications__button {
@@ -102,15 +101,25 @@ details {
       right: 0;
       top: 5.6rem;
     }
-}
+  }
   
-details#user-controls {
+  details#user-controls {
+    padding: 0;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 
-  summary:focus {
+    summary {
+      padding: 16px;
+      cursor: pointer;
+      &:focus {
         background-color: $color-233-18-29;
         color: $color-0-0-100;
         outline: none;
       }
+    }
   
     #user-controls__profile {
       div {
@@ -150,6 +159,8 @@ details#user-controls {
       position: absolute;
       right: 0;
       z-index: 1;
+      width: 100%;
+      top: 83px;
       
       > nav {
         background-color: $color-0-0-100;
@@ -157,7 +168,7 @@ details#user-controls {
         position: absolute;
         right: 0;
         top: 0;
-      width: 208px;
+        width: 100%;
         
         ul {
           list-style: none;
@@ -165,13 +176,16 @@ details#user-controls {
           padding: 0;
           
           li {
-          border-bottom: 1px solid $color-213-20-91;
-          margin-right: 0;
-          padding: 1.6rem 1.3rem;
   
             sib-link {
               color: $color-213-4-50;
               display: block;
+              border-bottom: 1px solid $color-213-20-91;
+              margin-right: 0;
+              padding: 1.6rem 1.3rem;
+              &:hover {
+                color: $color-244-73-62;
+              }
             }
           }
         }
@@ -203,5 +217,6 @@ details#user-controls {
         }
       }
     }
-}
+  }
   
+}