hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 10:04:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

[DURACOM-195] fix spacing in collapsible menu

Browse Source
This commit is contained in:
Davide Negretti
2024-02-27 14:05:48 +01:00
parent fdbe7a6005
commit a88282d70b
3 changed files with 35 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/styles/_custom_variables.scss
View File

@@ -39,6 +39,7 @@
--ds-expandable-navbar-link-color: #{$body-color}; --ds-expandable-navbar-link-color: #{$body-color};
--ds-expandable-navbar-link-color-hover: #{$body-color}; --ds-expandable-navbar-link-color-hover: #{$body-color};
--ds-expandable-navbar-link-background-hover: #{$ds-navbar-link-color-hover}; --ds-expandable-navbar-link-background-hover: #{$ds-navbar-link-color-hover};
--ds-expandable-navbar-item-vertical-padding: 0.25rem;
--ds-user-menu-item-vertical-padding: 0.25rem; --ds-user-menu-item-vertical-padding: 0.25rem;
--ds-user-menu-dropdown-padding: 1rem; --ds-user-menu-dropdown-padding: 1rem;

59
src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
View File

@@ -32,43 +32,50 @@
text-decoration: none; text-decoration: none;
} }
nav#desktop-navbar ::ng-deep { nav#desktop-navbar { // in header component
#main-site-navigation {
/* Desktop menu */
/* Desktop menu */ .ds-menu-item-wrapper, .ds-menu-item, .ds-menu-toggler-wrapper {
// fill navbar height (required by dropdown menus) and center content
.ds-menu-item-wrapper, .ds-menu-item, .ds-menu-toggler-wrapper { display: flex;
// fill navbar height (required by dropdown menus) and center content align-items: center;
display: flex; height: 100%;
align-items: center;
height: 100%;
}
.ds-menu-item {
// define here the style for top-level navbar menu items
padding: var(--ds-navbar-item-vertical-padding) var(--ds-navbar-item-horizontal-padding);
}
.ds-menu-item, .ds-menu-toggler-wrapper {
color: var(--ds-navbar-link-color) !important;
&:hover, &:focus {
color: var(--ds-navbar-link-color-hover) !important;
} }
}
/* desktop submenu */
.dropdown-menu {
.ds-menu-item { .ds-menu-item {
// define here the style for second-level navbar menu items // define here the style for top-level navbar menu items
padding: var(--ds-navbar-dropdown-item-vertical-padding) var(--ds-navbar-dropdown-item-horizontal-padding); padding: var(--ds-navbar-item-vertical-padding) var(--ds-navbar-item-horizontal-padding);
}
.ds-menu-item, .ds-menu-toggler-wrapper {
color: var(--ds-navbar-link-color) !important;
&:hover, &:focus {
color: var(--ds-navbar-link-color-hover) !important;
}
} }
}
/* desktop submenu */
.dropdown-menu {
.ds-menu-item {
// define here the style for second-level navbar menu items
padding: var(--ds-navbar-dropdown-item-vertical-padding) var(--ds-navbar-dropdown-item-horizontal-padding);
}
}
}
} }
nav#collapsible-mobile-navbar { nav#collapsible-mobile-navbar { // in header-navbar-wrapper component
border-top: var(--ds-expandable-navbar-border-top-style); border-top: var(--ds-expandable-navbar-border-top-style);
padding-top: var(--ds-expandable-navbar-padding-top); padding-top: var(--ds-expandable-navbar-padding-top);
#main-site-navigation {
.ds-menu-item {
padding: var(--ds-expandable-navbar-item-vertical-padding) 0;
}
}
} }
} }
} }

2
src/themes/dspace/app/navbar/navbar.component.html
View File

@@ -1,7 +1,7 @@
<ng-container *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)"> <ng-container *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
<ds-user-menu [inExpandableNavbar]="true"></ds-user-menu> <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
</ng-container> </ng-container>
<div class="navbar-nav h-100 align-items-md-stretch gapx-3" role="menubar"> <div class="navbar-nav h-100 align-items-md-stretch gapx-3" role="menubar" id="main-site-navigation" [ngClass]="(isMobile$ | async) ? 'navbar-nav-mobile' : 'navbar-nav-desktop'">
<ng-container *ngFor="let section of (sections | async)"> <ng-container *ngFor="let section of (sections | async)">
<ng-container <ng-container
*ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container> *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>