From 46dd812682b642bb0487b9c3a13a8e7ff9d76360 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 23 Dec 2021 17:08:24 +0100
Subject: [PATCH] Missing indicator for unread content

---
 ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts     | 10 +++++++
 .../js/WoltLabSuite/Core/Ui/Page/Menu/Main.js |  8 +++++
 wcfsetup/install/files/style/ui/pageMenu.scss | 30 ++++++++++++++++++-
 3 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts b/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts
index c34e93c622..e22ae59960 100644
--- 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 f835aaa0b5..e39c6dbb9a 100644
--- 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 4737bc26a2..554bfbf2d9 100644
--- 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 {
-- 
2.20.1