Add reverse menu

_includes/header-custom.html

@@ -1,5 +1,5 @@
 <header id="header">
 
 	<!-- Your custom header here -->
-
+	
 </header>

_includes/menu.html

@@ -1,4 +1,4 @@
-<nav id="nav">
+<nav {% if site.reverse == true %}id="nav-left"{% else %}id="nav"{% endif %}>
 	<div id="nav-list">
 		<a href="{{ site.baseurl }}">Home</a>
 	  <a href="{{ site.baseurl }}about.html">About Emerald</a>

_includes/nav-footer-custom.html

@@ -1,5 +1,5 @@
 <footer>
 
 	<!-- Your custom nav footer here -->
-
+	
 </footer>

_layouts/default.html

@@ -10,7 +10,7 @@
 	  	{% include menu.html %}
 
     <!-- Icon menu -->
-	  <a href="#" id="nav-menu">
+	  <a href="#" {% if site.reverse == true %}id="nav-menu-left"{% else %}id="nav-menu"{% endif %}>
 	  	<div id="menu"></div>
 	  </a>
 

_sass/layout.scss

@@ -1,23 +1,8 @@
-/*- General Layout -*/
+/* -- General Layout -- */
 
 /* Navigation */
 
-nav {
-  width: 14rem;
-  position: fixed;
-  background-color: $main-color;
-  top: 0;
-  bottom: 0;
-  right:-14rem;
-  color: $background-color;
-  opacity: 0.95;
-  -webkit-transition: all 0.3s ease-in;
-     -moz-transition: all 0.3s ease-in;
-      -ms-transition: all 0.3s ease-in;
-          transition: all 0.3s ease-in;
-  z-index: 1;
-  padding: 72px 0;
-  text-align: center;
+#nav, #nav-left { 
   a {
     display: block;
     color: $background-color;
@@ -36,17 +21,26 @@ nav {
     }
 }
 
-nav.menu-open {
-  -webkit-transform: translateX(-14rem);
-     -moz-transform: translateX(-14rem);
-      -ms-transform: translateX(-14rem);
-          transform: translateX(-14rem);
-  width: 100%;
-  @media (min-width: 940px) {
-    width: 30%;
-  }
+#nav {
+  @include nav-position(right);
 }
 
+#nav-left {
+  @include nav-position(left);
+}
+
+/* Toggle class to open menu */
+
+#nav.menu-open {
+  @include open(-14rem);
+}
+
+#nav-left.menu-open-left {
+  @include open(14rem);
+}
+
+/* Separator after menu */
+
 #nav-list:after {
   display: block;
   content: '';
@@ -56,16 +50,15 @@ nav.menu-open {
   background-color: $background-color;
 }
 
+/* Icon menu */
+
 #nav-menu {
-  display: block;
-  position: absolute;
-  top: 35px;
-  right: 25px;
-  z-index: 10;
-  height: 24px;
+  @include icon-position(right);
 }
 
-/* Icon menu */
+#nav-menu-left {
+  @include icon-position(left);
+}
 
 #menu {
   height: 4px;
@@ -211,6 +204,7 @@ code {
 }
 
 /* Set the vertical rhythm (and padding-left) for lists inside post content */
+
 .content ul, .content ol {
   line-height: 1.5em; /* 24px/16px */
   padding-left: 1.5em;
@@ -220,11 +214,13 @@ code {
 }
 
 /* Pages */
+
 #page ul, #page ol {
   padding-left: 1.5em;
 }
 
 /* Paginator */
+
 .pagination {
   text-align: center;
   margin: 2.666668em;
@@ -249,6 +245,7 @@ code {
 }
 
 /* Footer */
+
 footer {
   background-color: $main-color;
   color: $background-color;

_sass/mixin.scss

@@ -0,0 +1,41 @@
+// -- Mixins -- //
+
+// Nav menu
+
+@mixin icon-position($position) {
+	display: block;
+  position: absolute;
+  top: 35px;
+  #{$position}: 25px;
+  z-index: 10;
+  height: 24px;
+}
+
+@mixin open($x) {
+	-webkit-transform: translateX($x);
+     -moz-transform: translateX($x);
+      -ms-transform: translateX($x);
+          transform: translateX($x);
+  width: 100%;
+  @media (min-width: 940px) {
+    width: 30%;
+  }
+}
+
+@mixin nav-position($position) {
+	width: 14rem;
+  position: fixed;
+  background-color: $main-color;
+  top: 0;
+  bottom: 0;
+  #{$position}: -14rem;
+  color: $background-color;
+  opacity: 0.95;
+  -webkit-transition: all 0.3s ease-in;
+     -moz-transition: all 0.3s ease-in;
+      -ms-transition: all 0.3s ease-in;
+          transition: all 0.3s ease-in;
+  z-index: 1;
+  padding: 72px 0;
+  text-align: center;
+}

css/main.scss

@@ -3,4 +3,4 @@
 ---
 
 //Import
-@import "base", "typography", "layout", "syntax.scss", "custom.scss";
+@import "base", "mixin.scss", "typography", "layout", "syntax.scss", "custom.scss";

js/main.js

@@ -1,15 +1,25 @@
-var icon = document.getElementById("nav-menu");
+var normal = document.getElementById("nav-menu");
+var reverse = document.getElementById("nav-menu-left");
 
-// Toggle the "menu-open" class
+var icon = normal !== null ? normal : reverse;
+
+// Toggle the "menu-open" % "menu-opn-left" classes
 function toggle() {
-	  var nav = document.getElementById("nav");
+	  var navRight = document.getElementById("nav");
+	  var navLeft = document.getElementById("nav-left");
+	  var nav = navRight !== null ? navRight : navLeft;
+
 	  var button = document.getElementById("menu");
 	  var site = document.getElementById("wrap");
 
-	  if (nav.className == "menu-open") {
+	  if (nav.className == "menu-open" || nav.className == "menu-open-left") {
 	  	  nav.className = "";
 	  	  button.className = "";
 	  	  site.className = "";
+	  } else if (reverse !== null) {
+	  	  nav.className += "menu-open-left";
+	  	  button.className += "btn-close";
+	  	  site.className += "fixed";
 	  } else {
 	  	  nav.className += "menu-open";
 	  	  button.className += "btn-close";
@@ -19,10 +29,12 @@ function toggle() {
 
 // Ensures backward compatibility with IE old versions
 function menuClick() {
-	if (document.addEventListener) {
+	if (document.addEventListener && icon !== null) {
 		icon.addEventListener('click', toggle);
-	} else if (document.attachEvent) {
+	} else if (document.attachEvent && icon !== null) {
 		icon.attachEvent('onclick', toggle);
+	} else {
+		return;
 	}
 }