From c5d3776df73e1a27141d124a044cb6514d8159b3 Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Fri, 5 Aug 2022 12:23:03 +0200
Subject: [PATCH] 93492: Fix SSR dodging pinned admin sidebar

On the server, @slideSidebarPadding always resolved to 'expanded' because slideSidebarOver did not emit true
This resulted in the SSR HTML leaving space for the expanded sidebar.

Also got rid of the sliding animation as it would always play, even when replacing SSR HTML where the sidebar was already visible.
---
 .../admin-sidebar.component.html              |  2 +-
 .../admin-sidebar/admin-sidebar.component.ts  | 25 +++++--------------
 src/app/root/root.component.ts                |  5 ++--
 src/app/shared/animations/slide.ts            |  7 ------
 4 files changed, 10 insertions(+), 29 deletions(-)

diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.html b/src/app/admin/admin-sidebar/admin-sidebar.component.html
index 84402c64e9..ef220b834b 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.html
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.html
@@ -1,4 +1,4 @@
-<nav @slideHorizontal class="navbar navbar-dark p-0"
+<nav class="navbar navbar-dark p-0"
      [ngClass]="{'active': sidebarOpen, 'inactive': sidebarClosed}"
      [@slideSidebar]="{
       value: (!(sidebarExpanded | async) ? 'collapsed' : 'expanded'),
diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.ts
index d07196502f..19c75a9d62 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.ts
@@ -1,27 +1,14 @@
 import { Component, HostListener, Injector, OnInit } from '@angular/core';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { combineLatest, combineLatest as observableCombineLatest, Observable, BehaviorSubject } from 'rxjs';
-import { debounceTime, first, map, take, distinctUntilChanged, withLatestFrom } from 'rxjs/operators';
+import { combineLatest, Observable, BehaviorSubject } from 'rxjs';
+import { debounceTime, first, map, distinctUntilChanged, withLatestFrom } from 'rxjs/operators';
 import { AuthService } from '../../core/auth/auth.service';
-import { ScriptDataService } from '../../core/data/processes/script-data.service';
-import { slideHorizontal, slideSidebar } from '../../shared/animations/slide';
-import { CreateCollectionParentSelectorComponent } from '../../shared/dso-selector/modal-wrappers/create-collection-parent-selector/create-collection-parent-selector.component';
-import { CreateCommunityParentSelectorComponent } from '../../shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component';
-import { CreateItemParentSelectorComponent } from '../../shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component';
-import { EditCollectionSelectorComponent } from '../../shared/dso-selector/modal-wrappers/edit-collection-selector/edit-collection-selector.component';
-import { EditCommunitySelectorComponent } from '../../shared/dso-selector/modal-wrappers/edit-community-selector/edit-community-selector.component';
-import { EditItemSelectorComponent } from '../../shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component';
-import { ExportMetadataSelectorComponent } from '../../shared/dso-selector/modal-wrappers/export-metadata-selector/export-metadata-selector.component';
-import { MenuID, MenuItemType } from '../../shared/menu/initial-menus-state';
-import { LinkMenuItemModel } from '../../shared/menu/menu-item/models/link.model';
-import { OnClickMenuItemModel } from '../../shared/menu/menu-item/models/onclick.model';
-import { TextMenuItemModel } from '../../shared/menu/menu-item/models/text.model';
+import { slideSidebar } from '../../shared/animations/slide';
+import { MenuID } from '../../shared/menu/initial-menus-state';
 import { MenuComponent } from '../../shared/menu/menu.component';
 import { MenuService } from '../../shared/menu/menu.service';
 import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
-import { FeatureID } from '../../core/data/feature-authorization/feature-id';
-import { Router, ActivatedRoute } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 
 /**
  * Component representing the admin sidebar
@@ -30,7 +17,7 @@ import { Router, ActivatedRoute } from '@angular/router';
   selector: 'ds-admin-sidebar',
   templateUrl: './admin-sidebar.component.html',
   styleUrls: ['./admin-sidebar.component.scss'],
-  animations: [slideHorizontal, slideSidebar]
+  animations: [slideSidebar]
 })
 export class AdminSidebarComponent extends MenuComponent implements OnInit {
   /**
diff --git a/src/app/root/root.component.ts b/src/app/root/root.component.ts
index dc44095573..d811d28ca1 100644
--- a/src/app/root/root.component.ts
+++ b/src/app/root/root.component.ts
@@ -1,4 +1,4 @@
-import { map } from 'rxjs/operators';
+import { map, startWith } from 'rxjs/operators';
 import { Component, Inject, Input, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 
@@ -71,7 +71,8 @@ export class RootComponent implements OnInit {
     const sidebarCollapsed = this.menuService.isMenuCollapsed(MenuID.ADMIN);
     this.slideSidebarOver = combineLatestObservable([sidebarCollapsed, this.windowService.isXsOrSm()])
       .pipe(
-        map(([collapsed, mobile]) => collapsed || mobile)
+        map(([collapsed, mobile]) => collapsed || mobile),
+        startWith(true),
       );
 
     if (this.router.url === getPageInternalServerErrorRoute()) {
diff --git a/src/app/shared/animations/slide.ts b/src/app/shared/animations/slide.ts
index 7928a25659..63107017aa 100644
--- a/src/app/shared/animations/slide.ts
+++ b/src/app/shared/animations/slide.ts
@@ -10,13 +10,6 @@ export const slide = trigger('slide', [
   transition('expanded <=> collapsed', animate(250))
 ]);
 
-export const slideHorizontal = trigger('slideHorizontal', [
-  state('void', style({ width: 0 })),
-  state('*', style({ width: '*' })),
-  transition(':enter', [animate('200ms')]),
-  transition(':leave', [animate('200ms')])
-]);
-
 export const slideMobileNav = trigger('slideMobileNav', [
 
   state('expanded', style({ height: '100vh' })),