Prototype mobile navbar

ghost/admin/app/components/gh-mobile-nav-bar.js

@@ -0,0 +1,12 @@
+import Component from 'ember-component';
+
+export default Component.extend({
+    tagName: 'nav',
+    classNames: ['gh-mobile-nav-bar'],
+
+    actions: {
+        openMobileMenu() {
+            this.sendAction('openMobileMenu');
+        }
+    }
+});

ghost/admin/app/styles/layouts/main.css

@@ -212,7 +212,7 @@ body > .ember-view:not(.liquid-target-container) {
 }
 
 
-/* Mobile Nav
+/* Mobile Nav Menu (Slides out)
 /* ---------------------------------------------------------- */
 
 .gh-mobilemenu-button {
@@ -319,6 +319,23 @@ body > .ember-view:not(.liquid-target-container) {
     color: var(--blue);
 }
 
+.gh-menu-toggle-content {
+    display: none;
+}
+
+@media (max-width: 800px) {
+    .gh-menu-toggle {
+        position: static;
+        height: auto;
+        width: auto;
+        border: none;
+        border-radius: 0;
+    }
+    .gh-menu-toggle-content {
+        display: block;
+    }
+}
+
 /* Autonav is tricky, because hit areas of translated elements aren't in sync
    with the visible element we need to add the hover behaviour to a small,
    non-moving element. The following code positions our hit area and transitions
@@ -382,41 +399,32 @@ body > .ember-view:not(.liquid-target-container) {
 }
 
 
-/* Help (?) Menu
+/* Mobile Nav Bar (Sits at bottom of screen)
 /* ---------------------------------------------------------- */
 
-.gh-help-menu {
-    display: flex;
-    align-items: center;
-    border-left: #dfe1e3 1px solid;
-    cursor: pointer;
-}
+.gh-mobile-nav-bar { display: none; }
 
-.gh-help-button {
-    padding: 5px 15px;
-    color: var(--midgrey);
-    text-align: center;
-    font-size: 1.4rem;
-    line-height: 1.2em;
-    transition: all 0.5s;
-}
+@media (max-width: 800px) {
+    .gh-mobile-nav-bar {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: #fff;
+        border-top: var(--lightgrey) 1px solid;
+    }
 
-.gh-help-menu:hover .gh-help-button {
-    color: var(--blue);
-    transition: all 0.3s;
-}
-
-.gh-help-menu .dropdown {
-    bottom: 215px;
-    left: -180px;
-}
-
-.gh-help-menu .dropdown.fade-in-scale {
-    animation-duration: 0.1s;
-}
-
-.gh-help-menu .dropdown.fade-out {
-    animation-duration: 0.01s;
+    .gh-mobile-nav-bar a,
+    .gh-mobile-nav-bar-more {
+        height: 55px;
+        padding: 5px 15px;
+        text-align: center;
+        cursor: pointer;
+        color: var(--darkgrey)
+    }
 }
 
 

ghost/admin/app/styles/layouts/users.css

@@ -6,6 +6,7 @@
 }
 
 .user-list-item-icon {
+    flex-shrink: 0;
     position: relative;
     display: block;
     overflow: hidden;

ghost/admin/app/templates/application.hbs

@@ -18,6 +18,7 @@
         {{gh-content-cover onClick="closeMenus" onMouseEnter="closeAutoNav"}}
 
         {{outlet "settings-menu"}}
+        {{gh-mobile-nav-bar}}
     </div>{{!gh-viewport}}
 {{/gh-app}}
 

ghost/admin/app/templates/components/gh-mobile-nav-bar.hbs

@@ -0,0 +1,9 @@
+{{#link-to "editor.new" classNames="gh-nav-main-editor"}}<i class="icon-pen"></i>New story{{/link-to}}
+{{#if (eq routing.currentRouteName "posts.index")}}
+    {{#link-to "posts" (query-params type=null) classNames="gh-nav-main-content active"}}<i class="icon-content"></i>Stories{{/link-to}}
+{{else}}
+    {{#link-to "posts" classNames="gh-nav-main-content"}}<i class="icon-content"></i>Content{{/link-to}}
+{{/if}}
+{{#link-to "team" classNames="gh-nav-main-users"}}<i class="icon-team"></i>Team{{/link-to}}
+<div class="gh-mobile-nav-bar-more" {{action "openMobileMenu"}}><i class="icon-gh"></i>More</div>
+{{yield}}