feat(ui5-side-navigation): add actions and option to select leaves only

packages/fiori/src/SideNavigation.ts

@@ -586,7 +586,7 @@ class SideNavigation extends UI5Element {
 	}
 
 	_selectItem(item: SideNavigationSelectableItemBase) {
-		if (item.disabled) {
+		if (!item.isSelectable()) {
 			return;
 		}
 

packages/fiori/src/SideNavigationItem.ts

@@ -7,6 +7,10 @@ import type SideNavigationItemBase from "./SideNavigationItemBase.js";
 import SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js";
 import type SideNavigation from "./SideNavigation.js";
 import type SideNavigationSubItem from "./SideNavigationSubItem.js";
+import type SideNavigationItemType from "./types/SideNavigationItemType.js";
+import type SideNavigationItemInteractionMode from "./types/SideNavigationItemInteractionMode.js";
+
+// Templates
 import SideNavigationItemTemplate from "./SideNavigationItemTemplate.js";
 
 // Styles
@@ -46,6 +50,18 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
 	@property({ type: Boolean })
 	expanded = false;
 
+	/**
+	 * @public
+	 */
+	@property()
+	type: `${SideNavigationItemType}` = "Default";
+
+	/**
+	 * @public
+	 */
+	@property()
+	interactionMode: `${SideNavigationItemInteractionMode}` = "Select";
+
 	/**
 	 * Defines if the item should be collapsible or not.
 	 * It is true, for example, for the items inside the Popover of the Side Navigation
@@ -142,6 +158,13 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
 		return this.selected;
 	}
 
+	/**
+	 * @override
+	 */
+	isSelectable() {
+		return super.isSelectable() && this.interactionMode === "Select" && this.type === "Default";
+	}
+
 	_onToggleClick(e: PointerEvent) {
 		e.stopPropagation();
 

packages/fiori/src/SideNavigationItemBase.ts

@@ -123,6 +123,10 @@ class SideNavigationItemBase extends UI5Element implements ITabbable {
 	get isSideNavigationItemBase() {
 		return true;
 	}
+
+	isSelectable() {
+		return false;
+	}
 }
 
 const isInstanceOfSideNavigationItemBase = (object: any): object is SideNavigationItemBase => {

packages/fiori/src/SideNavigationSelectableItemBase.ts

@@ -140,6 +140,13 @@ class SideNavigationSelectableItemBase extends SideNavigationItemBase {
 		return "page";
 	}
 
+	/**
+	 * @override
+	 */
+	isSelectable() {
+		return !this.disabled;
+	}
+
 	_onkeydown(e: KeyboardEvent) {
 		if (isSpace(e)) {
 			e.preventDefault();

packages/fiori/src/themes/SideNavigationItem.css

@@ -7,6 +7,14 @@
 	font-weight: var(--_ui5_side_navigation_group_text_weight);
 }
 
+:host([type="Action"]) {
+	color: var(--sapButton_TextColor);
+
+	& .ui5-sn-item-icon {
+		color: var(--sapButton_TextColor);
+	}
+}
+
 .ui5-sn-item-level1:not(:has(> .ui5-sn-item-icon)),
 .ui5-sn-item-level1.ui5-sn-item-selected:not(:has(> .ui5-sn-item-icon)) {
 	padding-inline-start: var(--_ui5_side_navigation_item_padding_left);

packages/fiori/src/types/SideNavigationItemInteractionMode.ts

@@ -0,0 +1,19 @@
+/**
+ * SideNavigationItem interaction modes.
+ * @public
+ */
+enum SideNavigationItemInteractionMode {
+	/**
+	 * Item is selectable.
+	 * @public
+	 */
+	Select = "Select",
+
+	/**
+	 * Only leaves are selectable.
+	 * @public
+	 */
+	SelectLeavesOnly = "SelectLeavesOnly",
+}
+
+export default SideNavigationItemInteractionMode;

packages/fiori/src/types/SideNavigationItemType.ts

@@ -0,0 +1,17 @@
+/**
+ * SideNavigationItem types.
+ * @public
+ */
+enum SideNavigationItemType {
+	/**
+	 * @public
+	 */
+	Default = "Default",
+
+	/**
+	 * @public
+	 */
+	Action = "Action",
+}
+
+export default SideNavigationItemType;

packages/fiori/test/pages/SideNavigation.html

@@ -54,6 +54,11 @@
 				<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
 			</ui5-side-navigation-item>
 			<ui5-side-navigation-item disabled id="item1" text="Home" icon="home" tooltip="Home tooltip"></ui5-side-navigation-item>
+			<ui5-side-navigation-item text="Home (Leaves Only)" icon="home" interaction-mode="SelectLeavesOnly"></ui5-side-navigation-item>
+			<ui5-side-navigation-item text="Home (Leaves Only)" icon="home" interaction-mode="SelectLeavesOnly">
+				<ui5-side-navigation-sub-item text="Local"></ui5-side-navigation-sub-item>
+				<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
+			</ui5-side-navigation-item>
 
 			<!-- Fixed Items -->
 			<ui5-side-navigation-item id="fixedItem1" slot="fixedItems" text="Useful Links" icon="chain-link" tooltip="Useful links tooltip">
@@ -63,6 +68,7 @@
 			</ui5-side-navigation-item>
 			<ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
 			<ui5-side-navigation-item slot="fixedItems" text="External Link" icon="chain-link" href="https://sap.com" target="_blank"></ui5-side-navigation-item>
+			<ui5-side-navigation-item slot="fixedItems" text="Quick Create" icon="write-new" type="Action"></ui5-side-navigation-item>
 		</ui5-side-navigation>
 		<div class="inner-content">
 			<div>
@@ -80,9 +86,6 @@
 		</div>
 	</div>
 
-
-
-
 	<script>
 		var sideNavigation = document.querySelector("ui5-side-navigation"),
 			input = document.querySelector("#counter"),
@@ -99,6 +102,7 @@
 		document.querySelectorAll("ui5-side-navigation-item").forEach(function (item) {
 			item.addEventListener("ui5-click", function (event) {
 				clickInput.value = `${++clickCounter}`;
+				debugger
 			});
 		});