Ready for prod ?

themes/coopgo-theme/assets/js/main.js

@@ -1,3 +1,5 @@
+
+/* NAVBAR COLOR TOGGLE WHILE SCROLLING */
 function navbarToggleOnScroll() {
     var el = document.getElementById("navbar");
     if (window.pageYOffset >= 500) {
@@ -6,4 +8,41 @@ function navbarToggleOnScroll() {
         el.classList.remove("scroll");
     }
  }; 
-window.addEventListener("scroll", navbarToggleOnScroll);
+window.addEventListener("scroll", navbarToggleOnScroll);
+
+/* SIDEBAR TOGGLE */
+function hasClass(ele, cls) {
+    return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
+}
+
+function addClass(ele, cls) {
+    if (!hasClass(ele, cls)) ele.className += " " + cls;
+}
+
+function removeClass(ele, cls) {
+    if (hasClass(ele, cls)) {
+        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
+        ele.className = ele.className.replace(reg, ' ');
+    }
+}
+function toggleMenu() {
+    var ele = document.getElementsByTagName('body')[0];
+    if (!hasClass(ele, "menu-open")) {
+        addClass(ele, "menu-open");
+    } else {
+        removeClass(ele, "menu-open");
+    }
+}
+//Add event from js the keep the marup clean
+function init() {
+    document.getElementById("menutoggle").addEventListener("click", toggleMenu);
+    document.getElementById("body-overlay").addEventListener("click", toggleMenu);
+}
+
+
+//Prevent the function to run before the document is loaded
+document.addEventListener('readystatechange', function() {
+    if (document.readyState === "complete") {
+        init();
+    }
+});

themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_breakpoints.scss

@@ -1,3 +1,3 @@
 
-$breakpoint-prone: 600px !default;
+$breakpoint-phone: 600px !default;
 $breakpoint-tablet: 992px !default;

themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_helpers.scss

@@ -33,6 +33,10 @@ $widthvalues: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100, 125, 150, 200,
     width: 100% !important;
 }
 
+.h-full {
+    height: 100% !important;
+}
+
 /* POSITIONING */
 
 .ta-r {

themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_nav.scss

@@ -1,27 +1,29 @@
 nav {
-    z-index: 100;
-    height: 3em;
-    display: flex;
-    justify-content: flex-between;
-    align-items: center;
-    position: fixed; /* Set the navbar to fixed position */
-    top: 0; /* Position the navbar at the top of the page */
-    width: 100%;
-
-    /* Menus */
-    ul {
-        justify-content: flex-evenly;
+    &#navbar {
+        z-index: 100;
+        height: 3em;
         display: flex;
+        justify-content: flex-between;
+        align-items: center;
+        position: fixed; /* Set the navbar to fixed position */
+        top: 0; /* Position the navbar at the top of the page */
+        width: 100%;
 
-        li {
-            flex: 1;
-            display: inline;
-            text-align: center;
-            list-style: none;
+        /* Menus */
+        ul {
+            justify-content: flex-evenly;
+            display: flex;
 
-            a {
-                color: inherit;
-                text-decoration: none;
+            li {
+                flex: 1;
+                display: inline;
+                text-align: center;
+                list-style: none;
+
+                a {
+                    color: inherit;
+                    text-decoration: none;
+                }
             }
         }
     }

themes/coopgo-theme/assets/sass/main.scss

@@ -1,32 +1,93 @@
 @import 'coopgo-web-ui-kit/styles';
 // @import 'colors' <- we use the library's default values for colors, we don't need this
 
-nav {
-    .left {
-        flex:0;
-        text-align: left;
-        background-color: $backgroundcolor;
+nav{ 
+    &#navbar {
+        .left {
+            flex:0;
+            text-align: left;
+            background-color: $backgroundcolor;
 
-        img {
-            margin: 1em;
-            height: 1.3em;
+            img {
+                margin: 1em;
+                height: 1.3em;
+            }
+        }
+
+        .center {
+            flex:1;
+            color: $primarycolor;
+            font-size: 1em;
+            background-color: $backgroundcolor;
+        }
+        .right {
+            font-family: $brandfont;
+            color: $white;
+        }
+
+        #menutoggle {
+            display: none;
+        }
+
+        @media(max-width: $breakpoint-phone) {
+            #menutoggle {
+                display: block;
+            }
+            .center {
+                display: none;
+            }
+        }
+
+        @media(max-width: $breakpoint-tablet) {
+            .right {
+                display: none;
+            }
         }
     }
 
-    .center {
-        flex:1;
-        color: $primarycolor;
-        font-size: 1em;
-        background-color: $backgroundcolor;
+    &#sidebar {
+        position: fixed;
+        top: 0;
+        left: -300px;
+        width: 300px;
+        height: 100%;
+        z-index: 200;
+        box-shadow: 0 6px 12px rgba(107, 82, 82, 0.3);
+        background-color: $white;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        transition: ease 0.2s all;
     }
-    .right {
-        font-family: $brandfont;
-        color: $white;
+}
+
+@media(max-width: $breakpoint-phone) {
+    nav#navbar {
+        background-color: $white;
+    }
+}
+
+#body-overlay {
+    width: 100vw;
+    height: 100vh;
+    display: none;
+    position: fixed;
+    z-index: 150;
+    top: 0;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.5);
+}
+
+body {
+    &.menu-open{
+        #body-overlay {
+            display: block;
+        }
     }
 
-    @media(max-width: $breakpoint-tablet) {
-        .right {
-            display: none;
+    &.menu-open {
+        nav#sidebar {
+            left: 0;
         }
     }
 }