From 216558125bfdd12fda3a6104315b07ef2f1cd75b Mon Sep 17 00:00:00 2001 From: Davide Negretti Date: Thu, 23 Nov 2023 19:03:03 +0100 Subject: [PATCH] [DURACOM-195] Header, navbar, and sidebar refactoring --- cypress/e2e/collection-statistics.cy.ts | 2 +- cypress/e2e/community-statistics.cy.ts | 2 +- cypress/e2e/homepage-statistics.cy.ts | 2 +- cypress/e2e/item-statistics.cy.ts | 2 +- cypress/e2e/login-modal.cy.ts | 26 +- cypress/e2e/search-navbar.cy.ts | 8 +- .../admin-sidebar-section.component.html | 42 ++-- .../admin-sidebar-section.component.spec.ts | 4 +- .../admin-sidebar-section.component.ts | 8 + .../admin-sidebar.component.html | 98 ++++---- .../admin-sidebar.component.scss | 231 ++++++++++-------- .../admin-sidebar.component.spec.ts | 2 +- .../admin-sidebar/admin-sidebar.component.ts | 20 +- ...dable-admin-sidebar-section.component.html | 56 +++-- ...dable-admin-sidebar-section.component.scss | 37 +-- ...le-admin-sidebar-section.component.spec.ts | 4 +- ...andable-admin-sidebar-section.component.ts | 30 ++- .../themed-admin-sidebar.component.ts | 16 +- .../expandable-navbar-section.component.html | 46 ++-- .../expandable-navbar-section.component.scss | 55 ++--- ...xpandable-navbar-section.component.spec.ts | 96 +++++--- .../expandable-navbar-section.component.ts | 79 ++++-- .../navbar-section.component.html | 6 +- .../navbar-section.component.scss | 8 +- src/app/navbar/navbar.component.html | 35 +-- src/app/navbar/navbar.component.scss | 24 +- src/app/root/root.component.html | 8 +- src/app/root/root.component.ts | 46 ++-- src/app/shared/animations/slide.ts | 50 ++-- .../auth-nav-menu.component.html | 64 +++-- .../auth-nav-menu.component.scss | 4 +- .../auth-nav-menu.component.spec.ts | 38 ++- .../auth-nav-menu/auth-nav-menu.component.ts | 4 +- .../user-menu/user-menu.component.html | 37 ++- .../user-menu/user-menu.component.scss | 12 + .../user-menu/user-menu.component.spec.ts | 4 +- .../lang-switch/lang-switch.component.html | 7 +- .../password/log-in-password.component.html | 4 +- .../external-link-menu-item.component.html | 3 +- .../external-link-menu-item.component.ts | 3 +- .../menu-item/link-menu-item.component.html | 5 +- .../menu-item/link-menu-item.component.ts | 3 +- .../menu/menu-item/menu-item.component.scss | 5 + .../onclick-menu-item.component.html | 6 +- .../onclick-menu-item.component.spec.ts | 2 +- .../menu-item/onclick-menu-item.component.ts | 2 +- .../menu-item/text-menu-item.component.html | 2 +- .../menu-item/text-menu-item.component.ts | 1 + .../testing/host-window-service.stub.ts | 5 + src/app/shared/testing/menu-service.stub.ts | 3 + .../system-wide-alert-banner.component.html | 2 +- src/assets/i18n/en.json5 | 4 + src/styles/_bootstrap_variables.scss | 3 - src/styles/_custom_variables.scss | 14 +- src/styles/_global-styles.scss | 5 - src/styles/_mixins.scss | 2 +- .../header-navbar-wrapper.component.html | 8 +- .../header-navbar-wrapper.component.scss | 90 ++++++- .../header-navbar-wrapper.component.ts | 2 + .../dspace/app/header/header.component.html | 45 ++-- .../dspace/app/header/header.component.scss | 29 +-- .../dspace/app/header/header.component.ts | 11 +- .../dspace/app/navbar/navbar.component.html | 35 +-- .../dspace/app/navbar/navbar.component.scss | 64 +---- .../styles/_theme_css_variable_overrides.scss | 20 +- 65 files changed, 901 insertions(+), 690 deletions(-) create mode 100644 src/app/shared/menu/menu-item/menu-item.component.scss diff --git a/cypress/e2e/collection-statistics.cy.ts b/cypress/e2e/collection-statistics.cy.ts index 6df4e9a4542..2a013fe0ce2 100644 --- a/cypress/e2e/collection-statistics.cy.ts +++ b/cypress/e2e/collection-statistics.cy.ts @@ -6,7 +6,7 @@ describe('Collection Statistics Page', () => { it('should load if you click on "Statistics" from a Collection page', () => { cy.visit('/collections/'.concat(TEST_COLLECTION)); - cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click(); + cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click(); cy.location('pathname').should('eq', COLLECTIONSTATISTICSPAGE); }); diff --git a/cypress/e2e/community-statistics.cy.ts b/cypress/e2e/community-statistics.cy.ts index 710450e7972..f9848f51000 100644 --- a/cypress/e2e/community-statistics.cy.ts +++ b/cypress/e2e/community-statistics.cy.ts @@ -6,7 +6,7 @@ describe('Community Statistics Page', () => { it('should load if you click on "Statistics" from a Community page', () => { cy.visit('/communities/'.concat(TEST_COMMUNITY)); - cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click(); + cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click(); cy.location('pathname').should('eq', COMMUNITYSTATISTICSPAGE); }); diff --git a/cypress/e2e/homepage-statistics.cy.ts b/cypress/e2e/homepage-statistics.cy.ts index 2a1ab9785ab..46ad8f1ed20 100644 --- a/cypress/e2e/homepage-statistics.cy.ts +++ b/cypress/e2e/homepage-statistics.cy.ts @@ -5,7 +5,7 @@ import '../support/commands'; describe('Site Statistics Page', () => { it('should load if you click on "Statistics" from homepage', () => { cy.visit('/'); - cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click(); + cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click(); cy.location('pathname').should('eq', '/statistics'); }); diff --git a/cypress/e2e/item-statistics.cy.ts b/cypress/e2e/item-statistics.cy.ts index 9b90cb24afc..78884081f0d 100644 --- a/cypress/e2e/item-statistics.cy.ts +++ b/cypress/e2e/item-statistics.cy.ts @@ -6,7 +6,7 @@ describe('Item Statistics Page', () => { it('should load if you click on "Statistics" from an Item/Entity page', () => { cy.visit('/entities/publication/'.concat(TEST_ENTITY_PUBLICATION)); - cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click(); + cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click(); cy.location('pathname').should('eq', ITEMSTATISTICSPAGE); }); diff --git a/cypress/e2e/login-modal.cy.ts b/cypress/e2e/login-modal.cy.ts index d29c13c2f96..13f7bc5c01c 100644 --- a/cypress/e2e/login-modal.cy.ts +++ b/cypress/e2e/login-modal.cy.ts @@ -4,31 +4,31 @@ import { testA11y } from 'cypress/support/utils'; const page = { openLoginMenu() { // Click the "Log In" dropdown menu in header - cy.get('ds-themed-navbar [data-test="login-menu"]').click(); + cy.get('ds-themed-header [data-test="login-menu"]').click(); }, openUserMenu() { // Once logged in, click the User menu in header - cy.get('ds-themed-navbar [data-test="user-menu"]').click(); + cy.get('ds-themed-header [data-test="user-menu"]').click(); }, submitLoginAndPasswordByPressingButton(email, password) { // Enter email - cy.get('ds-themed-navbar [data-test="email"]').type(email); + cy.get('ds-themed-header [data-test="email"]').type(email); // Enter password - cy.get('ds-themed-navbar [data-test="password"]').type(password); + cy.get('ds-themed-header [data-test="password"]').type(password); // Click login button - cy.get('ds-themed-navbar [data-test="login-button"]').click(); + cy.get('ds-themed-header [data-test="login-button"]').click(); }, submitLoginAndPasswordByPressingEnter(email, password) { // In opened Login modal, fill out email & password, then click Enter - cy.get('ds-themed-navbar [data-test="email"]').type(email); - cy.get('ds-themed-navbar [data-test="password"]').type(password); - cy.get('ds-themed-navbar [data-test="password"]').type('{enter}'); + cy.get('ds-themed-header [data-test="email"]').type(email); + cy.get('ds-themed-header [data-test="password"]').type(password); + cy.get('ds-themed-header [data-test="password"]').type('{enter}'); }, submitLogoutByPressingButton() { // This is the POST command that will actually log us out cy.intercept('POST', '/server/api/authn/logout').as('logout'); // Click logout button - cy.get('ds-themed-navbar [data-test="logout-button"]').click(); + cy.get('ds-themed-header [data-test="logout-button"]').click(); // Wait until above POST command responds before continuing // (This ensures next action waits until logout completes) cy.wait('@logout'); @@ -103,10 +103,10 @@ describe('Login Modal', () => { page.openLoginMenu(); // Registration link should be visible - cy.get('ds-themed-navbar [data-test="register"]').should('be.visible'); + cy.get('ds-themed-header [data-test="register"]').should('be.visible'); // Click registration link & you should go to registration page - cy.get('ds-themed-navbar [data-test="register"]').click(); + cy.get('ds-themed-header [data-test="register"]').click(); cy.location('pathname').should('eq', '/register'); cy.get('ds-register-email').should('exist'); }); @@ -117,10 +117,10 @@ describe('Login Modal', () => { page.openLoginMenu(); // Forgot password link should be visible - cy.get('ds-themed-navbar [data-test="forgot"]').should('be.visible'); + cy.get('ds-themed-header [data-test="forgot"]').should('be.visible'); // Click link & you should go to Forgot Password page - cy.get('ds-themed-navbar [data-test="forgot"]').click(); + cy.get('ds-themed-header [data-test="forgot"]').click(); cy.location('pathname').should('eq', '/forgot'); cy.get('ds-forgot-email').should('exist'); }); diff --git a/cypress/e2e/search-navbar.cy.ts b/cypress/e2e/search-navbar.cy.ts index 648db17fe65..0e2983e7903 100644 --- a/cypress/e2e/search-navbar.cy.ts +++ b/cypress/e2e/search-navbar.cy.ts @@ -3,15 +3,15 @@ import { TEST_SEARCH_TERM } from 'cypress/support/e2e'; const page = { fillOutQueryInNavBar(query) { // Click the magnifying glass - cy.get('ds-themed-navbar [data-test="header-search-icon"]').click(); + cy.get('ds-themed-header [data-test="header-search-icon"]').click(); // Fill out a query in input that appears - cy.get('ds-themed-navbar [data-test="header-search-box"]').type(query); + cy.get('ds-themed-header [data-test="header-search-box"]').type(query); }, submitQueryByPressingEnter() { - cy.get('ds-themed-navbar [data-test="header-search-box"]').type('{enter}'); + cy.get('ds-themed-header [data-test="header-search-box"]').type('{enter}'); }, submitQueryByPressingIcon() { - cy.get('ds-themed-navbar [data-test="header-search-icon"]').click(); + cy.get('ds-themed-header [data-test="header-search-icon"]').click(); } }; diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html index 7f1e8716ba5..f0f7a49573e 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html +++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html @@ -1,23 +1,21 @@ -
- -
- +
  • + + +
    +
    + {{itemModel.text | translate}}
    -
    -
    - - {{itemModel.text | translate}} - -
    -
    -     -
    +
    • + + diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts index 260a364d7a8..296a70331cb 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts @@ -48,7 +48,7 @@ describe('AdminSidebarSectionComponent', () => { }); it('should set the right icon', () => { - const icon = fixture.debugElement.query(By.css('.shortcut-icon')).query(By.css('i.fas')); + const icon = fixture.debugElement.query(By.css('[data-test="sidebar-section-icon"]')).query(By.css('i.fas')); expect(icon.nativeElement.getAttribute('class')).toContain('fa-' + iconString); }); it('should not contain the disabled class', () => { @@ -88,7 +88,7 @@ describe('AdminSidebarSectionComponent', () => { }); it('should set the right icon', () => { - const icon = fixture.debugElement.query(By.css('.shortcut-icon')).query(By.css('i.fas')); + const icon = fixture.debugElement.query(By.css('[data-test="sidebar-section-icon"]')).query(By.css('i.fas')); expect(icon.nativeElement.getAttribute('class')).toContain('fa-' + iconString); }); it('should contain the disabled class', () => { diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts index b195526d1c0..51a0902f61b 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts @@ -52,4 +52,12 @@ export class AdminSidebarSectionComponent extends MenuSectionComponent implement this.router.navigate(this.itemModel.link); } } + + adminMenuSectionId(sectionId: string) { + return `admin-menu-section-${sectionId}`; + } + + adminMenuSectionTitleId(sectionId: string) { + return `admin-menu-section-${sectionId}-title`; + } } diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.html b/src/app/admin/admin-sidebar/admin-sidebar.component.html index ca69501382e..26f2adfe395 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.html +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.html @@ -1,54 +1,62 @@ - diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.scss b/src/app/admin/admin-sidebar/admin-sidebar.component.scss index 5ed0142c7f9..c2f3279a8ea 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.scss +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.scss @@ -1,123 +1,140 @@ :host { - --ds-icon-z-index: 10; - - left: 0; - top: 0; - height: 100vh; - flex: 1 1 auto; - nav { - background-color: var(--ds-admin-sidebar-bg); - height: 100%; - flex-direction: column; - > div { - width: 100%; - &.sidebar-top-level-items { - flex: 1; - overflow: auto; - @include dark-scrollbar; - } + + /* SIDEBAR SIZE AND POSITION */ + + /* Sidebar hierarchy: + § nav + § .sidebar-full-width-container (any OPTIONAL full width element with no horizontal margin or padding - it can be nested) + § .sidebar-section-wrapper + § .sidebar-fixed-element-wrapper + § .sidebar-collapsible-element-outer-wrapper + § .sidebar-collapsible-element-inner-wrapper + § .sidebar-item + */ + + // Sidebar position + position: fixed; + left: 0; + top: 0; + z-index: var(--ds-sidebar-z-index); + + // Sidebar size and content position + nav#admin-sidebar { + + max-width: var(--ds-admin-sidebar-fixed-element-width); // Sidebar collapsed width + + display: flex; + flex-direction: column; + flex-wrap: nowrap; + + div#sidebar-top-level-items-container { + flex: 1 1 auto; // Fill available vertical space + overflow-x: hidden; + overflow-y: auto; + @include dark-scrollbar; + } + + img#admin-sidebar-logo { + width: 20px; + } + + ::ng-deep { + + // This class must be applied to any nested wrapper containing a sidebar section + .sidebar-full-width-container { + width: 100%; + padding-left: 0 !important; + padding-right: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + + // This class must be applied to the innermost block element containing a section or subsection link + // (it can be applied together with `sidebar-collapsible-element-inner-wrapper`) + .sidebar-item { + padding-top: 1rem; + padding-bottom: 1rem; + } + + // These classes handle the collapsing behavior + .sidebar-section-wrapper { + + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: stretch; + + // These elements have fixed width and determine the width of the collapsed sidebar + & > .sidebar-fixed-element-wrapper { + min-width: var(--ds-admin-sidebar-fixed-element-width); + flex: 1 1 auto; // Fill available space + + // Align the icons + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; } - &.inactive ::ng-deep .sidebar-collapsible { - margin-left: calc(-1 * var(--ds-sidebar-items-width)); + & > .sidebar-collapsible-element-outer-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; // make inner wrapper slide on the left when collapsing + max-width: calc(100% - var(--ds-admin-sidebar-fixed-element-width)); // fill available space + padding-left: var(--ds-dark-scrollbar-width); // leave room for scrollbar + overflow-x: hidden; // hide inner wrapper when sidebar is collapsed + + // These elements have fixed width and slide on the left when the sidebar is collapsed + // Their content should fill all available space + & > .sidebar-collapsible-element-inner-wrapper { + min-width: calc(var(--ds-admin-sidebar-collapsible-element-width) - var(--ds-dark-scrollbar-width)); + height: 100%; + padding-right: 16px !important; + } } + } - .navbar-nav { - .admin-menu-header { - background-color: var(--ds-admin-sidebar-header-bg); + } - .sidebar-section { - background-color: inherit; - } + // Set here any style that depends on the sidebar status + &.collapsed, &.transitioning, &.expanded { } - .logo-wrapper { - img { - height: 20px; - } - } - .section-header-text { - line-height: 1.5; - } + } - .navbar-brand { - margin-right: 0; - } + /* SIDEBAR STYLE */ - } - } + nav#admin-sidebar { + background-color: var(--ds-admin-sidebar-bg); - ::ng-deep { - .navbar-nav { - .sidebar-section { - display: flex; - align-content: stretch; - background-color: var(--ds-admin-sidebar-bg); - overflow-x: visible; - - .nav-item { - padding-top: var(--bs-spacer); - padding-bottom: var(--bs-spacer); - background-color: inherit; - - &:focus-visible { - // since links fill the whole sidebar, we _inset_ the outline - outline-offset: -4px; - - // replace padding with margins so it doesn't extend over the :focus-visible outline - // → can't remove the padding altogether; the icon needs to fill out - // the collapsed width of the sidebar for the slide animation to look decent. - .shortcut-icon { - padding-left: 0; - padding-right: 0; - margin-left: var(--ds-icon-padding); - margin-right: var(--ds-icon-padding); - } - .logo-wrapper { - margin-right: var(--bs-navbar-padding-x) !important; - } - .navbar-brand { - padding-top: 0; - padding-bottom: 0; - margin-top: var(--bs-navbar-brand-padding-y); - margin-bottom: var(--bs-navbar-brand-padding-y); - } - } - } - - .shortcut-icon { - background-color: inherit; - padding-left: var(--ds-icon-padding); - padding-right: var(--ds-icon-padding); - z-index: var(--ds-icon-z-index); - align-self: baseline; - } - - .sidebar-collapsible { - padding-left: 0; - padding-right: var(--bs-spacer); - width: var(--ds-sidebar-items-width); - position: relative; - .toggle { - width: 100%; - } - - ul { - padding-top: var(--bs-spacer); - - li a { - padding-left: var(--bs-spacer); - } - } - } - - &.active > .sidebar-collapsible > .nav-link { - color: var(--bs-navbar-dark-active-color); - } - } - } + ::ng-deep { + + color: white; + + // Set here the style of the *-menu-item nested components + .ds-menu-item { + } + + a { + color: var(--ds-admin-sidebar-link-color); + text-decoration: none; + + &:hover, &:focus { + color: var(--ds-admin-sidebar-link-hover-color); } + } + } + div#sidebar-header-container { + background-color: var(--ds-admin-sidebar-header-bg); + .sidebar-fixed-element-wrapper { + background-color: var(--ds-admin-sidebar-header-bg); + } } + div#sidebar-collapse-toggle-container { + .sidebar-collapsible-element-inner-wrapper { + } + } + } } diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts index 9522be29ce3..058b81df2f6 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts @@ -143,7 +143,7 @@ describe('AdminSidebarComponent', () => { describe('when the collapse link is clicked', () => { beforeEach(() => { spyOn(menuService, 'toggleMenu'); - const sidebarToggler = fixture.debugElement.query(By.css('#sidebar-collapse-toggle > button')); + const sidebarToggler = fixture.debugElement.query(By.css('#sidebar-collapse-toggle-container > a')); sidebarToggler.triggerEventHandler('click', { preventDefault: () => {/**/ } diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.ts index 26ded965d4d..741f9b7630d 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.ts @@ -1,4 +1,4 @@ -import { Component, HostListener, Injector, OnInit } from '@angular/core'; +import { Component, HostListener, Injector, Input, OnInit } from '@angular/core'; import { BehaviorSubject, combineLatest, Observable } from 'rxjs'; import { debounceTime, distinctUntilChanged, first, map, withLatestFrom } from 'rxjs/operators'; import { AuthService } from '../../core/auth/auth.service'; @@ -28,9 +28,14 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { menuID = MenuID.ADMIN; /** - * Observable that emits the width of the collapsible menu sections + * Observable that emits the width of the sidebar when expanded */ - sidebarWidth: Observable; + @Input() expandedSidebarWidth$: Observable; + + /** + * Observable that emits the width of the sidebar when collapsed + */ + @Input() collapsedSidebarWidth$: Observable; /** * Is true when the sidebar is open, is false when the sidebar is animating or closed @@ -44,6 +49,12 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { */ sidebarClosed = !this.sidebarOpen; // Closed in UI, animation finished + /** + * Is true when the sidebar is opening or closing + * @type {boolean} + */ + sidebarTransitioning = !this.sidebarOpen; // Animation in progress + /** * Emits true when either the menu OR the menu's preview is expanded, else emits false */ @@ -69,7 +80,6 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { */ ngOnInit(): void { super.ngOnInit(); - this.sidebarWidth = this.variableService.getVariable('--ds-sidebar-items-width'); this.authService.isAuthenticated() .subscribe((loggedIn: boolean) => { if (loggedIn) { @@ -134,6 +144,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { * @param event The animation event */ startSlide(event: any): void { + this.sidebarTransitioning = true; if (event.toState === 'expanded') { this.sidebarClosed = false; } else if (event.toState === 'collapsed') { @@ -146,6 +157,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { * @param event The animation event */ finishSlide(event: any): void { + this.sidebarTransitioning = false; if (event.fromState === 'expanded') { this.sidebarClosed = true; } else if (event.fromState === 'collapsed') { diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html index 1f4666bbd08..303b1400f40 100644 --- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html +++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html @@ -1,37 +1,47 @@ -