hazza/yel-dspace-angular
1
0
Fork 0
forked from hazza/dspace-angular
Code Pull Requests Activity

93492: Fix SSR dodging pinned admin sidebar

Browse Source 
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.
This commit is contained in:
Yura Bondarenko
2022-08-05 12:23:03 +02:00
parent a77b1da804
commit c5d3776df7
4 changed files with 10 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/admin/admin-sidebar/admin-sidebar.component.html
View File

@@ -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'),

25
src/app/admin/admin-sidebar/admin-sidebar.component.ts
View File

@@ -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 {
/**

5
src/app/root/root.component.ts
View File

@@ -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()) {

7
src/app/shared/animations/slide.ts
View File

@@ -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' })),