57053: finished animations

src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html

@@ -1,7 +1,6 @@
 <li class="sidebar-section">
-    <a class="nav-item nav-link" [href]="link">
+    <a class="nav-item nav-link shortcut-icon" [href]="link">
-        <span class="shortcut-icon"><i class="fas fa-{{icon}} fa-fw"></i></span>
+        <i class="fas fa-{{icon}} fa-fw"></i>
-
     </a>
     <div class="sidebar-collapsible">
         <a class="nav-item nav-link" [href]="link">

src/app/+admin/admin-sidebar/admin-sidebar.component.html

@@ -1,9 +1,9 @@
-<nav class="navbar navbar-dark bg-dark p-0" [ngClass]="{'active': sidebarActive}"
+<nav class="navbar navbar-dark bg-dark p-0"
+     [ngClass]="{'active': sidebarOpen, 'inactive': sidebarClosed}"
      [@slideSidebar]="{
      value: ((sidebarCollapsed | async) ? 'collapsed' : 'expanded'),
      params: {sidebarWidth: (sidebarWidth | async)}
-    }" (@slideSidebar.done)="finishSlide($event)">
+    }" (@slideSidebar.done)="finishSlide($event)" (@slideSidebar.start)="startSlide($event)">
-
     <div class="sidebar-top-level-items">
         <ul class="navbar-nav">
             <li class="admin-menu-header sidebar-section">
@@ -13,7 +13,7 @@
                 </span>
                 </a>
                 <div class="sidebar-collapsible">
-                    <a class="shortcuts-tree navbar-brand" href="#">
+                    <a class="navbar-brand mr-0" href="#">
                         <h4 class="section-header-text mb-0">Admin</h4>
                     </a>
                 </div>
@@ -63,13 +63,11 @@
     </div>
     <div class="navbar-nav">
         <div class="sidebar-section" id="sidebar-collapse-toggle">
-            <a class="nav-item nav-link"
+            <a class="nav-item nav-link shortcut-icon"
                href="#"
                (click)="toggle($event)">
-            <span class="shortcut-icon">
                 <i class="fas fa-fw fa-angle-double-right"
                    [ngClass]="{'fa-angle-double-right': (sidebarCollapsed | async), 'fa-angle-double-left': !(sidebarCollapsed | async)}"></i>
-            </span>
             </a>
             <div class="sidebar-collapsible">
                 <a class="nav-item nav-link sidebar-section"

src/app/+admin/admin-sidebar/admin-sidebar.component.scss

@@ -1,4 +1,5 @@
 @import '../../../styles/variables.scss';
+$icon-z-index: 10;
 
 :host {
     position: sticky;
@@ -17,32 +18,32 @@
             }
         }
 
