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] replace ul/li with div in navbar

Browse Source
This commit is contained in:
Davide Negretti
2024-02-26 16:22:28 +01:00
parent 1fb742c00a
commit abba806d40
5 changed files with 14 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
View File

@@ -1,4 +1,4 @@
<li class="ds-menu-item-wrapper text-md-center" role="presentation" <div class="ds-menu-item-wrapper text-md-center"
[id]="'expandable-navbar-section-' + section.id" [id]="'expandable-navbar-section-' + section.id"
(mouseenter)="onMouseEnter($event, isActive)" (mouseenter)="onMouseEnter($event, isActive)"
(mouseleave)="onMouseLeave($event, isActive)" (mouseleave)="onMouseLeave($event, isActive)"
@@ -24,13 +24,13 @@
</span> </span>
<i class="fas fa-caret-down fa-xs toggle-menu-icon" aria-hidden="true"></i> <i class="fas fa-caret-down fa-xs toggle-menu-icon" aria-hidden="true"></i>
</a> </a>
<ul @slide *ngIf="isActive" (click)="deactivateSection($event)" <div @slide *ngIf="isActive" (click)="deactivateSection($event)"
[id]="expandableNavbarSectionId(section.id)" [id]="expandableNavbarSectionId(section.id)"
role="menu" role="menu"
class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0 px-3 px-md-0 pt-0 pt-md-1"> class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0 px-3 px-md-0 pt-0 pt-md-1">
<li *ngFor="let subSection of (subSections$ | async)" class="text-nowrap" role="presentation"> <div *ngFor="let subSection of (subSections$ | async)" class="text-nowrap" role="presentation">
<ng-container <ng-container
*ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container> *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
</li> </div>
</ul> </div>
</li> </div>

2
src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
View File

@@ -1,5 +1,5 @@
:host { :host {
li.ds-menu-item-wrapper { .ds-menu-item-wrapper {
position: relative; // align dropdown menu with respect to this element position: relative; // align dropdown menu with respect to this element
} }

7
src/app/navbar/navbar-section/navbar-section.component.html
View File

@@ -1,5 +1,4 @@
<li role="presentation" <div class="ds-menu-item-wrapper text-md-center"
class="ds-menu-item-wrapper text-md-center" [id]="'navbar-section-' + section.id">
[id]="'navbar-section-' + section.id">
<ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container> <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
</li> </div>

4
src/app/navbar/navbar.component.html
View File

@@ -9,12 +9,12 @@
<ng-container *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)"> <ng-container *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
<ds-themed-user-menu [inExpandableNavbar]="true"></ds-themed-user-menu> <ds-themed-user-menu [inExpandableNavbar]="true"></ds-themed-user-menu>
</ng-container> </ng-container>
<ul class="navbar-nav align-items-md-center mr-auto shadow-none gapx-3"> <div class="navbar-nav align-items-md-center mr-auto shadow-none gapx-3">
<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>
</ng-container> </ng-container>
</ul> </div>
</div> </div>
</div> </div>
</div> </div>

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

@@ -1,9 +1,9 @@
<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>
<ul 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">
<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>
</ng-container> </ng-container>
</ul> </div>