Merge pull request #6678 from WoltLab/63-acp-breadcrumbs

Add breadcrumb navigation to the ACP

Author: BurntimeX

wcfsetup/install/files/acp/style/layout.scss

@@ -508,7 +508,7 @@ html[data-color-scheme="dark"] {
 	flex: 1 1 auto;
 
 	@include screen-lg {
-		padding: 40px 0;
+		padding: 30px 0;
 	}
 
 	@include screen-md-down {
@@ -1066,3 +1066,35 @@ html[data-color-scheme="dark"] {
 
 	@include wcfFontSmall;
 }
+
+.acpBreadcrumbs {
+	margin-bottom: 5px;
+}
+
+.acpBreadcrumbs__list {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+	color: var(--wcfContentDimmedText);
+
+	@include wcfFontSmall;
+}
+
+.acpBreadcrumbs__item {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+}
+
+.acpBreadcrumbs__item__separator {
+	display: flex;
+}
+
+.acpBreadcrumbs__item__link {
+	color: inherit;
+
+	&:hover {
+		color: inherit;
+		text-decoration: underline;
+	}
+}

wcfsetup/install/files/acp/templates/breadcrumbs.tpl

@@ -0,0 +1,27 @@
+{if PACKAGE_ID && $__wcf->user->userID && $__isLogin|empty}
+	{hascontent}
+		<nav class="acpBreadcrumbs" aria-label="{lang}wcf.page.breadcrumb{/lang}">
+			<ol class="acpBreadcrumbs__list">
+				{content}
+					{foreach from=$__wcf->getACPMenu()->getBreadcrumbs() item='acpBreadcrumb' name='acpBreadcrumbs'}
+						<li class="acpBreadcrumbs__item">
+							{if $acpBreadcrumb->getLink()}
+								<a class="acpBreadcrumbs__item__link" href="{$acpBreadcrumb->getLink()}">
+									<span class="acpBreadcrumbs__item__title">{$acpBreadcrumb}</span>
+								</a>
+							{else}
+								<span class="acpBreadcrumbs__item__title">{$acpBreadcrumb}</span>
+							{/if}
+
+							{if !$tpl.foreach.acpBreadcrumbs.last}
+								<span class="acpBreadcrumbs__item__separator" aria-hidden="true">
+									<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"></path></svg>
+								</span>
+							{/if}
+						</li>
+					{/foreach}
+				{/content}
+			</ol>
+		</nav>
+	{/hascontent}
+{/if}

wcfsetup/install/files/acp/templates/header.tpl

@@ -188,8 +188,8 @@
 
 		<div id="acpPageContentContainer" class="acpPageContentContainer">
 			{include file='pageMenu'}
-			
+
 			<section id="main" class="main" role="main">
 				<div class="layoutBoundary">
 					<div id="content" class="content">
-					
+						{include file='breadcrumbs'}

wcfsetup/install/files/lib/system/menu/acp/ACPMenu.class.php

@@ -115,4 +115,31 @@ protected function removeEmptyItems(string $parentMenuItem = '')
             }
         }
     }
+
+    /**
+     * Returns the breadcrumb items for the active menu path, ordered from the
+     * top-level section down to the immediate parent of the current page. The
+     * current page itself is omitted.
+     *
+     * @return AcpMenuItem[]
+     * @since 6.3
+     */
+    public function getBreadcrumbs(): array
+    {
+        if ($this->activeMenuItems === []) {
+            return [];
+        }
+
+        $names = \array_reverse($this->activeMenuItems);
+        \array_pop($names);
+
+        $breadcrumbs = [];
+        foreach ($names as $name) {
+            if (isset($this->menuItemList[$name])) {
+                $breadcrumbs[] = $this->menuItemList[$name];
+            }
+        }
+
+        return $breadcrumbs;
+    }
 }