Merge pull request #6295 from WoltLab/6.2-acp-menu-icons

Add icons to the menu for mobile devices in the admin panel

Author: BurntimeX

ts/WoltLabSuite/Core/Acp/Ui/Page/Menu/Main/Backend.ts

@@ -71,10 +71,14 @@ export class AcpUiPageMenuMainBackend implements PageMenuMainProvider {
     const subMenu = document.getElementById("acpPageSubMenu")!;
 
     const menuItems: MenuItem[] = Array.from(menu.querySelectorAll(".acpPageMenuLink")).map(
-      (link: HTMLAnchorElement) => {
-        const menuItem = link.dataset.menuItem!;
-        const title = link.querySelector(".acpPageMenuItemLabel")!.textContent!;
+      (button: HTMLButtonElement) => {
+        const menuItem = button.dataset.menuItem!;
+        const title = button.querySelector(".acpPageMenuItemLabel")!.textContent!;
         const children = getSubMenuItems(subMenu, menuItem);
+        let icon = button.querySelector("fa-icon") ?? undefined;
+        if (icon) {
+          icon = icon.cloneNode(true) as FaIcon;
+        }
 
         return {
           active: false,
@@ -83,6 +87,7 @@ export class AcpUiPageMenuMainBackend implements PageMenuMainProvider {
           depth: 0,
           identifier: null,
           title,
+          icon,
         };
       },
     );

ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts

@@ -300,6 +300,9 @@ export class PageMenuMain implements PageMenuProvider {
 
       if (menuItem.icon) {
         label.append(menuItem.icon);
+        if (!(menuItem.icon instanceof HTMLImageElement)) {
+          menuItem.icon.size = 24;
+        }
 
         const span = document.createElement("span");
         span.textContent = menuItem.title;
@@ -319,9 +322,6 @@ export class PageMenuMain implements PageMenuProvider {
           const button = label.nextElementSibling as HTMLAnchorElement;
           button.click();
         });
-
-        // The button to expand the link group is used instead.
-        label.setAttribute("aria-hidden", "true");
       }
 
       listItem.append(label);