SAP · fifoosid · Jul 23, 2020 · Jun 26, 2020 · Jun 29, 2020 · Jun 30, 2020
diff --git a/packages/fiori/test/pages/SideNavigationSample.html b/packages/fiori/test/pages/SideNavigationSample.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Shell Bar</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+	<script data-ui5-config type="application/json">
+		{
+			"rtl": false
+		}
+	</script>
+
+	<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+	<script src="../../resources/bundle.esm.js" type="module"></script>
+	<script nomodule src="../../resources/bundle.es5.js"></script>
+
+	<style>
+		html, body {
+			margin: 0;
+			padding: 0;
+		}
+
+		body {
+			height: 100vh;
+			display: flex;
+			flex-direction: column;
+		}
+	</style>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor);">
+	<ui5-shellbar 
+		primary-title="UI5 Web Components"
+		secondary-title="The Best Run SAP"
+		show-co-pilot
+	>
+		<ui5-button icon="menu" slot="startButton" id="startButton"></ui5-button>
+	</ui5-shellbar>
+
+	<ui5-side-navigation>
+		<ui5-side-navigation-item text="Home" icon="home"></ui5-side-navigation-item>
+		<ui5-side-navigation-item text="People" expandable expanded icon="group">
+			<ui5-side-navigation-sub-item text="From My Team" icon="employee-approvals"></ui5-side-navigation-sub-item>
+			<ui5-side-navigation-sub-item text="From Other Teams" icon="employee-rejections"></ui5-side-navigation-sub-item>
+		</ui5-side-navigation-item>
+		<ui5-side-navigation-item text="Locations" icon="locate-me" selected></ui5-side-navigation-item>
+		<ui5-side-navigation-item text="Events" expandable icon="calendar">
+			<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>
+
+		<ui5-side-navigation-item slot="fixedItems" text="Usefull Links" icon="chain-link"></ui5-side-navigation-item>
+		<ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
+	</ui5-side-navigation>
+
+	<script>
+		var sideNavigation = document.querySelector("ui5-side-navigation");
+		document.querySelector("#startButton").addEventListener("click", function(event) {
+			sideNavigation.collapsed = !sideNavigation.collapsed;
+		});
+	</script>
+</body>
+</html>
diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js
@@ -54,6 +54,9 @@ import RadioButton from "./dist/RadioButton.js";
 import ResponsivePopover from "./dist/ResponsivePopover.js";
 import SegmentedButton from "./dist/SegmentedButton.js";
 import Select from "./dist/Select.js";
+import SideNavigation from "./dist/SideNavigation.js";
+import SideNavigationItem from "./dist/SideNavigationItem.js";
+import SideNavigationSubItem from "./dist/SideNavigationSubItem.js";
 import Switch from "./dist/Switch.js";
 import MessageStrip from "./dist/MessageStrip.js";
 import MultiComboBox from "./dist/MultiComboBox.js";

diff --git a/packages/main/src/Icon.hbs b/packages/main/src/Icon.hbs
@@ -1,4 +1,5 @@
-<svg
+<div class="ui5-icon-svg-wrapper">
+	<svg
 	class="ui5-icon-root"
 	tabindex="{{tabIndex}}"
 	dir="{{_dir}}"
@@ -22,3 +23,5 @@
 		<path transform="translate(0, 512) scale(1, -1)" d="{{pathData}}"/>
 	</g>
 </svg>
