chore(ui5-side-navigation): enhance Overlay Mode sample

packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigation.mdx

@@ -22,7 +22,7 @@ Quick action items allow for providing access to frequent functionality.
 
 <QuickAction />
 
-### Overlay mode
+### Overlay Mode
 SideNavigation is enabled to be used inside a responsive popover. This example shows how to achieve overlay mode with correct design and interaction.
 
 <OverlayMode />

packages/website/docs/_samples/fiori/SideNavigation/OverlayMode/main.css

@@ -14,4 +14,8 @@
 
 .contentItemVisible {
 	display: block;
+}
+
+#sideNavigation {
+	width: 18rem;
 }

packages/website/docs/_samples/fiori/SideNavigation/OverlayMode/main.js

@@ -11,6 +11,9 @@ import "@ui5/webcomponents/dist/ResponsivePopover.js"
 import "@ui5/webcomponents-fiori/dist/Page.js"
 import "@ui5/webcomponents/dist/Text.js";
 import "@ui5/webcomponents/dist/Title.js";
+import "@ui5/webcomponents/dist/Dialog.js";
+import "@ui5/webcomponents/dist/Bar.js";
+import "@ui5/webcomponents/dist/Button.js";
 
 import "@ui5/webcomponents-icons/dist/home.js";
 import "@ui5/webcomponents-icons/dist/chain-link.js";
@@ -19,7 +22,7 @@ import "@ui5/webcomponents-icons/dist/locate-me.js";
 import "@ui5/webcomponents-icons/dist/calendar.js";
 import "@ui5/webcomponents-icons/dist/history.js";
 import "@ui5/webcomponents-icons/dist/customer.js"; 
-import "@ui5/webcomponents-icons/dist/menu.js";
+import "@ui5/webcomponents-icons/dist/menu2.js";
 import "@ui5/webcomponents-icons/dist/write-new.js";
 import "@ui5/webcomponents-icons/dist/widgets.js";
 import "@ui5/webcomponents-icons/dist/compare.js";
@@ -42,4 +45,16 @@ sideNavigation.addEventListener("selection-change", function (event) {
 	document.getElementById(event.detail.item.getAttribute("href").replace("#", ""))?.classList.add("contentItemVisible");
 
 	respPopover.open=false;
+});
+
+quickAction.accessibilityAttributes = {
+	hasPopup: "dialog"
+};
+
+quickAction.addEventListener("click", () => {
+	quickActionDialog.open = true;
+});
+
+quickActionCloseBtn.addEventListener("click", () => {
+	quickActionDialog.open = false;
 });

packages/website/docs/_samples/fiori/SideNavigation/OverlayMode/sample.html

@@ -17,7 +17,7 @@
 			primary-title="UI5 Web Components"
 			secondary-title="The Best Run SAP"
 		>
-			<ui5-button icon="menu" slot="startButton" id="menuBtn"></ui5-button>
+			<ui5-button icon="menu2" slot="startButton" id="menuBtn"></ui5-button>
 		</ui5-shellbar>
 		<ui5-responsive-popover id="respPopover" opener="menuBtn" placement="Bottom" accessible-name="Main Navigation">
 			<ui5-side-navigation id="sideNavigation" design="Plain">
@@ -108,6 +108,14 @@
 				</ui5-text>
 			</div>
 		</div>
+
+		<ui5-dialog header-text="Create New Item" draggable resizable id="quickActionDialog">
+			<ui5-text>Create new item...</ui5-text>
+			<ui5-bar slot="footer" design="Footer">
+				<ui5-button slot="endContent" design="Emphasized">Create</ui5-button>
+				<ui5-button slot="endContent" id="quickActionCloseBtn">Close</ui5-button>
+			</ui5-bar>
+		</ui5-dialog>
 	</ui5-page>
 	<!-- playground-fold -->
 	<script type="module" src="main.js"></script>