From 06646f957177a30e4047a79f4a32effdaddd92e4 Mon Sep 17 00:00:00 2001
From: Eugen Neuber <eugen.neuber@tugraz.at>
Date: Wed, 2 Jun 2021 14:26:24 +0200
Subject: [PATCH] Add "part" to side menu item in AppShell
---
packages/app-shell/src/app-shell.js | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js
index f3df2fb2..e13fdef0 100644
--- a/packages/app-shell/src/app-shell.js
+++ b/packages/app-shell/src/app-shell.js
@@ -344,6 +344,10 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
// if not the current page was clicked we need to check if the page can be left
if (!e.currentTarget.className.includes("selected")) {
+ this.shadowRoot.querySelectorAll('li > a').forEach(
+ (a) => a.setAttribute("part", "side-menu-item")
+ );
+ e.currentTarget.setAttribute("part", "side-menu-item-selected");
// simulate a "beforeunload" event
const event = new CustomEvent("beforeunload", {
bubbles: true,
@@ -864,7 +868,7 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
// build the menu
let menuTemplates = [];
for (let routingName of this.visibleRoutes) {
- menuTemplates.push(html`<li><a @click="${(e) => this.onMenuItemClick(e)}" href="${this.router.getPathname({component: routingName})}" data-nav class="${getSelectClasses(routingName)}" title="${this.metaDataText(routingName, "description")}">${this.metaDataText(routingName, "short_name")}</a></li>`);
+ menuTemplates.push(html`<li><a @click="${(e) => this.onMenuItemClick(e)}" href="${this.router.getPathname({component: routingName})}" data-nav class="${getSelectClasses(routingName)}" title="${this.metaDataText(routingName, "description")}" part="side-menu-item${this.activeView === routingName ? '-selected' : ''}">${this.metaDataText(routingName, "short_name")}</a></li>`);
}
const imprintUrl = this.lang === "en" ?
@@ -908,7 +912,7 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
</h2>
<ul class="menu hidden">
${menuTemplates}
- <li class="close" @click="${this.hideMenu}"><dbp-icon name="close" style="color: red"></dbp-icon></li>
+ <li class="close" @click="${this.hideMenu}" part="side-menu-item"><dbp-icon name="close" style="color: red"></dbp-icon></li>
</ul>
</aside>
--
GitLab