experiments collasible menu

layouts/partials/sidebar.html

@@ -16,10 +16,14 @@
         {{ with .Site.Params.description }} {{.}} {{end}}
       </p>
     </div>
+    <div class="collapsible-menu">
+      <input type="checkbox" id="menuToggle">
+      <label for="menuToggle">{{ .Site.Title }}</label>
+      <div class="menu-content">
         {{ partial "sidebar/menu.html" . }}
-    <p>
         {{ partial "sidebar/social.html" . }}
-    </p>
+      </div>
+    </div>
     <p class="copyright">
       {{ with .Site.Params.copyright }}{{.|safeHTML}}{{ else }}&copy; {{ now.Format "2006"}} {{.Site.Params.author}}.
       <a href="https://creativecommons.org/licenses/by-sa/4.0">Some Rights Reserved</a>.

static-src/scss/hyde-hyde/_responsive.scss

@@ -1,7 +1,11 @@
 // mobile ~320..480px
 // 320px ~ 16rem/16px ~ 18.8235/17px ~ 17.7778/18px
 // 480px ~ 30rem/16px ~ 28.2353rem/17px ~ 26.6667rem/18px
-@media (min-width: 320px) and (max-width: 768px) {
+@media (min-width: 320px) and (max-width: 767px) {
+  html,
+  body {
+    font-size: $small-device-font-size;
+  }
   .sidebar {
     li {
       padding: .1rem 0;
@@ -10,6 +14,57 @@
   .hidden-tablet {
     display: none;
   }
+  .sidebar-about, 
+  .copyright {
+    display: none;
+  }    
+  .sidebar {
+    margin: 0;
+    padding: 0;
+  }
+  .menu-content {
+    padding: 0 0 0 0px;
+    max-height: 0;
+    overflow: hidden;
+    margin-top: 0; }
+  .collapsible-menu {
+    padding: 0px 0px; 
+  }
+  .collapsible-menu ul {
+    list-style-type: none;
+    padding: 0; 
+  }
+  .collapsible-menu li {
+    display: block;
+  }
+  .collapsible-menu a {
+    text-decoration: none;
+    cursor: pointer; }
+  .collapsible-menu label {
+    background: url(/img/menu-open.svg) no-repeat left center;
+    display: block;
+    cursor: pointer;
+    color: #fff;
+    padding: 10px 0 10px 0px; }
+  
+  input#menuToggle {
+    display: none; 
+  }
+  input#menuToggle + label {
+    font-weight: bold;
+  }
+
+  input#menuToggle:checked + label {
+    background-image: url(/img/menu-close.svg); 
+    color: #fff;
+  }
+  
+  input#menuToggle:checked ~ .menu-content {
+    max-height: 100% !important;
+  }
+  .social {
+    padding: 1em 0 1em 0;
+  }
 }
 
 // tablet/medium device ~768px+
@@ -64,6 +119,10 @@
       }
     }
   }
+  input#menuToggle,
+  input#menuToggle + label {
+    display: none;
+  }
 }
 
 // Large devices (laptops/desktops, 992px and up) 

static/img/menu-close.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="21px" height="21px" viewBox="0 0 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-close</title>
+    <desc>Close Icon</desc>
+    <defs></defs>
+    <g id="Container" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon-close" stroke="#ffffff" stroke-linecap="square">
+            <path d="M5,5 L16.3137085,16.3137085" id="Line-Copy-8"></path>
+            <path d="M5,16.3137086 L16.3137084,5" id="Line-Copy-7"></path>
+        </g>
+    </g>
+</svg>

static/img/menu-open.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="21px" height="21px" viewBox="0 0 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-menu</title>
+    <desc>Menu Icon</desc>
+    <defs></defs>
+    <g id="Container" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon-menu" stroke="#ffffff" stroke-linecap="square">
+            <path d="M2.5,7.5 L18.5,7.5" id="Line-Copy-8"></path>
+            <path d="M2.5,13.5 L18.5,13.5" id="Line-Copy-7"></path>
+        </g>
+    </g>
+</svg>