Merge branch 'sidebar_reponsive_mobile' of github.com:riteshsp2000/p5.js-website

Author: lmccart

src/assets/css/main.css

@@ -72,6 +72,94 @@
   z-index: -2;
 }
 
+/* <======== Styling for responsive menu bar ========> */
+
+@media screen and (max-width: 719px) {
+  .sidebar-menu {
+    clear: both;
+    max-height: 0;
+    transition: max-height .4s ease-out;
+    overflow: hidden;
+  }
+
+  .sidebar-menu-nav-element {
+    width: 91vw;
+  }
+
+  .sidebar-menu a {
+    display: block;
+    text-align: center;
+  }
+
+  .sidebar-menu-icon {
+    top: 2rem;
+    cursor: pointer;
+    float: right;
+    padding: 28px 20px;
+    position: relative;
+    user-select: none;
+    margin-bottom: 5rem;
+  }
+  
+  .sidebar-menu-icon .sidebar-nav-icon {
+    background: #ED225D;
+    display: block;
+    height: 2px;
+    position: relative;
+    transition: background .4s ease-out;
+    width: 18px;
+  }
+  
+  .sidebar-menu-icon .sidebar-nav-icon:before,
+  .sidebar-menu-icon .sidebar-nav-icon:after {
+    background: #ED225D;
+    content: '';
+    display: block;
+    height: 100%;
+    position: absolute;
+    transition: all .4s ease-out;
+    width: 100%;
+  }
+  
+  .sidebar-menu-icon .sidebar-nav-icon:before {
+    top: 5px;
+  }
+  
+  .sidebar-menu-icon .sidebar-nav-icon:after {
+    top: -5px;
+  }
+  
+  .sidebar-menu-btn {
+    display: none;
+  }
+
+  .sidebar-menu-btn:checked ~ .sidebar-menu {
+    max-height: 475px;
+  }
+
+  .sidebar-menu-btn:checked ~ .sidebar-menu-icon .sidebar-nav-icon {
+    background: transparent;
+  }
+  
+  .sidebar-menu-btn:checked ~ .sidebar-menu-icon .sidebar-nav-icon:before {
+    transform: rotate(-45deg);
+    top:0;
+  }
+  
+  .sidebar-menu-btn:checked ~ .sidebar-menu-icon .sidebar-nav-icon:after {
+    transform: rotate(45deg);
+    top:0;
+  }
+
+}
+
+.sidebar-menu-btn {
+  display: none;
+}
+
+
+/* <=================================================> */
+
 #home-sketch-frame {
   position: fixed;
   width: 100%;

src/templates/partials/sidebar.hbs

@@ -3,9 +3,11 @@ slug: sidebar
 ---
 <!-- site navigation -->
 <div class="column-span">
-  <nav>
+  <nav class="sidebar-menu-nav-element">
     <h2 id="menu-title" class="sr-only">{{#i18n "Sidebar-Title"}}{{/i18n}}</h2>
-    <ul id="menu" aria-labelledby="menu-title">
+    <input class="sidebar-menu-btn" type="checkbox" id="sidebar-menu-btn" />
+    <label class="sidebar-menu-icon" for="sidebar-menu-btn"><span class="sidebar-nav-icon"></span></label>
+    <ul id="menu" class="sidebar-menu" aria-labelledby="menu-title">
       <li><a href="{{root}}/">{{#i18n "Home"}}{{/i18n}}</a></li>
       <li><a href="https://editor.p5js.org">{{#i18n "Editor"}}{{/i18n}}</a></li>
       <li><a href="{{root}}/download/">{{#i18n "Download"}}{{/i18n}}</a></li>