From abba806d405af9de44fea3734c542fa8ab7fef1b Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Mon, 26 Feb 2024 16:22:28 +0100
Subject: [PATCH] [DURACOM-195] replace ul/li with div in navbar

---
 .../expandable-navbar-section.component.html         | 12 ++++++------
 .../expandable-navbar-section.component.scss         |  2 +-
 .../navbar-section/navbar-section.component.html     |  7 +++----
 src/app/navbar/navbar.component.html                 |  4 ++--
 src/themes/dspace/app/navbar/navbar.component.html   |  4 ++--
 5 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
index 180ce16ba5..00752e7c04 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
@@ -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"
     (mouseenter)="onMouseEnter($event, isActive)"
     (mouseleave)="onMouseLeave($event, isActive)"
@@ -24,13 +24,13 @@
       </span>
       <i class="fas fa-caret-down fa-xs toggle-menu-icon" aria-hidden="true"></i>
     </a>
-    <ul @slide *ngIf="isActive" (click)="deactivateSection($event)"
+    <div @slide *ngIf="isActive" (click)="deactivateSection($event)"
         [id]="expandableNavbarSectionId(section.id)"
         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">
-        <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
                     *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
-        </li>
-    </ul>
-</li>
+        </div>
+    </div>
+</div>
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
index 961d450486..8849fbd809 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
@@ -1,5 +1,5 @@
 :host {
-  li.ds-menu-item-wrapper {
+  .ds-menu-item-wrapper {
     position: relative; // align dropdown menu with respect to this element
   }
 
diff --git a/src/app/navbar/navbar-section/navbar-section.component.html b/src/app/navbar/navbar-section/navbar-section.component.html
index ac51c86342..1411d3b6a6 100644
--- a/src/app/navbar/navbar-section/navbar-section.component.html
+++ b/src/app/navbar/navbar-section/navbar-section.component.html
@@ -1,5 +1,4 @@
-<li role="presentation"
-    class="ds-menu-item-wrapper text-md-center"
-    [id]="'navbar-section-' + section.id">
+<div class="ds-menu-item-wrapper text-md-center"
+     [id]="'navbar-section-' + section.id">
   <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
-</li>
+</div>
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 5e15315a9b..bda9815481 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -9,12 +9,12 @@
         <ng-container *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
           <ds-themed-user-menu [inExpandableNavbar]="true"></ds-themed-user-menu>
         </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
               *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
           </ng-container>
-        </ul>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/themes/dspace/app/navbar/navbar.component.html b/src/themes/dspace/app/navbar/navbar.component.html
index ac4424c638..518d3bbe30 100644
--- a/src/themes/dspace/app/navbar/navbar.component.html
+++ b/src/themes/dspace/app/navbar/navbar.component.html
@@ -1,9 +1,9 @@
 <ng-container *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
   <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
 </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
       *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
   </ng-container>
-</ul>
+</div>