add menu toggle component

site/layouts/partials/header.html

@@ -5,7 +5,9 @@
       <ul class="l-flex-list-row">
         <li><a href="{{ .Site.BaseURL }}"><span class="site-title">{{ .Site.Title }}</span></a></li>
       </ul>
-      <ul class="l-flex-list-row nav__item">
+      <label class="c-menu-toggle" for="menu-toggle">Menu</label>
+      <input id="menu-toggle" class="c-menu-toggle__toggle" type="checkbox">
+      <ul class="l-flex-list-row nav__item c-menu-toggle__menu site-menu">
         <li><a class="nav__link nav-link" href="{{ .Site.BaseURL }}">Home</a></li>
         <li><a class="nav__link nav-link" href="#about">About</a></li>
         <li><a class="nav__link nav-link" href="#services">Services</a></li>

src/css/imports/components/menu-toggle.scss

@@ -0,0 +1,33 @@
+$bp-menu-collpase: $bp-s;
+
+.c-menu-toggle {
+  cursor: pointer;
+}
+
+input.c-menu-toggle__toggle[type="checkbox"],
+input.c-menu-toggle__toggle[type="radio"] {
+  display: none;
+}
+
+@media (max-width: $bp-menu-collpase) {
+  .c-menu-toggle {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .c-menu-toggle__menu {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .c-menu-toggle__toggle:checked ~ .c-menu-toggle__menu {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+@media (min-width: $bp-menu-collpase) {
+  .c-menu-toggle {
+    display: none;
+  }
+}