Add responsive menu

Author: keitharm

public/css/custom.css

@@ -406,8 +406,15 @@ input:read-only {
 }
 
 @media screen and (max-width: 900px) {
-  #navbar {
-    display: none;
+  .mobileNav {
+    display: block !important;
+  }
+  .nav {
+    display: none !important;
+  }
+
+  .navLogo {
+    display: none !important;
   }
 
   section.triplesec {
@@ -470,10 +477,6 @@ input:read-only {
     display: none;
   }
 
-  #subnav {
-    display: none;
-  }
-
   section.tryitout {
     width: 90% !important;
   }
@@ -506,3 +509,56 @@ input:read-only {
 }
 
 .invisible { display: none; }
+
+
+.mobileNav {
+  display: none;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  z-index: 10;
+}
+.mobileNav div {
+  display: none;
+}
+.mobileNav button {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  border: 0;
+  text-indent: 200%;
+  overflow: hidden;
+  background: rgba(255,255,255,0.8) url("http://i.imgur.com/vKRaKDX.png") center no-repeat;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  background-size: 80%;
+  width: 40px;
+  height: 40px;
+  outline: none;
+  -webkit-transition: all 400ms ease;
+  transition: all 400ms ease;
+}
+.mobileNav button.expanded {
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+  background-color: transparent;
+  border: 0;
+}
+.mobileNav a {
+  display: block;
+}
+
+.mobileNav a {
+  background: #eee;
+  text-align: center;
+  padding: 20px 0;
+  border-bottom: 1px solid #ddd;
+  text-decoration: none;
+  color: #222;
+  font-weight: bold;
+}
+.mobileNav a:hover,
+a:active,
+a:focus {
+  background: #e7e7e7;
+}

public/css/demoEditor.css

@@ -13,7 +13,7 @@
   white-space: -pre-wrap;      /* Opera 4-6 */
   white-space: -o-pre-wrap;    /* Opera 7 */
   word-wrap: break-word;       /* Internet Explorer 5.5+ */
-  height: 250px;
+  height: 240px;
   border: solid #CECECE 1px !important;
   margin-top: 0px;
   width: 100%;
@@ -25,6 +25,7 @@
   width: 50%;
   margin-top: 5px;
   height: 250px;
+  border: solid #CECECE 1px !important;
 }
 
 #submit {

src/js/general.js

@@ -32,6 +32,10 @@ $(() => {
   setInterval(() => {
     updateDates();
   }, 60000);
+
+  $('.toggleButton').click(function() {
+    $(this).toggleClass('expanded').siblings('div').slideToggle();
+  });
 });
 
 function notyPrompt(text, yes, no) {

views/snippets/navbar.ejs

@@ -66,3 +66,22 @@ if (session.user !== undefined && session.user.tierName === 'Free') {
     </ul>
   </div>
 </div>
+<div class="mobileNav">
+    <button class="toggleButton">Toggle</button>
+    <div class="mobileMenu">
+      <% if (session.loggedin === true) { %>
+        <a href="">Home</a>
+        <a href="<%= upgrade %>">Upgrade</a>
+        <a href="documentation">Documentation</a>
+        <a href="settings">Settings</a>
+        <a href="logout">Logout</a>
+      <% } else { %>
+        <a href="">Home</a>
+        <a href="search">Search</a>
+        <a href="pricing">Pricing</a>
+        <a href="documentation">Documentation</a>
+        <a href="login">Login</a>
+        <a href="register">Sign Up</a>
+      <% } %>
+    </div>
+  </div>