New mobilemenu prototype

core/client/app/styles/layouts/main.css

@@ -19,6 +19,7 @@
     position: relative;
     flex-grow: 1;
     display: flex;
+    background: #fff;
 }
 
 
@@ -206,65 +207,122 @@
 }
 
 
-/* Auto Nav - Opens and closes like OSX dock
+/* Mobile Nav
 /* ---------------------------------------------------------- */
 
-.gh-autonav-toggle {
+.gh-mobilemenu-button {
-    display: flex;
+    display: none;
-    justify-content: center;
-    align-items: center;
-    padding: 5px 10px;
-    width: 45px;
-    height: 27px;
-    border-right: #e1e1e1 1px solid;
-    line-height: 1;
-    cursor: pointer;
 }
 
-.gh-autonav-toggle:hover {
+@media (max-width: 800px) {
-    cursor: pointer;
+    .gh-mobilemenu-button {
-}
+        flex-shrink: 0;
+        display: block;
+        margin: 0 5px 0 -10px;
+        padding: 10px;
+        font-size: 18px;
+        line-height: 18px;
+    }
 
-.gh-autonav-toggle i {
+    .gh-mobilemenu-button .icon-gh {
-    transition: all 0.2s ease;
+        margin: 0;
-}
+    }
 
-.gh-autonav-toggle:hover i {
+    /* Hide the nav */
-    color: var(--blue);
+    .gh-nav {
-}
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 500;
+        width: 235px;
+        height: 100%;
+    }
 
-/* Hide the nav */
+    .gh-main {
-.gh-autonav .gh-nav {
+        z-index: 1000;
-    position: absolute;
+        transition: transform 0.15s;
-    top: 0;
+        /* translate3d for GPU accelerated animation - http://bit.ly/1EY1Xhx */
-    left: 0;
+        transform: translate3d(0,0,0);
-    z-index: 1000;
+    }
-    width: 235px;
-    height: 100%;
-    transition: transform 0.20s;
-    /* translate3d for GPU accelerated animation - http://bit.ly/1EY1Xhx */
-    transform: translate3d(-220px,0,0);
-}
 
-/* THE FUTURE: Super sexy background blur for Webkit - http://cl.ly/b1rG */
+    /* Bring it back on toggle */
-@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
+    .gh-main.open {
-    .gh-autonav .gh-nav {
+        transition: transform 0.10s;
-        background: rgba(246,246,246, 0.7);
+        transform: translate3d(235px,0,0);
-
-        -webkit-backdrop-filter: blur(10px);
-        backdrop-filter: blur(10px);
     }
 }
 
-/* Bring it back on hover */
+@media (max-width: 500px) {
-.gh-autonav .gh-nav.open {
+    .gh-nav {
-    transition: transform 0.15s;
+        width: 75vw;
-    transform: translate3d(0,0,0);
+    }
+    .gh-main.open {
+        transform: translate3d(75vw,0,0);
+    }
 }
 
-/* Move main content over for the closed-nav trigger bar */
+
-.gh-autonav .gh-main {
+/* Auto Nav - Opens and closes like OSX dock
-    margin-left: 15px;
+/* ---------------------------------------------------------- */
+
+@media (min-width: 801px) {
+    .gh-autonav-toggle {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 5px 10px;
+        width: 45px;
+        height: 27px;
+        border-right: #e1e1e1 1px solid;
+        line-height: 1;
+        cursor: pointer;
+    }
+
+    .gh-autonav-toggle:hover {
+        cursor: pointer;
+    }
+
+    .gh-autonav-toggle i {
+        transition: all 0.2s ease;
+    }
+
+    .gh-autonav-toggle:hover i {
+        color: var(--blue);
+    }
+
+    /* Hide the nav */
+    .gh-autonav .gh-nav {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1000;
+        width: 235px;
+        height: 100%;
+        transition: transform 0.20s;
+        /* translate3d for GPU accelerated animation - http://bit.ly/1EY1Xhx */
+        transform: translate3d(-220px,0,0);
+    }
+
+    /* THE FUTURE: Super sexy background blur for Webkit - http://cl.ly/b1rG */
+    @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
+        .gh-autonav .gh-nav {
+            background: rgba(246,246,246, 0.7);
+
+            -webkit-backdrop-filter: blur(10px);
+            backdrop-filter: blur(10px);
+        }
+    }
+
+    /* Bring it back on hover */
+    .gh-autonav .gh-nav.open {
+        transition: transform 0.15s;
+        transform: translate3d(0,0,0);
+    }
+
+    /* Move main content over for the closed-nav trigger bar */
+    .gh-autonav .gh-main {
+        margin-left: 15px;
+    }
 }
 
 

core/client/app/templates/settings/general.hbs

@@ -1,5 +1,5 @@
 <header class="view-header">
-    <h2 class="view-title">General</h2>
+    <h2 class="view-title"><button class="gh-mobilemenu-button" role="presentation"><i class="icon-gh"><span class="sr-only">Menu</span></i></button> General</h2>
     <section class="view-actions">
         <button type="button" class="btn btn-blue" {{action "save"}}>Save</button>
     </section>