Layout

Author: ferronicardoso

_sass/layout.scss

@@ -27,23 +27,31 @@ html, body {
 }
 
 #nav {
-  @include nav-position(right);
+  @include nav-position(left);
 }
 
 #nav-left {
   @include nav-position(left);
 }
 
+#nav-right {
+  @include nav-position(right);
+}
+
 /* Toggle class to open menu */
 
 #nav.menu-open {
-  @include open(-14rem);
+  @include open(14rem);
 }
 
 #nav-left.menu-open-left {
   @include open(14rem);
 }
 
+#nav-right.menu-open-right {
+  @include open(14rem);
+}
+
 /* Separator after menu */
 
 // #nav-list:after {
@@ -58,13 +66,17 @@ html, body {
 /* Icon menu */
 
 #nav-menu {
-  @include icon-position(right);
+  @include icon-position(left);
 }
 
 #nav-menu-left {
   @include icon-position(left);
 }
 
+#nav-menu-right {
+  @include icon-position(right);
+}
+
 #menu {
   height: 4px;
   width: 1.5em;

_sass/mixin.scss

@@ -18,7 +18,7 @@
           transform: translateX($x);
   width: 100%;
   @media (min-width: 940px) {
-    width: 30%;
+    width: 25%;
   }
 }
 

js/main.js

@@ -1,23 +1,23 @@
 var normal = document.getElementById("nav-menu");
-var reverse = document.getElementById("nav-menu-left");
+var reverse = document.getElementById("nav-menu-right");
 
 var icon = normal !== null ? normal : reverse;
 
 // Toggle the "menu-open" % "menu-opn-left" classes
 function toggle() {
-	  var navRight = document.getElementById("nav");
-	  var navLeft = document.getElementById("nav-left");
-	  var nav = navRight !== null ? navRight : navLeft;
+	  var navLeft = document.getElementById("nav");
+	  var navRight = document.getElementById("nav-right");
+	  var nav = navLeft !== null ? navLeft : navRight;
 
 	  var button = document.getElementById("menu");
 	  var site = document.getElementById("wrap");
 
-	  if (nav.className == "menu-open" || nav.className == "menu-open-left") {
+	  if (nav.className == "menu-open" || nav.className == "menu-open-right") {
 	  	  nav.className = "";
 	  	  button.className = "";
 	  	  site.className = "";
 	  } else if (reverse !== null) {
-	  	  nav.className += "menu-open-left";
+	  	  nav.className += "menu-open-right";
 	  	  button.className += "btn-close";
 	  	  site.className += "fixed";
 	  } else {