From 7f454b0fa2942eabe0aa8257389d03f1882af524 Mon Sep 17 00:00:00 2001 From: Davide Negretti Date: Sat, 25 Nov 2023 00:37:08 +0100 Subject: [PATCH] [DURACOM-195] Admin sidebar (WIP) --- .../admin-sidebar-section.component.html | 42 +-- .../admin-sidebar.component.html | 100 ++--- .../admin-sidebar.component.scss | 343 ++++++++++++------ .../admin-sidebar/admin-sidebar.component.ts | 20 +- ...dable-admin-sidebar-section.component.html | 91 ++++- ...dable-admin-sidebar-section.component.scss | 63 +++- ...andable-admin-sidebar-section.component.ts | 19 +- src/app/navbar/navbar.component.scss | 2 +- src/app/root/root.component.html | 4 +- src/app/root/root.component.ts | 13 +- src/app/shared/animations/slide.ts | 49 ++- src/styles/_bootstrap_variables.scss | 3 - src/styles/_custom_variables.scss | 20 +- src/styles/_global-styles.scss | 5 - src/styles/_mixins.scss | 2 +- 15 files changed, 502 insertions(+), 274 deletions(-) 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..fb4264ba106 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.component.html b/src/app/admin/admin-sidebar/admin-sidebar.component.html index fe7e5595ab0..86b82546a29 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.html +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.html @@ -1,55 +1,63 @@ - diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.scss b/src/app/admin/admin-sidebar/admin-sidebar.component.scss index 5ed0142c7f9..fbac62ee316 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.scss +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.scss @@ -1,123 +1,256 @@ :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-flex-container + § .sidebar-full-width-container (any OPTIONAL full width element with no horizontal margin or padding) + § .sidebar-section-wrapper + § .sidebar-fixed-element-wrapper + § .sidebar-collapsible-element-outer-wrapper + § .sidebar-collapsible-element-inner-wrapper + */ + + // 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; + } + + .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 + } + + .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); // fix issues with 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%; + .nav-item, .nav-link { + min-width: 100%; } + padding-right: 16px; + } } + } + } + + } + + /* SIDEBAR STYLE */ + + nav#admin-sidebar { - &.inactive ::ng-deep .sidebar-collapsible { - margin-left: calc(-1 * var(--ds-sidebar-items-width)); + background-color: var(--ds-admin-sidebar-bg); + + + ::ng-deep { + a { + &, &:hover, &:focus { + .nav-item { + border: solid 2px red; + color: var(--ds-admin-sidebar-link-color) !important; + } } + } + } + + div#sidebar-header-container { + background-color: var(--ds-admin-sidebar-header-bg); + .sidebar-fixed-element-wrapper { + background-color: var(--ds-admin-sidebar-header-bg); + } + } - .navbar-nav { - .admin-menu-header { - background-color: var(--ds-admin-sidebar-header-bg); + div#sidebar-collapse-toggle-container { + .sidebar-collapsible-element-inner-wrapper { - .sidebar-section { - background-color: inherit; - } + } + } - .logo-wrapper { - img { - height: 20px; - } - } - .section-header-text { - line-height: 1.5; - } + //&.collapsed, &.transitioning { + // // Cover collapsible element + // ::ng-deep .sidebar-fixed-element-wrapper { + // z-index: var(--ds-admin-sidebar-fixed-element-z-index); + // background-color: var(--ds-admin-sidebar-bg); + // } + //} - .navbar-brand { - margin-right: 0; - } + ::ng-deep { + .sidebar-fixed-element-wrapper { + // Align the icons + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + } + + .sidebar-collapsible-element { + &-outer-wrapper { - } } + &-inner-wrapper { - ::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); - } - } - } } + } + } + + &.inactive ::ng-deep .sidebar-collapsible-element { // TODO + margin-left: calc(-1 * var(--ds-sidebar-items-width)); + } + + .navbar-nav { + + //.admin-menu-header { + // background-color: var(--ds-admin-sidebar-header-bg); + // + // .sidebar-section { + // background-color: inherit; + // } + // + // .logo-wrapper { + // img { + // height: 20px; + // } + // } + // + // .section-header-text { + // line-height: 1.5; + // } + // + // .navbar-brand { + // margin-right: 0; + // } + // + //} + } + + + ::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); + // } + //} + } + } + + } + } diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.ts index 26ded965d4d..91ae86663a4 100644 --- a/src/app/admin/admin-sidebar/admin-sidebar.component.ts +++ b/src/app/admin/admin-sidebar/admin-sidebar.component.ts @@ -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; + expandedSidebarWidth$: Observable; + + /** + * Observable that emits the width of the sidebar when collapsed + */ + 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,8 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit { */ ngOnInit(): void { super.ngOnInit(); - this.sidebarWidth = this.variableService.getVariable('--ds-sidebar-items-width'); + this.expandedSidebarWidth$ = this.variableService.getVariable('--ds-admin-sidebar-total-width'); + this.collapsedSidebarWidth$ = this.variableService.getVariable('--ds-admin-sidebar-fixed-element-width'); this.authService.isAuthenticated() .subscribe((loggedIn: boolean) => { if (loggedIn) { @@ -134,6 +146,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 +159,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..beda6d71517 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,96 @@ -
    + +
    + +
    +
    +
    + {{itemModel.text | translate}} +
    +
    +     + +--> + + + + +
  • -
    + + -
    +
    -
    -
    - +
    +
    + + - + +
    +
    +     +
    +
    +
    +
    + +
      +
    • + +
      • +
    -
      -
    • - -
      • -
    -
    + + + + + + + + + + + + + + + + + + + +
    • diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss index 802fade8c13..f9a919670dd 100644 --- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss +++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss @@ -1,23 +1,46 @@ -:host ::ng-deep { - .fa-chevron-right { - padding-left: calc(var(--bs-spacer) / 2); - font-size: 0.5rem; - line-height: 3; - } - - .sidebar-sub-level-items { - list-style: disc; - color: var(--bs-navbar-dark-color); - overflow: hidden; - margin-bottom: calc(-1 * var(--bs-spacer)); // the bottom-most nav-item is padded, no need for double spacing - } +:host { + .toggler { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + justify-content: space-between; + } - .sidebar-collapsible { - display: flex; - flex-direction: column; - } - - li.sidebar-section.expanded { - background-color: var(--ds-admin-sidebar-active-bg) !important; + .subsection { + .sidebar-collapsible-element-inner-wrapper { + overflow-y: hidden; } + } } + +//:host ::ng-deep { +// .fa-chevron-right { +// padding-left: calc(var(--bs-spacer) / 2); +// font-size: 0.5rem; +// line-height: 3; +// } +// +// .sidebar-sub-level-items { +// list-style: disc; +// color: var(--bs-navbar-dark-color); +// overflow: hidden; +// margin-bottom: calc(-1 * var(--bs-spacer)); // the bottom-most nav-item is padded, no need for double spacing +// } +// +// .sidebar-collapsible-element { +// display: flex; +// flex-direction: column; +// } +// +// li.sidebar-section-wrapper.expanded { +// background-color: var(--ds-admin-sidebar-active-bg) !important; +// } +// +// .section-header-text { +// .navbar-text { +// padding-top: 0 !important; +// padding-bottom: 0 !important; +// } +// } +//} diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts index 8591fef97eb..287e55dc587 100644 --- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts +++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts @@ -31,17 +31,17 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC /** * The background color of the section when it's active */ - sidebarActiveBg; + sidebarActiveBg$: Observable; /** * Emits true when the sidebar is currently collapsed, true when it's expanded */ - sidebarCollapsed: Observable; + isSidebarCollapsed$: Observable; /** * Emits true when the sidebar's preview is currently collapsed, true when it's expanded */ - sidebarPreviewCollapsed: Observable; + isSidebarPreviewCollapsed$: Observable; /** * Emits true when the menu section is expanded, else emits false @@ -64,12 +64,11 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC */ ngOnInit(): void { super.ngOnInit(); - this.sidebarActiveBg = this.variableService.getVariable('--ds-admin-sidebar-active-bg'); - this.sidebarCollapsed = this.menuService.isMenuCollapsed(this.menuID); - this.sidebarPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID); - this.expanded = combineLatestObservable(this.active, this.sidebarCollapsed, this.sidebarPreviewCollapsed) - .pipe( - map(([active, sidebarCollapsed, sidebarPreviewCollapsed]) => (active && (!sidebarCollapsed || !sidebarPreviewCollapsed))) - ); + this.sidebarActiveBg$ = this.variableService.getVariable('--ds-admin-sidebar-active-bg'); + this.isSidebarCollapsed$ = this.menuService.isMenuCollapsed(this.menuID); + this.isSidebarPreviewCollapsed$ = this.menuService.isMenuPreviewCollapsed(this.menuID); + this.expanded = combineLatestObservable([this.active, this.isSidebarCollapsed$, this.isSidebarPreviewCollapsed$]).pipe( + map(([active, sidebarCollapsed, sidebarPreviewCollapsed]) => (active && (!sidebarCollapsed || !sidebarPreviewCollapsed))) + ); } } diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss index a227c83b7ce..6a7404da69e 100644 --- a/src/app/navbar/navbar.component.scss +++ b/src/app/navbar/navbar.component.scss @@ -40,7 +40,7 @@ } } - .navbar-nav { + .navbar-nav { // TODO wrap in navbar selector ::ng-deep a.nav-link { color: var(--ds-navbar-link-color); diff --git a/src/app/root/root.component.html b/src/app/root/root.component.html index d6d05868923..ca7581a63d4 100644 --- a/src/app/root/root.component.html +++ b/src/app/root/root.component.html @@ -3,8 +3,8 @@
    diff --git a/src/app/root/root.component.ts b/src/app/root/root.component.ts index 160504f14fa..d885b630b45 100644 --- a/src/app/root/root.component.ts +++ b/src/app/root/root.component.ts @@ -30,9 +30,8 @@ import { hasValueOperator } from '../shared/empty.util'; export class RootComponent implements OnInit { sidebarVisible: Observable; slideSidebarOver: Observable; - collapsedSidebarWidth: Observable; - totalSidebarWidth: Observable; - theme: Observable = of({} as any); + collapsedSidebarWidth$: Observable; theme: Observable = of({} as any); + expandedSidebarWidth$: Observable; notificationOptions; models; @@ -62,13 +61,13 @@ export class RootComponent implements OnInit { } ngOnInit() { - this.sidebarVisible = this.menuService.isMenuVisibleWithVisibleSections(MenuID.ADMIN); + this.isSidebarVisible$ = this.menuService.isMenuVisibleWithVisibleSections(MenuID.ADMIN); - this.collapsedSidebarWidth = this.cssService.getVariable('--ds-collapsed-sidebar-width').pipe(hasValueOperator()); - this.totalSidebarWidth = this.cssService.getVariable('--ds-total-sidebar-width').pipe(hasValueOperator()); + this.expandedSidebarWidth$ = this.cssService.getVariable('--ds-admin-sidebar-total-width'); + this.collapsedSidebarWidth$ = this.cssService.getVariable('--ds-admin-sidebar-fixed-element-width'); const sidebarCollapsed = this.menuService.isMenuCollapsed(MenuID.ADMIN); - this.slideSidebarOver = combineLatestObservable([sidebarCollapsed, this.windowService.isXsOrSm()]) + this.slideSidebarOver$ = combineLatestObservable([sidebarCollapsed, this.windowService.isXsOrSm()]) .pipe( map(([collapsed, mobile]) => collapsed || mobile), startWith(true), diff --git a/src/app/shared/animations/slide.ts b/src/app/shared/animations/slide.ts index 79ab61232b0..2e58effc8da 100644 --- a/src/app/shared/animations/slide.ts +++ b/src/app/shared/animations/slide.ts @@ -19,38 +19,33 @@ export const slideMobileNav = trigger('slideMobileNav', [ transition('expanded <=> collapsed', animate('300ms')) ]); -const collapsedStyle = style({ marginLeft: '-{{ sidebarWidth }}' }); -const expandedStyle = style({ marginLeft: '0' }); -const options = { params: { sidebarWidth: '*' } }; +const collapsedSidebarStyle = style({ maxWidth: '{{collapsedWidth}}' }); +const expandedSidebarStyle = style({ maxWidth: '{{expandedWidth}}' }); +const unpinnedSidebarPageStyle = style({ paddingLeft: '{{collapsedWidth}}' }); +const pinnedSidebarPageStyle = style({ paddingLeft: '{{expandedWidth}}' }); +const hiddenSidebarPageStyle = style({ paddingLeft: '0' }); +const options = { params: { collapsedWidth: '*', expandedWidth: '*' } }; +const animation = '300ms ease-in-out'; export const slideSidebar = trigger('slideSidebar', [ - - transition('expanded => collapsed', - group( - [ - query('@*', animateChild()), - 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) - ] - )) + state('collapsed', collapsedSidebarStyle, options), + state('expanded', expandedSidebarStyle, options), + transition('expanded => collapsed', group([ + query('@*', animateChild()), + animate(animation, collapsedSidebarStyle), + ])), + transition('collapsed => expanded', group([ + query('@*', animateChild()), + animate(animation, expandedSidebarStyle), + ])), ]); export const slideSidebarPadding = trigger('slideSidebarPadding', [ - state('hidden', style({ paddingLeft: 0 })), - state('shown', style({ paddingLeft: '{{ collapsedSidebarWidth }}' }), { params: { collapsedSidebarWidth: '*' } }), - state('expanded', style({ paddingLeft: '{{ totalSidebarWidth }}' }), { params: { totalSidebarWidth: '*' } }), - transition('hidden <=> shown', [animate('200ms')]), - transition('hidden <=> expanded', [animate('200ms')]), - transition('shown <=> expanded', [animate('200ms')]), + state('hidden', hiddenSidebarPageStyle), + state('unpinned', unpinnedSidebarPageStyle, options), + state('pinned', pinnedSidebarPageStyle, options), + transition('hidden <=> *', animate(animation)), + transition('unpinned <=> pinned', animate(animation)), ]); export const expandSearchInput = trigger('toggleAnimation', [ diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss index 5dfc03fbd36..ebf6926d5df 100644 --- a/src/styles/_bootstrap_variables.scss +++ b/src/styles/_bootstrap_variables.scss @@ -1,9 +1,6 @@ /** Help Variables **/ $fa-fixed-width: 1.25rem !default; $icon-padding: 1rem !default; -$collapsed-sidebar-width: calculatePx($fa-fixed-width + (2 * $icon-padding)) !default; -$sidebar-items-width: 250px !default; -$total-sidebar-width: $collapsed-sidebar-width + $sidebar-items-width !default; /* Fonts */ // Starting this url with a caret (^) allows it to be a relative path based on UI's deployment path diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss index faa41e7d925..6cc28853440 100644 --- a/src/styles/_custom_variables.scss +++ b/src/styles/_custom_variables.scss @@ -27,6 +27,7 @@ --ds-header-navbar-border-bottom-color: #{$gray-400}; --ds-navbar-link-color: #{$cyan}; --ds-navbar-link-color-hover: #{darken($cyan, 15%)}; + // TODO check if/where used --ds-expandable-navbar-bg: var(--ds-navbar-bg); --ds-expandable-navbar-link-color: var(--ds-navbar-link-color); --ds-expandable-navbar-link-color-hover: var(--ds-navbar-link-color-hover); @@ -40,13 +41,23 @@ $admin-sidebar-bg: darken(#2B4E72, 17%); $admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%); - --ds-admin-sidebar-bg: #{$admin-sidebar-bg}; - --ds-admin-sidebar-active-bg: #{$admin-sidebar-active-bg}; - --ds-admin-sidebar-header-bg: #{darken($admin-sidebar-bg, 7%)}; + $admin-sidebar-fixed-element-width: 55px !default; + $admin-sidebar-collapsible-element-width: 250px !default; + $admin-sidebar-total-width: $admin-sidebar-fixed-element-width + $admin-sidebar-collapsible-element-width !default; + + --ds-admin-sidebar-bg: #{$admin-sidebar-bg}; // TODO USED OK + --ds-admin-sidebar-active-bg: #{$admin-sidebar-active-bg}; // TODO USED OK + --ds-admin-sidebar-header-bg: #{darken($admin-sidebar-bg, 7%)}; // TODO USED OK + --ds-admin-sidebar-fixed-element-width: #{$admin-sidebar-fixed-element-width}; + --ds-admin-sidebar-fixed-element-z-index: 10; + --ds-admin-sidebar-collapsible-element-width: #{$admin-sidebar-collapsible-element-width}; + --ds-admin-sidebar-total-width: #{$admin-sidebar-total-width}; + --ds-admin-sidebar-link-color: white; --ds-dark-scrollbar-bg: #{$admin-sidebar-active-bg}; --ds-dark-scrollbar-alt-bg: #{lighten($admin-sidebar-active-bg, 2%)}; --ds-dark-scrollbar-fg: #47495d; + --ds-dark-scrollbar-width: 8px; --ds-submission-sections-margin-bottom: .5rem; @@ -69,9 +80,6 @@ --ds-fa-fixed-width: #{$fa-fixed-width}; --ds-icon-padding: #{$icon-padding}; - --ds-collapsed-sidebar-width: #{$collapsed-sidebar-width}; - --ds-sidebar-items-width: #{$sidebar-items-width}; - --ds-total-sidebar-width: #{$total-sidebar-width}; --ds-top-footer-bg: #{$gray-200}; --ds-footer-bg: #{theme-color('primary')}; diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss index b6b2d143d42..1aa0324cd4d 100644 --- a/src/styles/_global-styles.scss +++ b/src/styles/_global-styles.scss @@ -33,11 +33,6 @@ body { margin: 0; } -ds-admin-sidebar { - position: fixed; - z-index: var(--ds-sidebar-z-index); -} - .sticky-top { z-index: 0; } diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index ae9e6082f51..eb39b8c7866 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -14,7 +14,7 @@ @mixin dark-scrollbar() { &::-webkit-scrollbar { - width: 8px; + width: var(--ds-dark-scrollbar-width); height: 3px; } &::-webkit-scrollbar-button {