-        .admin-menu-header {
+        &.inactive ::ng-deep .sidebar-collapsible {
-            background-color: $admin-sidebar-header-bg;
+            margin-left: -#{$admin-sidebar-width};
-            .logo-wrapper {
-                img {
-                    height: 20px;
-                }
-            }
-            .section-header-text {
-                line-height: 1.5;
-            }
-
         }
 
-        ::ng-deep {
+        .navbar-nav {
+            .admin-menu-header {
+                background-color: $admin-sidebar-header-bg;
+                .logo-wrapper {
+                    img {
+                        height: 20px;
+                    }
+                }
+                .section-header-text {
+                    line-height: 1.5;
+                }
 
+            }
+        }
+
+
+        ::ng-deep {
             .navbar-nav {
                 .sidebar-section {
                     display: flex;
                     align-content: stretch;
-                    &:hover {
+                    background-color: $dark;
-                        color: $navbar-dark-hover-color;
-                        a {
-                            color: inherit;
-                        }
-                    }
-
                     .nav-item {
                         padding-top: $spacer;
                         padding-bottom: $spacer;
@@ -50,13 +51,20 @@
                     .shortcut-icon {
                         padding-left: $spacer;
                         padding-right: $spacer;
+                        background-color: inherit;
+                        z-index: $icon-z-index;
                     }
                     .sidebar-collapsible {
-                        flex: 1;
+                        width: $admin-sidebar-width;
+                        position: relative;
                         a {
                             padding-right: $spacer;
+                            width: 100%;
                         }
                     }
+                    &.active > .sidebar-collapsible > .nav-link {
+                        color: $navbar-dark-active-color;
+                    }
                 }
 
                 #sidebar-collapse-toggle {

src/app/+admin/admin-sidebar/admin-sidebar.component.ts

@@ -13,7 +13,8 @@ import { AdminSidebarService } from './admin-sidebar.service';
 export class AdminSidebarComponent implements OnInit {
   sidebarCollapsed: Observable<boolean>;
   sidebarWidth: Observable<string>;
-  sidebarActive = true;
+  sidebarOpen = true;
+  sidebarClosed = !this.sidebarOpen;
 
   constructor(private sidebarService: AdminSidebarService,
               private variableService: CSSVariableService) {
@@ -27,20 +28,33 @@ export class AdminSidebarComponent implements OnInit {
   toggle(event: Event) {
     event.preventDefault();
     // Is sidebar closing?
-    if (this.sidebarActive) {
+    if (this.sidebarOpen) {
-      this.sidebarActive = false;
       this.sidebarService.collapseAllSections();
     }
     this.sidebarService.toggleSidebar();
   }
 
+  /**
+   * Method to change this.collapsed to false when the slide animation ends and is sliding open
+   * @param event The animation event
+   */
+  startSlide(event: any): void {
+    if (event.toState === 'expanded') {
+      this.sidebarClosed = false;
+    } else if (event.toState === 'collapsed') {
+      this.sidebarOpen = false;
+    }
+  }
+
   /**
    * Method to change this.collapsed to false when the slide animation ends and is sliding open
    * @param event The animation event
    */
   finishSlide(event: any): void {
-    if (event.fromState === 'collapsed') {
+    if (event.fromState === 'expanded') {
-      this.sidebarActive = true;
+      this.sidebarClosed = true;
+    } else if (event.fromState === 'collapsed') {
+      this.sidebarOpen = true;
     }
   }
 }

src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html

@@ -7,7 +7,7 @@
         <i class="fas fa-{{icon}} fa-fw"></i>
     </a>
     <div class="sidebar-collapsible">
-        <a class="nav-item nav-link shortcuts-tree" href="#"
+        <a class="nav-item nav-link" href="#"
            (click)="toggleSection($event)">
             <span class="section-header-text">{{('admin.sidebar.section.' + name + '.header') | translate}}</span>
             <i class="fas fa-chevron-right fa-pull-right"

src/app/shared/animations/slide.ts

@@ -24,23 +24,29 @@ export const slideMobileNav = trigger('slideMobileNav', [
   transition('expanded <=> collapsed', animate('300ms'))
 ]);
 
+const collapsedStyle = style({ marginLeft: '-{{ sidebarWidth }}' });
+const expandedStyle = style({ marginLeft: '0' });
+const options = { params: { sidebarWidth: '*' } };
+
 export const slideSidebar = trigger('slideSidebar', [
 
-  state('expanded',
+  transition('expanded => collapsed',
-    style({ width: '{{ sidebarWidth }}' }),
-    { params: { sidebarWidth: '*' } }
-  ),
-
-  state('collapsed', style({ width: '*' })),
-
-  transition('expanded <=> collapsed',
-
     group
     (
       [
         query('@*', animateChild()),
-        animate('300ms ease-in-out'),
+        query('.sidebar-collapsible', expandedStyle, options),
+        query('.sidebar-collapsible', animate('300ms ease-in-out', collapsedStyle))
+      ],
+    )),
 
+  transition('collapsed => expanded',
+    group
+    (
+      [
+        query('@*', animateChild()),
+        query('.sidebar-collapsible', collapsedStyle),
+        query('.sidebar-collapsible', animate('300ms ease-in-out', expandedStyle), options)
       ]
     ))
 ]);

src/styles/_custom_variables.scss

@@ -15,7 +15,7 @@ $sidebar-z-index: 20;
 
 $header-logo-height: 80px;
 
-$admin-sidebar-bg: darken($dark, 17%);
+$admin-sidebar-bg: $dark;
 $admin-sidebar-active-bg: darken($dark, 3%);
 $admin-sidebar-header-bg: darken($dark, 7%);
 $admin-sidebar-width: 250px;

webpack.config.js

@@ -27,7 +27,7 @@ module.exports = function(env, options) {
       getAotPlugin('client', !!env.aot)
     ]
   });
-  console.log(options.mode);
+  
   if (options.mode === 'production') {
     serverConfig = webpackMerge({}, serverConfig, prodPartial);
     clientConfig = webpackMerge({}, clientConfig, prodPartial);