Hamburger menu - refinement

_layouts/default.html

@@ -34,10 +34,14 @@ <h2>{{ site.description | default: site.github.project_tagline }}</h2>
 
         <a href="#" id="hamburger"></a>
         <aside id="sidebar">
-          <nav><a href="#" id="hamburger-close"></a></nav>
+          <header>
+            <a href="#" id="hamburger-close"></a>
+          </header>
+          <nav>        
 {% assign sections = 'Recipes,Adult Beverages,Tobacco' | split: ',' -%}
 {% assign hide_description = 'true' -%}
 {% include site_index.html -%}
+          </nav>
         </aside>
 
       </div>

assets/css/hamburger.css

@@ -1,56 +1,78 @@
-aside#sidebar nav, #hamburger {
-    display: none;
+aside#sidebar header, #hamburger {
+  display: none;
 }
 
 @media only screen and (max-width: 767px) {
-    aside#sidebar {
-        display: none;
-    }
-
-    aside#sidebar[data-active=true] {
-        position: fixed;
-        display: block;
-        top: -5px; 
-        right: -5px;
-        max-width: 400px;
-        background: #fff;
-        box-shadow: 0px 0px 5px 0px #999;
-        border-radius: 3px;
-        margin: 0;
-        padding: 5em 2em 2em 2em;
-    }
+  aside#sidebar {
+    display: none;
+  }
+  aside#sidebar[data-active=true] {
+    position: fixed;
+    display: block;
+    top: -5px; 
+    right: -5px;
+    bottom: -5px;
+    max-width: 400px;
+    background: #fff;
+    box-shadow: 0px 0px 5px 0px #999;
+    border-radius: 3px;
+    margin: 0;
+    padding: 5em 0 0 0;
+    overflow-y: scroll;
+  }
+  aside#sidebar header {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4em;
+    background-color: #ccc;
+    background-image: none;
+    padding: 0.5em;
+  }
+  aside#sidebar nav a {
+    display: block;
+    font-size: 130%;
+    line-height: 3em;
+    padding: 0 2em;
+    border-bottom: 1px solid #9ddcff;
+  }
+  aside#sidebar nav h2 {
+    font-size: inherit;
+    padding: 0;
+    margin: 0;
+  }
+  aside#sidebar nav a:hover {
+    color: #ee6c4d;
+    background-color: #9ddcff;
+  }
 
-    aside#sidebar nav {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 4em;
-        display: block;
-        background-color: #ccc;
-        padding: 0.5em;
-    }
+  #hamburger, #hamburger-close {
+    display: block;
+    height: 36px;
+    width: 36px;
+    background-color: #9ddcff;
+    color: #2879d0;
+    border: 1px solid #3d5a80;
+    border-radius: 5px;
+  }
 
-    #hamburger, #hamburger-close {
-        display: block;
-        height: 36px;
-        width: 36px;
-        background-color: #9ddcff;
-        color: #2879d0;
-        border: 1px solid #3d5a80;
-        border-radius: 5px;
-    }
-    #hamburger {
-        position: fixed;
-        top: 0.5em;
-        right: 0.5em;
-        background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\"><path fill=\"none\" d=\"M-1024-192H256v800h-1280z\"/><path d=\"M8 43.8h47.8v6H8zM8.2 29H56v6H8.2zm0-15H56v6H8.2z\"/></svg>");
-    }
-    #hamburger-close {
-        position: absolute;
-        top: 1em;
-        right: 1em;
-        background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15 15\"><path d=\"M11.8 4a.6.6 0 1 0-.8-.8L7.5 6.7 4 3.2a.6.6 0 0 0-.8.8l3.5 3.5L3.2 11a.6.6 0 0 0 .8.8l3.5-3.5 3.5 3.5a.6.6 0 0 0 .8-.8L8.3 7.5 11.8 4Z\"/></svg>");
-    }
+  #hamburger:hover, #hamburger-close:hover {
+    color: #ee6c4d;
+    background-color: #3d5a80;
+  }
 
+  #hamburger {
+    position: fixed;
+    top: 0.5em;
+    right: 0.5em;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\"><path fill=\"none\" d=\"M-1024-192H256v800h-1280z\"/><path d=\"M8 43.8h47.8v6H8zM8.2 29H56v6H8.2zm0-15H56v6H8.2z\"/></svg>");
+  }
+  #hamburger-close {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15 15\"><path d=\"M11.8 4a.6.6 0 1 0-.8-.8L7.5 6.7 4 3.2a.6.6 0 0 0-.8.8l3.5 3.5L3.2 11a.6.6 0 0 0 .8.8l3.5-3.5 3.5 3.5a.6.6 0 0 0 .8-.8L8.3 7.5 11.8 4Z\"/></svg>");
+  }
 }