From f16d7ee3c057eba5c82eb703e71345f96d0aabd8 Mon Sep 17 00:00:00 2001
From: rayelliott <gitea@rayelliott.dev>
Date: Thu, 2 Apr 2020 18:27:20 +0000
Subject: [PATCH] add menu toggle component

---
 site/layouts/partials/header.html           |  4 ++-
 src/css/imports/components/menu-toggle.scss | 33 +++++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/css/imports/components/menu-toggle.scss

diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html
index b2a2395..4d0dcf9 100644
--- a/site/layouts/partials/header.html
+++ b/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>
diff --git a/src/css/imports/components/menu-toggle.scss b/src/css/imports/components/menu-toggle.scss
new file mode 100644
index 0000000..b8637bd
--- /dev/null
+++ b/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;
+  }
+}