+
+</div>
diff --git a/packages/main/src/SideNavigation.hbs b/packages/main/src/SideNavigation.hbs
@@ -0,0 +1,71 @@
+<div class="ui5-sn-root">
+    {{#if items.length}}
+        <ui5-tree
+            id="ui5-sn-items-tree"
+            mode="SingleSelect"
+            ?_show-selected-on-sub-items="true"
+            @ui5-item-click="{{handleItemClick}}"
+        >
+            {{#each _currentItems}}
+                <ui5-tree-item
+                    icon="{{this.treeItem.icon}}"
+                    level="{{this.treeItem.level}}"
+                    .treeItem="{{this.treeItem}}"
+                    show-toggle-button-end="true"
+                    text="{{this.treeItem.text}}"
+                    ?has-children="{{this.treeItem.expandable}}"
+                    ?expanded="{{this.treeItem.expanded}}"
+                    ?_collapsed="{{this.collapsed}}"
+                    ?selected="{{this.treeItem.selected}}"
+                >
+                    {{#if ../_shoudlShowSubItems}}
+                        {{#if subItems}}
+                            {{#each subItems}}
+                                <ui5-tree-item
+                                    level="{{this.level}}"
+                                    .treeItem="{{this}}"
+                                    show-toggle-button-end="true"
+                                    text="{{this.text}}"
+                                    index="{{this.index}}"
+                                    ?has-children="{{this.expandable}}"
+                                    ?selected="{{this.selected}}"
+                                >
+                                </ui5-tree-item>
+                            {{/each}}
+                        {{/if}}
+                    {{/if}}
+                </ui5-tree-item>
+            {{/each}}
+        </ui5-tree>
+    {{/if}}
+
+    {{#if _currentFixedItems.length}}
+       <div>
+            <div class="ui5-sn-bottom-content-border">
+                <span></span>
+            </div>
+            <ui5-tree
+                id="ui5-sn-fixed-items-tree"
+                mode="SingleSelect"
+                ?_show-selected-on-sub-items="true"
+                @ui5-item-click="{{handleItemClick}}"
+            >
+                {{#each _currentFixedItems}}
+                        <ui5-tree-item
+                        icon="{{this.treeItem.icon}}"
+                        level="{{this.treeItem.level}}"
+                        .treeItem="{{this.treeItem}}"
+                        show-toggle-button-end="true"
+                        text="{{this.treeItem.text}}"
+                        index="{{this.index}}"
+                        ?has-children="{{this.treeItem.expandable}}"
+                        ?expanded="{{this.treeItem.expanded}}"
+                        ?_collapsed="{{this.collapsed}}"
+                        ?selected="{{this.treeItem.selected}}"
+                    >
+                    </ui5-tree-item>
+                {{/each}}
+            </ui5-tree>
+       </div>
+    {{/if}}
+</div>
diff --git a/packages/main/src/SideNavigation.js b/packages/main/src/SideNavigation.js
@@ -0,0 +1,229 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import List from "./List.js";
+import SideNavigationTemplate from "./generated/templates/SideNavigationTemplate.lit.js";
+import SideNavigationItemPopoverContentTemplate from "./generated/templates/SideNavigationItemPopoverContentTemplate.lit.js";
+
+// Styles
+import SideNavigationCss from "./generated/themes/SideNavigation.css.js";
+import StandardListItem from "./StandardListItem.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-side-navigation",
+	managedSlots: true,
+	properties: /** @lends sap.ui.webcomponents.main.SideNavigation.prototype */ {
+		/**
+		 * Defines whether the <code>ui5-side-navigation</code> is expanded or collapsed.
+		 *
+		 * @public
+		 * @type {boolean}
+		 * @defaultvalue false
+		 */
+		collapsed: {
+			type: Boolean,
+		},
+
+		/**
+		 * @private
+		 */
+		_popoverContent: {
+			type: Object,
+			multiple: true,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.main.SideNavigation.prototype */ {
+		/**
+		 * Defines the items in the <code>ui5-side-navigation</code>.
+		 *
+		 * @public
+		 * @slot
+		 */
+		"default": {
+			propertyName: "items",
+			type: HTMLElement,
+		},
+
+		/**
+		 * Defines the fixed items in the bottom of the <code>ui5-side-navigation</code>.
+		 *
+		 * @public
+		 * @slot
+		 */
+		fixedItems: {
+			type: HTMLElement,
+		},
+	},
+	events: /** @lends sap.ui.webcomponents.main.SideNavigation.prototype */ {
+		/**
+		 * Fired when the selection has changed via user interaction
+		 *
+		 * @event sap.ui.webcomponents.main.SideNavigation#selection-change
+		 * @param {HTMLElement} item the clicked item.
+		 * @public
+		 */
+		"selection-change": {
+			item: {
+				type: HTMLElement,
+			},
+		},
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * <code>ui5-side-navigation</code> is used as a standard menu in applications. In order to add menu items use <code>ui5-side-navigation-items</code>.
+ *
+ * For the <code>ui5-side-navigation</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents/dist/SideNavigation.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.SideNavigation
+ * @extends UI5Element
+ * @tagname ui5-side-navigation
+ * @since 1.0.0-rc.8
+ * @appenddocs SideNavigationItem
+ * @public
+ */
+class SideNavigation extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return SideNavigationCss;
+	}
+
+	static get template() {
+		return SideNavigationTemplate;
+	}
+
+	static get staticAreaTemplate() {
+		return SideNavigationItemPopoverContentTemplate;
+	}
+
+	static async onDefine() {
+		await Promise.all([
+			ResponsivePopover.define(),
+			List.define(),
+			StandardListItem.define(),
+		]);
+	}
+
+	onBeforeRendering() {
+		this._currentItems = this.buildItems();
+		this._currentFixedItems = this.buildItems(true);
+	}
+
+	buildItems(isFixedItems = false) {
+		const currentItems = isFixedItems ? this.fixedItems : this.items;
+		const result = [];
+
+		currentItems.forEach(element => {
+			const item = {
+				treeItem: element,
+				subItems: element.items,
+				collapsed: this.collapsed,
+			};
+
+			result.push(item);
+		});
+
+		return result;
+	}
+
+	handleItemClick(event) {
+		const item = event.detail.item;
+		const currentTree = this._itemsTree === event.target ? this._itemsTree : this._fixedItemsTree; // Gets the tree which must not have selected items
+		const otherTree = this._fixedItemsTree === event.target ? this._itemsTree : this._fixedItemsTree; // Gets the tree which must not have selected items
+		otherTree._clearSelectedItems();
+
+		this.fireSelectionChange(event);
+
+		if (this.collapsed && item.treeItem.items.length) {
+			this._popoverContent = this._generatePopoverContent(event.detail.item);
+			this.openPicker(currentTree._getRealItemDomRef(item), item);
+		}
+	}
+
+	fireSelectionChange(event) {
+		const item = event.detail.item.treeItem // if event is fired when not collapsed
+		|| event.detail.item.item; // if event is fired from the list in the popover
+
+		this.fireEvent("selection-change", { item });
+	}
+
+	_resetSelectedItems(items) {
+		items.forEach(item => {
+			item.selected = false;
+
+			if (item.subItems) {
+				this._resetSelectedItems(item.subItems);
+			}
+		});
+	}
+
+	_generatePopoverContent(item) {
+		const result = [{
+			text: item.treeItem.text,
+			item: item.treeItem,
+		}];
+
+		item.treeItem.items.forEach(element => result.push({
+			text: element.text,
+			item: element,
+		}));
+
+		return result;
+	}
+
+	getMiddleFocusHelper() {
+		return this.getDomRef().querySelector(".ui5-sn-middle-focus-helper");
+	}
+
+	_focusOtherList() {
+		this.getMiddleFocusHelper().focus();
+	}
+
+	async getPicker() {
+		return (await this.getStaticAreaItemDomRef()).querySelector("ui5-responsive-popover");
+	}
+
+	async openPicker(opener) {
+		const responsivePopover = await this.getPicker();
+
+		responsivePopover.open(opener);
+	}
+
+	get _itemsTree() {
+		return this.getDomRef().querySelector("#ui5-sn-items-tree");
+	}
+
+	get _fixedItemsTree() {
+		return this.getDomRef().querySelector("#ui5-sn-fixed-items-tree");
+	}
+
+	get _shoudlShowSubItems() {
+		return !this.collapsed;
+	}
+}
+
+SideNavigation.define();
+
+export default SideNavigation;