@schukai/monster 4.43.4 → 4.43.6

package/source/components/navigation/site-navigation.mjs

@@ -1,5 +1,5 @@
 /**
- * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Copyright © schukai GmbH and all contributing authors, 2025. All rights reserved.
  * Node module: @schukai/monster
  *
  * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
@@ -26,7 +26,9 @@ import {
 	flip,
 	shift,
 	offset,
+	size,
 } from "@floating-ui/dom";
+import { fireCustomEvent } from "../../dom/events.mjs";
 
 export { SiteNavigation };
 
@@ -39,77 +41,76 @@ const hamburgerButtonSymbol = Symbol("hamburgerButton");
 const hamburgerNavSymbol = Symbol("hamburgerNav");
 const instanceSymbol = Symbol("instanceSymbol");
 const activeSubmenuHiderSymbol = Symbol("activeSubmenuHider");
+const hideHamburgerMenuSymbol = Symbol("hideHamburgerMenu");
+const hamburgerCloseButtonSymbol = Symbol("hamburgerCloseButton");
 
 /**
- * Responsive site navigation component.
+ * A responsive site navigation that automatically moves menu items into a hamburger menu
+ * when there isn't enough available space.
  *
+ * @summary An adaptive navigation component that supports hover and click interactions for submenus.
  * @fragments /fragments/components/navigation/site-navigation/
  *
- * @example /examples/components/navigation/site-navigation-simple
+ * @example /examples/components/navigation/site-navigation-simple Simple Navigation
+ * @example /examples/components/navigation/site-navigation-with-submenus Navigation with Submenus
+ * @example /examples/components/navigation/site-navigation-with-mega-menu Navigation with Mega Menu
  *
- * @since 4.41.0
- * @copyright schukai GmbH
- * @summary Responsive site navigation with hamburger menu and submenus
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/336.html
+ *
+ * @fires monster-layout-change - Fired when the layout of menu items changes. The event detail contains `{visibleItems, hiddenItems}`.
+ * @fires monster-hamburger-show - Fired when the hamburger menu is shown. The event detail contains `{button, menu}`.
+ * @fires monster-hamburger-hide - Fired when the hamburger menu is hidden. The event detail contains `{button, menu}`.
+ * @fires monster-submenu-show - Fired when a submenu is shown. The event detail contains `{context, trigger, submenu, level}`.
+ * @fires monster-submenu-hide - Fired when a submenu is hidden. The event detail contains `{context, trigger, submenu, level}`.
  */
 class SiteNavigation extends CustomElement {
-	/**
-	 * Returns a unique symbol for the instance.
-	 * @returns {symbol}
-	 */
 	static get [instanceSymbol]() {
 		return Symbol.for("@schukai/monster/components/navigation/site@@instance");
 	}
 
 	/**
-	 * Returns the default options for the component.
-	 * @returns {object}
+	 * Configuration options for the SiteNavigation component.
+	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+	 *
+	 * To set these options via an HTML tag, use the `data-monster-options` attribute.
+	 * The individual configuration values are detailed in the table below.
+	 *
+	 * @property {Object} templates - Template definitions.
+	 * @property {string} templates.main - The main HTML template for the component.
+	 * @property {string} interactionModel="auto" - Defines the interaction with submenus. Possible values: `auto`, `click`, `hover`. With `auto`, `hover` is used on desktop and `click` is used in the hamburger menu.
+	 * @property {Object} features - Container for additional feature flags.
+	 * @property {boolean} features.resetOnClose=true - If `true`, all open submenus within the hamburger menu will be reset when it is closed.
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
 			templates: { main: getTemplate() },
+			interactionModel: "auto", // 'auto', 'click', 'hover'
+			features: {
+				resetOnClose: true,
+			},
 		});
 	}
 
-	/**
-	 * Assembles the component and initializes controls and event handlers.
-	 * @returns {void}
-	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 		initControlReferences.call(this);
 		initEventHandler.call(this);
 	}
 
-	/**
-	 * Returns the CSS stylesheet for the component.
-	 * @returns {Array<CSSStyleSheet>}
-	 */
 	static getCSSStyleSheet() {
 		return [SiteNavigationStyleSheet];
 	}
 
-	/**
-	 * Returns the custom element tag name.
-	 * @returns {string}
-	 */
 	static getTag() {
 		return "monster-site-navigation";
 	}
 
-	/**
-	 * Called when the component is connected to the DOM.
-	 * @returns {void}
-	 */
 	connectedCallback() {
 		super.connectedCallback();
 		attachResizeObserver.call(this);
 		setTimeout(() => populateTabs.call(this), 0);
 	}
 
-	/**
-	 * Called when the component is disconnected from the DOM.
-	 * @returns {void}
-	 */
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		detachResizeObserver.call(this);
@@ -117,10 +118,9 @@ class SiteNavigation extends CustomElement {
 }
 
 /**
- * Initializes references to important control elements.
+ * Queries the shadow DOM for essential elements and stores their references.
  * @private
  * @this {SiteNavigation}
- * @returns {void}
  */
 function initControlReferences() {
 	if (!this.shadowRoot) throw new Error("Component requires a shadowRoot.");
@@ -136,54 +136,102 @@ function initControlReferences() {
 	this[hamburgerNavSymbol] = this.shadowRoot.querySelector(
 		'[data-monster-role="hamburger-nav"]',
 	);
+	this[hamburgerCloseButtonSymbol] = this.shadowRoot.querySelector(
+		'[part="hamburger-close-button"]',
+	);
 }
 
 /**
- * Initializes event handlers for hamburger menu and submenu interactions.
+ * Initializes event handlers for the hamburger menu button and its functionality.
  * @private
  * @this {SiteNavigation}
- * @returns {void}
  */
 function initEventHandler() {
 	if (!this.shadowRoot) throw new Error("Component requires a shadowRoot.");
 
 	const hamburgerButton = this[hamburgerButtonSymbol];
 	const hamburgerNav = this[hamburgerNavSymbol];
+	const hamburgerCloseButton = this[hamburgerCloseButtonSymbol];
 	let cleanup;
 
-	if (!hamburgerButton || !hamburgerNav) return;
+	if (!hamburgerButton || !hamburgerNav || !hamburgerCloseButton) return;
 
-	const showMenu = () => {
-		hamburgerNav.style.display = "block";
-		cleanup = autoUpdate(hamburgerButton, hamburgerNav, () => {
-			computePosition(hamburgerButton, hamburgerNav, {
-				placement: "bottom-end",
-				middleware: [offset(8), flip(), shift({ padding: 8 })],
-			}).then(({ x, y }) => {
-				Object.assign(hamburgerNav.style, {
-					left: `${x}px`,
-					top: `${y}px`,
-				});
-			});
-		});
-		setTimeout(() => document.addEventListener("click", handleOutsideClick), 0);
+	const handleOutsideClick = (event) => {
+		if (
+			!hamburgerButton.contains(event.target) &&
+			!hamburgerNav.contains(event.target)
+		) {
+			hideMenu();
+		}
 	};
 
 	const hideMenu = () => {
 		hamburgerNav.style.display = "none";
+		document.body.classList.remove("monster-navigation-open");
+
+		fireCustomEvent(this, "monster-hamburger-hide", {
+			button: hamburgerButton,
+			menu: hamburgerNav,
+		});
+
+		if (this.getOption("features.resetOnClose") === true) {
+			this[hiddenElementsSymbol]
+				.querySelectorAll(".is-open")
+				.forEach((submenu) => submenu.classList.remove("is-open"));
+		}
+
 		if (cleanup) {
 			cleanup();
+			cleanup = undefined;
 		}
 		document.removeEventListener("click", handleOutsideClick);
 	};
 
-	const handleOutsideClick = (event) => {
-		if (
-			!hamburgerButton.contains(event.target) &&
-			!hamburgerNav.contains(event.target)
-		) {
-			hideMenu();
-		}
+	this[hideHamburgerMenuSymbol] = hideMenu;
+
+	const showMenu = () => {
+		this[activeSubmenuHiderSymbol]?.();
+		hamburgerNav.style.display = "block";
+		document.body.classList.add("monster-navigation-open");
+
+		fireCustomEvent(this, "monster-hamburger-show", {
+			button: hamburgerButton,
+			menu: hamburgerNav,
+		});
+
+		cleanup = autoUpdate(hamburgerButton, hamburgerNav, () => {
+			// Desktop view where the hamburger menu is a dropdown
+			if (window.innerWidth > 768) {
+				computePosition(hamburgerButton, hamburgerNav, {
+					placement: "bottom-end",
+					strategy: "fixed",
+					middleware: [
+						offset(8),
+						flip(),
+						shift({ padding: 8 }),
+						size({
+							apply: ({ availableHeight, elements }) => {
+								Object.assign(elements.floating.style, {
+									maxHeight: `${availableHeight}px`,
+									overflowY: "auto",
+								});
+							},
+							padding: 8,
+						}),
+					],
+				}).then(({ x, y, strategy }) => {
+					Object.assign(hamburgerNav.style, {
+						position: strategy,
+						left: `${x}px`,
+						top: `${y}px`,
+					});
+				});
+			} else {
+				// Mobile view (fullscreen overlay), position is handled by CSS
+				Object.assign(hamburgerNav.style, { position: "", left: "", top: "" });
+			}
+		});
+		setTimeout(() => document.addEventListener("click", handleOutsideClick), 0);
 	};
 
 	hamburgerButton.addEventListener("click", (event) => {
@@ -195,13 +243,18 @@ function initEventHandler() {
 			showMenu();
 		}
 	});
+
+	hamburgerCloseButton.addEventListener("click", (event) => {
+		event.stopPropagation();
+		hideMenu();
+	});
 }
 
 /**
- * Attaches a ResizeObserver to re-calculate tabs when the component's size changes.
+ * Attaches a ResizeObserver to the main navigation element to recalculate
+ * tab distribution on size changes. A DeadMansSwitch is used for debouncing.
  * @private
  * @this {SiteNavigation}
- * @returns {void}
  */
 function attachResizeObserver() {
 	this[resizeObserverSymbol] = new ResizeObserver(() => {
@@ -221,10 +274,9 @@ function attachResizeObserver() {
 }
 
 /**
- * Detaches the ResizeObserver when the component is removed from the DOM.
+ * Disconnects and cleans up the ResizeObserver instance.
  * @private
  * @this {SiteNavigation}
- * @returns {void}
  */
 function detachResizeObserver() {
 	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
@@ -234,55 +286,125 @@ function detachResizeObserver() {
 }
 
 /**
- * Sets up a submenu based on its context (visible nav or hidden hamburger menu).
+ * Sets up interaction logic (hover or click) for a submenu.
+ * This function is called recursively for nested submenus.
  * @private
  * @this {SiteNavigation}
- * @param {HTMLElement} parentLi The list item that contains the submenu.
- * @param {'visible' | 'hidden'} context The context in which the submenu appears.
- * @returns {void}
+ * @param {HTMLLIElement} parentLi The list item containing the submenu.
+ * @param {'visible'|'hidden'} context The context (main nav or hamburger).
+ * @param {number} level The nesting level of the submenu (starts at 1).
  */
-function setupSubmenu(parentLi, context = "visible") {
-	const submenu = parentLi.querySelector("ul");
+function setupSubmenu(parentLi, context = "visible", level = 1) {
+	const submenu = parentLi.querySelector(
+		":scope > ul, :scope > div[part='mega-menu']",
+	);
 	if (!submenu) return;
 
-	submenu.setAttribute("part", "submenu");
+	if (submenu.tagName === "UL") {
+		submenu.setAttribute("part", "submenu");
+	}
 
-	if (context === "visible") {
+	const interaction = this.getOption("interactionModel", "auto");
+	const useHover =
+		interaction === "hover" ||
+		(interaction === "auto" && context === "visible");
+
+	if (useHover) {
 		const component = this;
 		let cleanup;
 		let hideTimeout;
 
 		const immediateHide = () => {
 			submenu.style.display = "none";
+			submenu
+				.querySelectorAll(
+					"ul[style*='display: block'], div[part='mega-menu'][style*='display: block']",
+				)
+				.forEach((sub) => {
+					sub.style.display = "none";
+				});
+
+			fireCustomEvent(this, "monster-submenu-hide", {
+				context,
+				trigger: parentLi,
+				submenu,
+				level,
+			});
+
 			if (cleanup) {
 				cleanup();
 				cleanup = null;
 			}
-			if (component[activeSubmenuHiderSymbol] === immediateHide) {
+
+			if (
+				level === 1 &&
+				component[activeSubmenuHiderSymbol] === immediateHide
+			) {
 				component[activeSubmenuHiderSymbol] = null;
 			}
 		};
 
 		const show = () => {
+			component[hideHamburgerMenuSymbol]?.();
 			clearTimeout(hideTimeout);
-			if (
-				component[activeSubmenuHiderSymbol] &&
-				component[activeSubmenuHiderSymbol] !== immediateHide
-			) {
-				component[activeSubmenuHiderSymbol]();
+
+			if (level === 1) {
+				if (
+					component[activeSubmenuHiderSymbol] &&
+					component[activeSubmenuHiderSymbol] !== immediateHide
+				) {
+					component[activeSubmenuHiderSymbol]();
+				}
+				component[activeSubmenuHiderSymbol] = immediateHide;
+			} else {
+				[...parentLi.parentElement.children]
+					.filter((li) => li !== parentLi)
+					.forEach((sibling) => {
+						const siblingSubmenu = sibling.querySelector(
+							":scope > ul, :scope > div[part='mega-menu']",
+						);
+						if (siblingSubmenu) {
+							siblingSubmenu.style.display = "none";
+						}
+					});
 			}
+
 			submenu.style.display = "block";
-			if (!cleanup) {
+			fireCustomEvent(this, "monster-submenu-show", {
+				context,
+				trigger: parentLi,
+				submenu,
+				level,
+			});
+
+			if (level === 1 && !cleanup) {
 				cleanup = autoUpdate(parentLi, submenu, () => {
 					computePosition(parentLi, submenu, {
 						placement: "bottom-start",
-						middleware: [offset(8), flip(), shift({ padding: 8 })],
-					}).then(({ x, y }) => {
-						Object.assign(submenu.style, { left: `${x}px`, top: `${y}px` });
+						strategy: "fixed",
+						middleware: [
+							offset(8),
+							flip({ fallbackPlacements: ["top-start"] }),
+							shift({ padding: 8 }),
+							size({
+								apply: ({ availableHeight, elements }) => {
+									Object.assign(elements.floating.style, {
+										maxHeight: `${availableHeight}px`,
+										overflowY: "auto",
+									});
+								},
+								padding: 8,
+							}),
+						],
+					}).then(({ x, y, strategy }) => {
+						Object.assign(submenu.style, {
+							position: strategy,
+							left: `${x}px`,
+							top: `${y}px`,
+						});
 					});
 				});
 			}
-			component[activeSubmenuHiderSymbol] = immediateHide;
 		};
 
 		const hideWithDelay = () => {
@@ -294,32 +416,83 @@ function setupSubmenu(parentLi, context = "visible") {
 		submenu.addEventListener("mouseenter", () => clearTimeout(hideTimeout));
 		submenu.addEventListener("mouseleave", hideWithDelay);
 	} else {
-		submenu.style.display = "none";
-		const anchor = parentLi.querySelector("a");
+		// Click behavior
+		const anchor = parentLi.querySelector(":scope > a");
 		if (anchor) {
 			anchor.addEventListener("click", (event) => {
 				event.preventDefault();
 				event.stopPropagation();
-				const isVisible = submenu.style.display === "block";
-				submenu.style.display = isVisible ? "none" : "block";
+
+				if (!submenu.classList.contains("is-open")) {
+					[...parentLi.parentElement.children]
+						.filter((li) => li !== parentLi)
+						.forEach((sibling) => {
+							const siblingSubmenu = sibling.querySelector(
+								":scope > ul, :scope > div[part='mega-menu']",
+							);
+							if (siblingSubmenu) {
+								siblingSubmenu.classList.remove("is-open");
+							}
+						});
+				}
+
+				const isOpen = submenu.classList.toggle("is-open");
+				const eventName = isOpen
+					? "monster-submenu-show"
+					: "monster-submenu-hide";
+				fireCustomEvent(this, eventName, {
+					context,
+					trigger: parentLi,
+					submenu,
+					level,
+				});
 			});
 		}
 	}
+
+	// Recursive call for nested lists
+	if (submenu.tagName === "UL") {
+		submenu
+			.querySelectorAll(":scope > li")
+			.forEach((li) => setupSubmenu.call(this, li, context, level + 1));
+	}
+}
+
+/**
+ * Creates a clone of a navigation list item, setting appropriate part attributes
+ * for styling and handling active states.
+ * @private
+ * @param {HTMLLIElement} item The original list item to clone.
+ * @returns {HTMLLIElement} The cloned and configured list item.
+ */
+function cloneNavItem(item) {
+	const liClone = item.cloneNode(true);
+	const aClone = liClone.querySelector("a");
+	let navItemPart = "nav-item";
+	let navLinkPart = "nav-link";
+
+	if (item.classList.contains("active")) {
+		navItemPart += " nav-item-active";
+		if (aClone) navLinkPart += " nav-link-active";
+	}
+
+	liClone.setAttribute("part", navItemPart);
+	if (aClone) aClone.setAttribute("part", navLinkPart);
+
+	return liClone;
 }
 
 /**
- * Calculates which navigation items fit in the visible area and moves the rest
- * to a hidden "hamburger" menu.
+ * Measures available space and distributes slotted navigation items between
+ * the visible list and the hidden hamburger menu list.
  * @private
  * @this {SiteNavigation}
- * @returns {void}
  */
 function populateTabs() {
 	const visibleList = this[visibleElementsSymbol];
 	const hiddenList = this[hiddenElementsSymbol];
 	const hamburgerButton = this[hamburgerButtonSymbol];
 	const hamburgerNav = this[hamburgerNavSymbol];
-
 	const topLevelUl = [...getSlottedElements.call(this, "ul")].find(
 		(ul) => ul.parentElement === this,
 	);
@@ -369,11 +542,10 @@ function populateTabs() {
 	for (let i = 0; i < sourceItems.length; i++) {
 		const item = sourceItems[i];
 		const itemClone = item.cloneNode(true);
-		const submenu = itemClone.querySelector("ul");
+		const submenu = itemClone.querySelector("ul, div[part='mega-menu']");
 		if (submenu) submenu.style.display = "none";
 
 		measurementList.appendChild(itemClone);
-
 		const isLastItem = i === sourceItems.length - 1;
 		const effectiveMaxWidth = isLastItem ? navWidth : availableWidthForTabs;
 
@@ -389,71 +561,94 @@ function populateTabs() {
 	const hiddenItems = sourceItems.slice(visibleItems.length);
 
 	if (visibleItems.length > 0) {
-		const clonedVisibleItems = visibleItems.map((item) => {
-			const liClone = item.cloneNode(true);
-			const aClone = liClone.querySelector("a");
-
-			liClone.setAttribute("part", "nav-item");
-			if (aClone) aClone.setAttribute("part", "nav-link");
-
-			if (item.classList.contains("active")) {
-				liClone.setAttribute("part", "nav-item nav-item-active");
-				if (aClone) aClone.setAttribute("part", "nav-link nav-link-active");
-			}
-			return liClone;
-		});
+		const clonedVisibleItems = visibleItems.map(cloneNavItem);
 		visibleList.append(...clonedVisibleItems);
 		visibleList
-			.querySelectorAll("li")
-			.forEach((li) => setupSubmenu.call(this, li, "visible"));
+			.querySelectorAll(":scope > li")
+			.forEach((li) => setupSubmenu.call(this, li, "visible", 1));
 	}
 
 	if (hiddenItems.length > 0) {
-		const clonedHiddenItems = hiddenItems.map((item) => {
-			const liClone = item.cloneNode(true);
-			const aClone = liClone.querySelector("a");
-
-			liClone.setAttribute("part", "nav-item");
-			if (aClone) aClone.setAttribute("part", "nav-link");
-			if (item.classList.contains("active")) {
-				liClone.setAttribute("part", "nav-item nav-item-active");
-				if (aClone) aClone.setAttribute("part", "nav-link nav-link-active");
-			}
-			return liClone;
-		});
+		const clonedHiddenItems = hiddenItems.map(cloneNavItem);
 		hiddenList.append(...clonedHiddenItems);
 		hamburgerButton.style.display = "flex";
 		hiddenList
-			.querySelectorAll("li")
-			.forEach((li) => setupSubmenu.call(this, li, "hidden"));
+			.querySelectorAll(":scope > li")
+			.forEach((li) => setupSubmenu.call(this, li, "hidden", 1));
 	}
 
 	visibleList.style.visibility = "visible";
+	fireCustomEvent(this, "monster-layout-change", { visibleItems, hiddenItems });
+}
+
+/**
+ * A simple template literal tag function for clarity.
+ * @private
+ * @param {TemplateStringsArray} strings
+ * @returns {string} The combined string.
+ */
+function html(strings) {
+	return strings.join("");
 }
 
 /**
  * Returns the HTML template for the component's shadow DOM.
  * @private
- * @returns {string}
+ * @returns {string} The HTML template string.
  */
 function getTemplate() {
-	return `
-    <div data-monster-role="control" part="control">
-      <nav data-monster-role="navigation" role="navigation" part="nav">
-        <ul id="visible-elements" part="visible-list"></ul>
-      </nav>
-      <div data-monster-role="hamburger-container" part="hamburger-container">
-          <button id="hamburger-button" part="hamburger-button" aria-label="More navigation items">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
+	return html`<div data-monster-role="control" part="control">
+    <nav data-monster-role="navigation" role="navigation" part="nav">
+      <ul id="visible-elements" part="visible-list"></ul>
+    </nav>
+    <div data-monster-role="hamburger-container" part="hamburger-container">
+      <button
+        id="hamburger-button"
+        part="hamburger-button"
+        aria-label="More navigation items"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"
+          />
+        </svg>
+      </button>
+      <nav
+        data-monster-role="hamburger-nav"
+        role="navigation"
+        part="hamburger-nav"
+        style="display: none;"
+      >
+        <div part="hamburger-header">
+          <button part="hamburger-close-button" aria-label="Close navigation">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
             </svg>
           </button>
-          <nav data-monster-role="hamburger-nav" role="navigation" part="hamburger-nav" style="display: none;">
-            <ul id="hidden-elements" part="hidden-list"></ul>
-          </nav>
-      </div>
-      <slot class="hidden-slot" style="display: none;"></slot>
-    </div>`;
+        </div>
+        <ul id="hidden-elements" part="hidden-list"></ul>
+      </nav>
+    </div>
+    <slot class="hidden-slot" style="display: none;"></slot>
+  </div>`;
 }
 
 registerCustomElement(SiteNavigation);