Added animation of sidebar between main and contextual menus

refs https://github.com/TryGhost/Team/issues/1149

- added `ember-css-transitions` library that provides a modifier that adds/removes classes used for animating elements in and out, automatically creating a clone for destroyed elements
- added a wrapper class around the `main` and `design` nav menu contents so they could be individually animated
- used the new `{{css-transition}}` modifier to animate the sidebar menus in/out
- ensured main menu doesn't animate on first render of the parent `<GhNavMenu>` component so there's no animation when Admin is loaded

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

@@ -1,7 +1,7 @@
-<nav class="gh-nav {{if this.ui.contextualNavMenu "gh-nav-contextual"}}" ...attributes>
+<nav class="gh-nav {{if this.ui.contextualNavMenu "gh-nav-contextual"}}" {{did-insert (fn (mut this.firstRender) false)}} ...attributes>
     {{#if this.ui.contextualNavMenu}}
         {{component (concat "gh-nav-menu/" ui.contextualNavMenu)}}
     {{else}}
-        <GhNavMenu::Main @icon={{this.settings.settledIcon}} />
+        <GhNavMenu::Main @icon={{this.settings.settledIcon}} @firstRender={{this.firstRender}} />
     {{/if}}
 </nav>

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

@@ -1,7 +1,10 @@
 import Component from '@glimmer/component';
 import {inject as service} from '@ember/service';
+import {tracked} from '@glimmer/tracking';
 
 export default class GhNavMenuComponent extends Component {
     @service settings;
     @service ui;
+
+    @tracked firstRender = true;
 }

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

@@ -1,3 +1,4 @@
+<div class="flex flex-column h-100" {{css-transition "gh-nav-contextual"}} ...attributes>
     <header class="gh-nav-header">
         <LinkTo @route="settings" class="gh-nav-menu-back-button">{{svg-jar "arrow-left-small"}} Settings</LinkTo>
     </header>
@@ -46,3 +47,4 @@
             </LinkTo>
         </div>
     </section>
+</div>

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

@@ -1,3 +1,4 @@
+<div class="flex flex-column h-100" {{css-transition (unless @firstRender "gh-nav-main")}} ...attributes>
     <header class="gh-nav-menu">
         <div class="gh-nav-menu-details">
             <div class="gh-nav-menu-icon {{this.iconClass}}" style={{this.iconStyle}}></div>
@@ -139,3 +140,4 @@
         <GhNavMenu::Footer />
 
     </section>
+</div>

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

@@ -103,6 +103,7 @@
     transform: translateX(0);
     border-right: 1px solid var(--main-color-area-divider);
     transition: flex-basis 250ms;
+    overflow: hidden;
 }
 
 .gh-nav-menu {
@@ -199,6 +200,49 @@
     padding: 0;
 }
 
+.gh-nav-main-enter-active,
+.gh-nav-main-leave-active,
+.gh-nav-contextual-enter-active,
+.gh-nav-contextual-leave-active {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    transition: transform 800ms ease;
+}
+
+.gh-nav-main-enter-active,
+.gh-nav-main-leave-active {
+    width: calc(var(--mainmenu-width) - 1px);
+}
+
+.gh-nav-main-enter,
+.gh-nav-main-leave-to {
+    transform: translateX(-100%);
+}
+
+.gh-nav-contextual-enter-active,
+.gh-nav-contextual-leave-active {
+    width: calc(420px - 1px);
+}
+
+/* For some reason the animate-in transition wasn't working with pure transforms */
+/* Using `left` correctly positioned the starting state so we could then use opposite transforms */
+.gh-nav-contextual-enter-active {
+    left: calc(420px - 1px);
+}
+
+.gh-nav-contextual-enter-to {
+    transform: translateX(-100%);
+}
+
+.gh-nav-contextual-leave {
+    transform: translateX(0);
+}
+
+.gh-nav-contextual-leave-to {
+    transform: translateX(calc(var(--mainmenu-width) - 1px));
+}
+
 .gh-account-menu-header {
     position: relative;
     display: flex;

ghost/admin/package.json

@@ -79,6 +79,7 @@
     "ember-composable-helpers": "4.5.0",
     "ember-concurrency": "2.1.2",
     "ember-concurrency-decorators": "2.0.3",
+    "ember-css-transitions": "2.1.1",
     "ember-data": "3.21.2",
     "ember-decorators": "6.1.1",
     "ember-drag-drop": "0.4.8",

ghost/admin/yarn.lock

@@ -6867,6 +6867,15 @@ ember-cookies@^0.5.0:
     ember-cli-babel "^7.1.0"
     ember-getowner-polyfill "^1.1.0 || ^2.0.0"
 
+ember-css-transitions@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ember-css-transitions/-/ember-css-transitions-2.1.1.tgz#616069b8adef0175ec310cf504587587e8789f65"
+  integrity sha512-Kue3tMUHlmeEQvnV1YXoJSjk/wIKiywAT72ny89Yl7rRzEjgjOMcUD69HSg3ShsQNOpyzU0eOCANVtk00FjJig==
+  dependencies:
+    ember-cli-babel "^7.22.1"
+    ember-cli-htmlbars "^5.3.1"
+    ember-modifier "^2.1.0"
+
 ember-data@3.21.2:
   version "3.21.2"
   resolved "https://registry.yarnpkg.com/ember-data/-/ember-data-3.21.2.tgz#d3537319a8d1c80a8a567f08d86b740722d502fe"