Missing indicator for unread content

diff --git a/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts b/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts
index c34e93c622386272be5b2aed308e06ecd8684dcf..e22ae5996066880bde787a2c9a838b2ca24e8bc0 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts
+++ b/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts
@@ -202,6 +202,16 @@ export class PageMenuMain implements PageMenuProvider {
       listItem.append(label);
     }
 
+    if (menuItem.counter > 0) {
+      const counter = document.createElement("span");
+      counter.classList.add("pageMenuMainItemCounter", "badge", "badgeUpdate");
+      counter.setAttribute("aria-label", "TODO");
+      counter.textContent = menuItem.counter.toString();
+
+      listItem.classList.add("pageMenuMainItemOutstandingItems");
+      listItem.append(counter);
+    }
+
     if (menuItem.children.length) {
       listItem.classList.add("pageMenuMainItemExpandable");
 

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js
index f835aaa0b530bf633e10597a8d08fbb94d84fd43..e39c6dbb9a06e2d635e21fd4593fcba591af281a 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js
@@ -150,6 +150,14 @@ define(["require", "exports", "tslib", "./Container", "../../../Language", "../.
                 label.textContent = menuItem.title;
                 listItem.append(label);
             }
+            if (menuItem.counter > 0) {
+                const counter = document.createElement("span");
+                counter.classList.add("pageMenuMainItemCounter", "badge", "badgeUpdate");
+                counter.setAttribute("aria-label", "TODO");
+                counter.textContent = menuItem.counter.toString();
+                listItem.classList.add("pageMenuMainItemOutstandingItems");
+                listItem.append(counter);
+            }
             if (menuItem.children.length) {
                 listItem.classList.add("pageMenuMainItemExpandable");
                 const menuId = Util_1.default.getUniqueId();

diff --git a/wcfsetup/install/files/style/ui/pageMenu.scss b/wcfsetup/install/files/style/ui/pageMenu.scss
index 4737bc26a2e044347086d7febf583edde5c876e8..554bfbf2d9aac4fd71c4e563703976e161aeac47 100644 (file)
--- a/wcfsetup/install/files/style/ui/pageMenu.scss
+++ b/wcfsetup/install/files/style/ui/pageMenu.scss
@@ -51,15 +51,34 @@
 
 .pageMenuMainItem {
        border-bottom: 1px solid var(--border-color);
+       column-gap: 10px;
+       display: grid;
+       grid-template-areas: "item";
+       grid-template-columns: auto;
        position: relative;
 }
 
+.pageMenuMainItemOutstandingItems {
+       grid-template-areas: "item counter";
+       grid-template-columns: auto min-content;
+
+       &:not(.pageMenuMainItemExpandable) {
+               padding-right: 10px;
+       }
+}
+
 .pageMenuMainItemExpandable {
-       display: grid;
        grid-template-areas:
                "item button"
                "list list";
        grid-template-columns: auto 44px;
+
+       &.pageMenuMainItemOutstandingItems {
+               grid-template-areas:
+                       "item counter button"
+                       "list list    list";
+               grid-template-columns: auto min-content 44px;
+       }
 }
 
 .pageMenuMainItemLink {
@@ -69,7 +88,16 @@
        font-weight: 600;
        grid-area: item;
        min-height: 44px;
+       overflow: hidden;
        padding: 0 10px;
+       text-overflow: ellipsis;
+       white-space: nowrap;
+}
+
+.pageMenuMainItemCounter {
+       align-self: center;
+       grid-area: counter;
+       white-space: nowrap;
 }
 
 .pageMenuMainItemToggle {