🎨 Removed auto hide/show navigation toggle (#1094)

no issue
- the autonav behaviour has outlasted it's usefulness - it was mostly useful for editing but the editor screen is now always fullscreen and the number of low-resolution screens has dropped significantly
- dropped the components and all supporting code associated with autonav behaviour

ghost/admin/app/components/gh-content-cover.js

@@ -18,13 +18,7 @@ export default Component.extend({
 
     classNames: ['content-cover'],
 
-    onMouseEnter: null,
-
     click() {
         this.get('ui').closeMenus();
-    },
-
-    mouseEnter() {
-        this.get('ui').closeAutoNav();
     }
 });

ghost/admin/app/components/gh-editor.js

@@ -15,9 +15,6 @@ export default Component.extend({
         'isPreview:gh-editor-preview'
     ],
 
-    // Public attributes
-    navIsClosed: false,
-
     // Internal attributes
     droppedFiles: null,
     headerClass: '',
@@ -31,7 +28,6 @@ export default Component.extend({
 
     // Private
     _dragCounter: 0,
-    _navIsClosed: false,
     _onResizeHandler: null,
     _viewActionsWidth: 190,
 
@@ -42,16 +38,6 @@ export default Component.extend({
         };
     },
 
-    didReceiveAttrs() {
-        let navIsClosed = this.get('navIsClosed');
-
-        if (navIsClosed !== this._navIsClosed) {
-            run.scheduleOnce('afterRender', this, this._setHeaderClass);
-        }
-
-        this._navIsClosed = navIsClosed;
-    },
-
     didInsertElement() {
         this._super(...arguments);
         window.addEventListener('resize', this._onResizeHandler);

ghost/admin/app/components/gh-menu-toggle.js

@@ -1,44 +0,0 @@
-import Component from '@ember/component';
-import {computed} from '@ember/object';
-import {reads} from '@ember/object/computed';
-import {inject as service} from '@ember/service';
-
-/*
-    This cute little component has two jobs.
-
-    On desktop, it toggles autoNav behaviour. It tracks
-    that state via the maximise property, and uses the
-    state to render the appropriate icon.
-
-    On mobile, it renders a closing icon, and clicking it
-    closes the mobile menu
-*/
-export default Component.extend({
-    mediaQueries: service(),
-
-    classNames: ['gh-menu-toggle'],
-    maximise: false,
-
-    // closure actions
-    desktopAction() {},
-    mobileAction() {},
-
-    isMobile: reads('mediaQueries.isMobile'),
-
-    iconClass: computed('maximise', 'isMobile', function () {
-        if (this.get('maximise') && !this.get('isMobile')) {
-            return 'icon-maximise';
-        } else {
-            return 'icon-minimise';
-        }
-    }),
-
-    click() {
-        if (this.get('isMobile')) {
-            this.mobileAction();
-        } else {
-            this.toggleProperty('maximise');
-            this.desktopAction();
-        }
-    }
-});

ghost/admin/app/components/gh-nav-menu.js

@@ -14,9 +14,7 @@ export default Component.extend({
 
     tagName: 'nav',
     classNames: ['gh-nav'],
-    classNameBindings: ['open'],
 
-    open: false,
     iconStyle: '',
 
     showMenuExtension: computed('config.clientExtensions.menu', 'session.user.isOwner', function () {

ghost/admin/app/components/gh-unsplash.js

@@ -22,7 +22,7 @@ export default Component.extend(ShortcutsMixin, {
     close() {},
     select() {},
 
-    sideNavHidden: or('ui.{autoNav,isFullScreen,showMobileMenu}'),
+    sideNavHidden: or('ui.{isFullScreen,showMobileMenu}'),
 
     init() {
         this._super(...arguments);

ghost/admin/app/controllers/editor.js

@@ -3,7 +3,7 @@ import PostModel from 'ghost-admin/models/post';
 import boundOneWay from 'ghost-admin/utils/bound-one-way';
 import config from 'ghost-admin/config/environment';
 import isNumber from 'ghost-admin/utils/isNumber';
-import {alias, mapBy, reads} from '@ember/object/computed';
+import {alias, mapBy} from '@ember/object/computed';
 import {computed} from '@ember/object';
 import {inject as controller} from '@ember/controller';
 import {copy} from '@ember/object/internals';
@@ -112,9 +112,6 @@ export default Controller.extend({
 
     post: alias('model'),
 
-    // used within {{gh-editor}} as a trigger for responsive css changes
-    navIsClosed: reads('application.autoNav'),
-
     // store the desired post status locally without updating the model,
     // the model will only be updated when a save occurs
     willPublish: boundOneWay('post.isPublished'),

ghost/admin/app/services/ui.js

@@ -1,31 +1,17 @@
 import Service, {inject as service} from '@ember/service';
-import {computed} from '@ember/object';
 import {not, or, reads} from '@ember/object/computed';
 
 export default Service.extend({
     dropdown: service(),
     mediaQueries: service(),
 
-    autoNav: false,
     isFullScreen: false,
     showMobileMenu: false,
     showSettingsMenu: false,
 
     hasSideNav: not('isSideNavHidden'),
     isMobile: reads('mediaQueries.isMobile'),
-    isSideNavHidden: or('autoNav', 'isFullScreen', 'isMobile'),
+    isSideNavHidden: or('isFullScreen', 'isMobile'),
-
-    autoNavOpen: computed('autoNav', {
-        get() {
-            return false;
-        },
-        set(key, value) {
-            if (this.get('autoNav')) {
-                return value;
-            }
-            return false;
-        }
-    }),
 
     closeMenus() {
         this.get('dropdown').closeDropdowns();
@@ -35,17 +21,6 @@ export default Service.extend({
         });
     },
 
-    openAutoNav() {
-        this.set('autoNavOpen', true);
-    },
-
-    closeAutoNav() {
-        if (this.get('autoNavOpen')) {
-            this.get('dropdown').closeDropdowns();
-        }
-        this.set('autoNavOpen', false);
-    },
-
     closeMobileMenu() {
         this.set('showMobileMenu', false);
     },
@@ -58,23 +33,11 @@ export default Service.extend({
         this.set('showSettingsMenu', true);
     },
 
-    toggleAutoNav() {
-        this.toggleProperty('autoNav');
-    },
-
     actions: {
         closeMenus() {
             this.closeMenus();
         },
 
-        openAutoNav() {
-            this.openAutoNav();
-        },
-
-        closeAutoNav() {
-            this.closeAutoNav();
-        },
-
         closeMobileMenu() {
             this.closeMobileMenu();
         },
@@ -85,10 +48,6 @@ export default Service.extend({
 
         openSettingsMenu() {
             this.openSettingsMenu();
-        },
-
-        toggleAutoNav() {
-            this.toggleAutoNav();
         }
     }
 });

ghost/admin/app/styles/app-dark.css

@@ -96,10 +96,6 @@ input,
     }
 }
 
-.gh-menu-toggle {
-    border-color: #212A2E;
-}
-
 .gh-nav-search .ember-power-select-trigger {
     border-color: color-mod(var(--lightgrey));
     background: color-mod(var(--lightgrey));

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

@@ -340,114 +340,6 @@
     }
 }
 
-
-/* Auto Nav - Opens and closes like OSX dock
-/* ---------------------------------------------------------- */
-
-.gh-menu-toggle {
-    display: block;
-    position: absolute;
-    top: 24px;
-    right: -8px;
-    height: 36px;
-    width: 25px;
-    border: color-mod(var(--lightgrey) l(+4%)) 5px solid;
-    border-radius: 4px;
-    cursor: pointer;
-}
-
-.gh-menu-toggle:hover {
-    cursor: pointer;
-}
-
-.gh-menu-toggle svg {
-    transition: all 0.2s ease;
-}
-
-.gh-menu-toggle:hover svg {
-    fill: 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
-   it in-sync with it's container so it always sticks to the left of the viewport
-   then hides off-canvas when required as display:none breaks transitions. */
-
-.gh-autonav-toggle {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: none;
-    width: 15px;
-    height: 100%;
-    transition: transform 0.20s;
-    transform: translate3d(0,0,0);
-}
-
-.gh-autonav .gh-autonav-toggle {
-    display: block;
-}
-
-.gh-nav.open .gh-autonav-toggle {
-    transition: transform 0.15s;
-    transform: translate3d(-240px,0,0);
-}
-
-@media (min-width: 801px) {
-    /* Hide the nav */
-    .gh-autonav .gh-nav {
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 1000;
-        width: 250px;
-        height: 100%;
-        transition: transform 0.20s;
-        /* translate3d for GPU accelerated animation - http://bit.ly/1EY1Xhx */
-        transform: translate3d(-240px,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: 10px;
-    }
-}
-
-
 /* Mobile Nav Bar (Sits at bottom of screen)
 /* ---------------------------------------------------------- */
 

ghost/admin/app/templates/application.hbs

@@ -3,20 +3,16 @@
 
     {{gh-alerts}}
 
-    <div class="gh-viewport {{if ui.autoNav 'gh-autonav'}} {{if ui.showSettingsMenu 'settings-menu-expanded'}} {{if ui.showMobileMenu 'mobile-menu-expanded'}}">
+    <div class="gh-viewport {{if ui.showSettingsMenu 'settings-menu-expanded'}} {{if ui.showMobileMenu 'mobile-menu-expanded'}}">
         {{#if showNavMenu}}
             {{gh-nav-menu
-                open=ui.autoNavOpen
                 icon=settings.settledIcon
             }}
         {{/if}}
 
-        {{!-- {{#gh-main onMouseEnter=(action "closeAutoNav" target=ui)}} --}}
         <main class="gh-main" role="main">
             {{outlet}}
         </main>
-        {{!-- {{/gh-main}} --}}
-
 
         {{gh-notifications}}
 

ghost/admin/app/templates/components/gh-nav-menu.hbs

@@ -1,4 +1,3 @@
-{{gh-menu-toggle desktopAction=(action "toggleAutoNav" target=ui) mobileAction=(action "closeMobileMenu" target=ui)}}
 {{#gh-basic-dropdown horizontalPosition="right" calculatePosition=userDropdownPosition as |dropdown|}}
     {{#dropdown.trigger tagName="header" class="gh-nav-menu"}}
         <div class="gh-nav-menu-icon" style={{iconStyle}}></div>
@@ -89,11 +88,9 @@
 <footer class="gh-nav-foot">
     <a class="gh-nav-foot-sitelink" href="{{config.blogUrl}}/" target="_blank">View site {{svg-jar "external"}}</a>
 </footer>
-<div class="gh-autonav-toggle" {{action "openAutoNav" on="mouseEnter" target=ui}}></div>
 
 {{gh-tour-item "getting-started"
-    target=".gh-menu-toggle"
+    target=".gh-nav header"
-    throbberAttachment="bottom middle"
+    throbberAttachment="middle right"
-    throbberOffset="0 4px"
     popoverTriangleClass="left-top"
 }}

ghost/admin/app/templates/editor.hbs

@@ -2,7 +2,6 @@
     {{#gh-editor
         tagName="section"
         class="gh-editor gh-view"
-        navIsClosed=navIsClosed
         as |editor|
     }}
         <header class="gh-editor-header br2 pe-none {{editor.headerClass}} {{if infoMessage "bg-white"}}">