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 icon="group">
+			<ui5-side-navigation-item text="From My Team" icon="employee-approvals"></ui5-side-navigation-item>
+			<ui5-side-navigation-item text="From Other Teams" icon="employee-rejections"></ui5-side-navigation-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-item text="Local"></ui5-side-navigation-item>
+			<ui5-side-navigation-item text="Others"></ui5-side-navigation-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,8 @@ 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 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,33 @@
+<div class="ui5-sn-root">
+    {{#if items.length}}
+        <div
+            class="ui5-sn-content"
+            @ui5-_click="{{handleItemClick}}"
+            @ui5-_forward-focus="{{_focusOtherList}}"
+            @ui5-_focus_next="{{focusNext}}"
+            @ui5-_focus_previous="{{focusPrevious}}"
+        >
+            <div class="ui5-sn-flex-wrapper">
+                <slot></slot>
+            </div>
+            <span class="ui5-sn-middle-focus-helper" tabindex="-1"></span>
+        </div>
+    {{/if}}
+
+    {{#if fixedItems.length}}
+        <div class="ui5-sn-bottom-content">
+            <div class="ui5-sn-bottom-content-border">
+                <span></span>
+            </div>
+            <div
+                class="ui5-sn-flex-wrapper"
+                @ui5-_click="{{handleItemClick}}"
+                @ui5-_return_focus="{{_focusOtherList}}"
+                @ui5-_focus_next="{{focusNext}}"
+                @ui5-_focus_previous="{{focusPrevious}}"
+            >
+                <slot name="fixedItems"></slot>
+            </div>
+        </div>
+    {{/if}}
+</div>
diff --git a/packages/main/src/SideNavigation.js b/packages/main/src/SideNavigation.js
@@ -0,0 +1,230 @@
+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 StandardListItem from "./StandardListItem.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";
+
+/**
+ * @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,
+		},
+
+		_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.items.forEach(item => {
+			item._collapsed = this.collapsed;
+		});
+
+		this.fixedItems.forEach(item => {
+			item._collapsed = this.collapsed;
+		});
+	}
+
+	handleItemClick(event) {
+		const currentItems = Array.from(this.querySelectorAll("ui5-side-navigation-item"));
+
+		currentItems.forEach(item => {
+			item.selected = item === event.target;
+		});
+
+		this.fireSelectionChange(event);
+
+		if (this.collapsed) {
+			this.openPicker(event.target);
+			this._popoverContent = event.target._generatePopoverContent();
+		}
+	}
+
+	fireSelectionChange(event) {
+		const item = (event.detail && event.detail.item && event.detail.item.item) || event.target;
+		const isArrowClicked = event.detail && event.detail.isIconClicked;
+
+		this.fireEvent("selection-change", {
+			item,
+			isArrowClicked,
+		});
+	}
+
+	getMiddleFocusHelper() {
+		return this.getDomRef().querySelector(".ui5-sn-middle-focus-helper");
+	}
+
+	_focusOtherList() {
+		this.getMiddleFocusHelper().focus();
+	}
+
+	focusNext(event) {
+		const eventTarget = event.target;
+		const isFixedItems = eventTarget.slot === "fixedItems";
+		let currentItems = Array.from(this.querySelectorAll(`ui5-side-navigation-item${isFixedItems ? "[slot='fixedItems']" : ":not([slot])"}`));
+
+		if (eventTarget.expandable && eventTarget.expanded) {
+			eventTarget.items[0].focus();
+		} else if (currentItems.indexOf(eventTarget) > -1 && currentItems.indexOf(eventTarget) < currentItems.length - 1) {
+			if (currentItems[currentItems.indexOf(eventTarget) + 1].getClientRects().length === 0) {
+				currentItems = isFixedItems ? this.fixedItems : this.items;
+			}
+			const nextItem = currentItems[currentItems.indexOf(eventTarget) + 1];
+
+			if (nextItem) {
+				nextItem.focus();
+			}
+		}
+	}
+
+	focusPrevious(event) {
+		const eventTarget = event.target;
+		const isFixedItems = eventTarget.slot === "fixedItems";
+		let currentItems = Array.from(this.querySelectorAll(`ui5-side-navigation-item${isFixedItems ? "[slot='fixedItems']" : ":not([slot])"}`));
+
+		if (eventTarget.expandable && eventTarget.expanded) {
+			const _prevItem = currentItems[currentItems.indexOf(eventTarget) - 1];
+
+			if (_prevItem) {
+				_prevItem.focus();
+			}
+		} else if (currentItems.indexOf(eventTarget) > 0) {
+			if (currentItems[currentItems.indexOf(eventTarget) - 1].getClientRects().length === 0) {
+				currentItems = isFixedItems ? this.fixedItems : this.items;
+			}
+
+			currentItems[currentItems.indexOf(eventTarget) - 1].focus();
+		}
+	}
+
+	async getPicker() {
+		return (await this.getStaticAreaItemDomRef()).querySelector("ui5-responsive-popover");
+	}
+
+	async openPicker(opener) {
+		if (!opener.items.length) {
+			return;
+		}
+		const responsivePopover = await this.getPicker();
+
+		responsivePopover.open(opener);
+	}
+
+	async closePicker() {
+		const responsivePopover = await this.getPicker();
+
+		responsivePopover.close();
+	}
+}
+
+SideNavigation.define();
+
+export default SideNavigation;
diff --git a/packages/main/src/SideNavigationItem.hbs b/packages/main/src/SideNavigationItem.hbs
@@ -0,0 +1,27 @@
+<div
+    class="{{classes.root}}"
+    tabindex="0"
+    @mousedown="{{_onmousedown}}"
+    @mouseup="{{_onmouseup}}"
+    @focusin="{{_onfocusin}}"
+    @focusout="{{_onfocusout}}"
+    @keydown="{{_onkeydown}}"
+>
+    {{#if icon}}
+        <ui5-icon name="{{icon}}"></ui5-icon>
+    {{/if}}
+
+    {{#if hasOverflow}}
+        <span class="ui5-sni-bottom-arrow"></span>
+    {{/if}}
+
+    <ui5-title level="H5">{{text}}</ui5-title>
+
+    {{#if expandable}}
+        <ui5-icon name="{{activeIcon}}" id="ui5-sni-expand-icon" class="ui5-sni-expand-icon"></ui5-icon>
+    {{/if}}
+
+</div>
+{{#if showChildren}}
+    <slot></slot>
+{{/if}}