From 776f98aa96db66dbadd73a9edad4930825abe275 Mon Sep 17 00:00:00 2001 From: Filip Siderov Date: Fri, 26 Jun 2020 09:46:22 +0300 Subject: [PATCH 01/29] feat(ui5-side-navigation): initial implementation --- packages/main/bundle.esm.js | 2 + packages/main/src/SideNavigation.hbs | 17 +++ packages/main/src/SideNavigation.js | 76 ++++++++++++ packages/main/src/SideNavigationItem.hbs | 27 +++++ packages/main/src/SideNavigationItem.js | 110 ++++++++++++++++++ packages/main/src/themes/SideNavigation.css | 10 ++ .../main/src/themes/SideNavigationItem.css | 51 ++++++++ packages/main/test/pages/SideNavigation.html | 37 ++++++ 8 files changed, 330 insertions(+) create mode 100644 packages/main/src/SideNavigation.hbs create mode 100644 packages/main/src/SideNavigation.js create mode 100644 packages/main/src/SideNavigationItem.hbs create mode 100644 packages/main/src/SideNavigationItem.js create mode 100644 packages/main/src/themes/SideNavigation.css create mode 100644 packages/main/src/themes/SideNavigationItem.css create mode 100644 packages/main/test/pages/SideNavigation.html diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js index bbf018089e5c..4289c9f3e3ce 100644 --- 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/SideNavigation.hbs b/packages/main/src/SideNavigation.hbs new file mode 100644 index 000000000000..a8b8e17ad3c3 --- /dev/null +++ b/packages/main/src/SideNavigation.hbs @@ -0,0 +1,17 @@ +
+ {{#if items.length}} +
+ + + +
+ {{/if}} + + {{#if bottomItems.length}} +
+ + + +
+ {{/if}} +
\ No newline at end of file diff --git a/packages/main/src/SideNavigation.js b/packages/main/src/SideNavigation.js new file mode 100644 index 000000000000..3ccba95979ee --- /dev/null +++ b/packages/main/src/SideNavigation.js @@ -0,0 +1,76 @@ +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import SideNavigationTemplate from "./generated/templates/SideNavigationTemplate.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 */ { + // + }, + slots: /** @lends sap.ui.webcomponents.main.SideNavigation.prototype */ { + "default": { + propertyName: "items", + type: HTMLElement, + }, + + bottomItems: { + type: HTMLElement, + }, + }, + events: /** @lends sap.ui.webcomponents.main.SideNavigation.prototype */ { + // + }, +}; + +/** + * @class + * + *

Overview

+ * + * + *

Usage

+ * + * For the ui5-side-navigation + *

ES6 Module Import

+ * + * import @ui5/webcomponents/dist/SideNavigation.js"; + * + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.SideNavigation + * @extends UI5Element + * @tagname ui5-side-navigation + * @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 async onDefine() { + + } +} + +SideNavigation.define(); + +export default SideNavigation; diff --git a/packages/main/src/SideNavigationItem.hbs b/packages/main/src/SideNavigationItem.hbs new file mode 100644 index 000000000000..a35c8bbcd14f --- /dev/null +++ b/packages/main/src/SideNavigationItem.hbs @@ -0,0 +1,27 @@ +{{>include "./ListItem.hbs"}} + +{{#*inline "listItemContent"}} +
+ {{#if icon}} +
+ +
+ {{/if}} + + {{text}} + + {{#if expandable}} +
+ +
+ {{/if}} +
+ {{!-- {{#if expanded}} --}} +
+ +
+ {{!-- {{/if}} --}} +{{/inline}} \ No newline at end of file diff --git a/packages/main/src/SideNavigationItem.js b/packages/main/src/SideNavigationItem.js new file mode 100644 index 000000000000..c182754dec3a --- /dev/null +++ b/packages/main/src/SideNavigationItem.js @@ -0,0 +1,110 @@ +import ListItem from "./ListItem.js"; +import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import SideNavigationItemTemplate from "./generated/templates/SideNavigationItemTemplate.lit.js"; + +// Styles +import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js"; + +/** + * @public + */ +const metadata = { + tag: "ui5-side-navigation-item", + properties: /** @lends sap.ui.webcomponents.main.SideNavigationItem.prototype */ { + text: { + type: String, + }, + + icon: { + type: String, + }, + + expandable: { + type: Boolean, + }, + + expanded: { + type: Boolean, + }, + }, + slots: /** @lends sap.ui.webcomponents.main.SideNavigationItem.prototype */ { + "default": { + propertyName: "items", + type: HTMLElement, + }, + }, + events: /** @lends sap.ui.webcomponents.main.SideNavigationItem.prototype */ { + // + }, +}; + +/** + * @class + * + *

Overview

+ * + * + *

Usage

+ * + * For the ui5-side-navigation-item + *

ES6 Module Import

+ * + * import @ui5/webcomponents/dist/SideNavigationItem.js"; + * + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.SideNavigationItem + * @extends ListItem + * @tagname ui5-side-navigation-item + * @public + */ +class SideNavigationItem extends ListItem { + static get metadata() { + return metadata; + } + + static get render() { + return litRender; + } + + static get styles() { + return SideNavigationItemCss; + } + + static get template() { + return SideNavigationItemTemplate; + } + + static async onDefine() { + + } + + toggleExpanded() { + this.expanded = !this.expanded; + } + + get aclas() { + return { + content: { + "ui5-sni-content": true, + "ui5-sni-padding": !this.icon, + }, + children: { + "ui5-sni-children": true, + "ui5-sni-children-shown": this.expanded, + } + }; + } + + get getActiveIcon() { + if (!this.expandable) { + return undefined; + } + + return this.expanded ? "navigation-down-arrow" : "navigation-right-arrow"; + } +} + +SideNavigationItem.define(); + +export default SideNavigationItem; diff --git a/packages/main/src/themes/SideNavigation.css b/packages/main/src/themes/SideNavigation.css new file mode 100644 index 000000000000..e3c7a65171cb --- /dev/null +++ b/packages/main/src/themes/SideNavigation.css @@ -0,0 +1,10 @@ +:host(:not([hidden])) { + display: inline-block; + width: 100%; + height: 100%; + border: 1px solid red; +} + +.ui5-sn-bottom-content { + border-top: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor); +} \ No newline at end of file diff --git a/packages/main/src/themes/SideNavigationItem.css b/packages/main/src/themes/SideNavigationItem.css new file mode 100644 index 000000000000..69241f41b739 --- /dev/null +++ b/packages/main/src/themes/SideNavigationItem.css @@ -0,0 +1,51 @@ +:host(:not([hidden])) { + display: inline-block; + width: 100%; + height: 100%; + border: 1px solid blue; +} + +.ui5-sni-content { + width: 100%; + height: 2.5rem; + box-sizing: border-box; + display: flex; + align-items: center; +} + +.ui5-sni-content:hover { + background: var(--sapList_Hover_Background); + cursor: pointer; +} + +.ui5-sni-padding { + padding-left: .5rem; +} + +ui5-title { + flex-grow: 1; +} + +.ui5-sni-icon { + width: 2.5rem; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.ui5-sni-icon > ui5-icon { + color: var(--sapContent_IconColor); +} + +.ui5-sni-children { + height: 100%; + max-height: 0; + transition: max-height 0.25s ease-in; + overflow: hidden; +} + +.ui5-sni-children-shown { + max-height: 100%; + transition: max-height 0.25s ease-in; +} \ No newline at end of file diff --git a/packages/main/test/pages/SideNavigation.html b/packages/main/test/pages/SideNavigation.html new file mode 100644 index 000000000000..ea49b666e087 --- /dev/null +++ b/packages/main/test/pages/SideNavigation.html @@ -0,0 +1,37 @@ + + + + + + + + SideNavigation + + + + + + + + + + + + + + + + + + + + + + From c70657097ba8b5e594840811f3c38c0b21e8d883 Mon Sep 17 00:00:00 2001 From: Filip Siderov Date: Mon, 29 Jun 2020 18:26:46 +0300 Subject: [PATCH 02/29] implement kbh & collapse/expand behaviour --- .../test/pages/SideNavigationSample.html | 65 ++++++++ packages/main/src/SideNavigation.hbs | 27 +++- packages/main/src/SideNavigation.js | 139 +++++++++++++++++- packages/main/src/SideNavigationItem.hbs | 55 ++++--- packages/main/src/SideNavigationItem.js | 107 +++++++++++++- .../src/SideNavigationItemPopoverContent.hbs | 3 + packages/main/src/themes/SideNavigation.css | 24 ++- .../main/src/themes/SideNavigationItem.css | 75 ++++++++-- packages/main/src/themes/Title.css | 3 +- packages/main/test/pages/SideNavigation.html | 30 +++- 10 files changed, 466 insertions(+), 62 deletions(-) create mode 100644 packages/fiori/test/pages/SideNavigationSample.html create mode 100644 packages/main/src/SideNavigationItemPopoverContent.hbs diff --git a/packages/fiori/test/pages/SideNavigationSample.html b/packages/fiori/test/pages/SideNavigationSample.html new file mode 100644 index 000000000000..a88c653d7477 --- /dev/null +++ b/packages/fiori/test/pages/SideNavigationSample.html @@ -0,0 +1,65 @@ + + + + + + Shell Bar + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/main/src/SideNavigation.hbs b/packages/main/src/SideNavigation.hbs index a8b8e17ad3c3..cd0adaa44102 100644 --- a/packages/main/src/SideNavigation.hbs +++ b/packages/main/src/SideNavigation.hbs @@ -1,17 +1,30 @@
{{#if items.length}} -
- +
+
- +
+
{{/if}} - {{#if bottomItems.length}} + {{#if fixedItems.length}}
- - - +
+ +
{{/if}}
\ No newline at end of file diff --git a/packages/main/src/SideNavigation.js b/packages/main/src/SideNavigation.js index 3ccba95979ee..4382a24f8953 100644 --- a/packages/main/src/SideNavigation.js +++ b/packages/main/src/SideNavigation.js @@ -1,6 +1,8 @@ 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 SideNavigationTemplate from "./generated/templates/SideNavigationTemplate.lit.js"; +import SideNavigationItemPopoverContentTemplate from "./generated/templates/SideNavigationItemPopoverContentTemplate.lit.js"; // Styles import SideNavigationCss from "./generated/themes/SideNavigation.css.js"; @@ -12,20 +14,50 @@ const metadata = { tag: "ui5-side-navigation", managedSlots: true, properties: /** @lends sap.ui.webcomponents.main.SideNavigation.prototype */ { - // + /** + * Defines whether the ui5-side-navigation is expanded or collapsed. + * + * @public + * @type {Boolean} + * @defaultvalue false + */ + collapsed: { + type: Boolean, + }, }, slots: /** @lends sap.ui.webcomponents.main.SideNavigation.prototype */ { + /** + * Defines the items in the ui5-side-navigation. + * + * @public + */ "default": { propertyName: "items", type: HTMLElement, }, - bottomItems: { + /** + * Defines the fixed items in the bottom of the ui5-side-navigation. + * + * @public + */ + 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, + }, + }, }, }; @@ -66,8 +98,109 @@ class SideNavigation extends UI5Element { return SideNavigationTemplate; } + static get staticAreaTemplate() { + return SideNavigationItemPopoverContentTemplate; + } + static async onDefine() { + await Promise.all([ + ResponsivePopover.define(), + ]); + } + + onBeforeRendering() { + this.items.forEach(item => { + item._collapsed = this.collapsed; + + return item; + }); + + this.fixedItems.forEach(item => { + item._collapsed = this.collapsed; + + return item; + }); + } + + handleItemClick(event) { + const currentItems = this.fixedItems.concat(this.items); + + currentItems.map(item => { + item.selected = item === event.target; + + return item; + }); + + this.fireEvent("selectionChange", { + selectedItem: event.target, + }); + + if (this.collapsed) { + this.openPicker(event.target); + } + } + + 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) { + const responsivePopover = await this.getPicker(); + + responsivePopover.open(opener); + } + + async closePicker() { + const responsivePopover = await this.getPicker(); + responsivePopover.close(); } } diff --git a/packages/main/src/SideNavigationItem.hbs b/packages/main/src/SideNavigationItem.hbs index a35c8bbcd14f..e0c2504292a4 100644 --- a/packages/main/src/SideNavigationItem.hbs +++ b/packages/main/src/SideNavigationItem.hbs @@ -1,27 +1,38 @@ -{{>include "./ListItem.hbs"}} +
+ {{#if icon}} +
+ +
+ {{/if}} -{{#*inline "listItemContent"}} -
- {{#if icon}} -
- -
- {{/if}} + {{#if hasOverflow}} + + {{/if}} - {{text}} + {{text}} + + {{#if expandable}} +
+ +
+ {{/if}} - {{#if expandable}} -
- -
+
+{{#unless _collapsed}} +
+ {{#if expanded}} + {{/if}}
- {{!-- {{#if expanded}} --}} -
- -
- {{!-- {{/if}} --}} -{{/inline}} \ No newline at end of file +{{/unless}} \ No newline at end of file diff --git a/packages/main/src/SideNavigationItem.js b/packages/main/src/SideNavigationItem.js index c182754dec3a..8dbca4238a38 100644 --- a/packages/main/src/SideNavigationItem.js +++ b/packages/main/src/SideNavigationItem.js @@ -1,5 +1,17 @@ -import ListItem from "./ListItem.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import { + isTabNext, + isTabPrevious, + isDown, + isLeft, + isUp, + isRight, +} from "@ui5/webcomponents-base/dist/Keys.js"; +import Title from "./Title.js"; +import Icon from "./Icon.js"; +import "@ui5/webcomponents-icons/dist/icons/navigation-down-arrow.js"; +import "@ui5/webcomponents-icons/dist/icons/navigation-right-arrow.js"; import SideNavigationItemTemplate from "./generated/templates/SideNavigationItemTemplate.lit.js"; // Styles @@ -10,6 +22,7 @@ import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js" */ const metadata = { tag: "ui5-side-navigation-item", + managedSlots: true, properties: /** @lends sap.ui.webcomponents.main.SideNavigationItem.prototype */ { text: { type: String, @@ -26,6 +39,34 @@ const metadata = { expanded: { type: Boolean, }, + + /** + * Defines the current active item. + */ + selected: { + type: Boolean, + }, + + /** + * @private + */ + _mouseDown: { + type: Boolean, + }, + + /** + * @private + */ + _focused: { + type: Boolean, + }, + + /** + * @private + */ + _collapsed: { + type: Boolean, + }, }, slots: /** @lends sap.ui.webcomponents.main.SideNavigationItem.prototype */ { "default": { @@ -34,7 +75,12 @@ const metadata = { }, }, events: /** @lends sap.ui.webcomponents.main.SideNavigationItem.prototype */ { - // + /** + * @private + */ + _click: { + + }, }, }; @@ -54,11 +100,12 @@ const metadata = { * @constructor * @author SAP SE * @alias sap.ui.webcomponents.main.SideNavigationItem - * @extends ListItem + * @extends UI5Element * @tagname ui5-side-navigation-item * @public + * @since 1.0.0-rc.8 */ -class SideNavigationItem extends ListItem { +class SideNavigationItem extends UI5Element { static get metadata() { return metadata; } @@ -76,33 +123,77 @@ class SideNavigationItem extends ListItem { } static async onDefine() { + await Promise.all([ + Icon.define(), + Title.define(), + ]); + } + + _onkeydown(event) { + if (isTabNext(event)) { + this.fireEvent("_forward-focus"); + } + if (isTabPrevious(event)) { + this.fireEvent("_return_focus"); + } + + if (isDown(event) || isRight(event)) { + event.preventDefault(); + this.fireEvent("_focus_next"); + } + + if (isUp(event) || isLeft(event)) { + event.preventDefault(); + this.fireEvent("_focus_previous"); + } + } + + _onmousedown(event) { + this._mouseDown = true; + } + + _onmouseup(event) { + this._mouseDown = false; + this.fireEvent("_click"); + } + + _onfocusin(event) { + this._focused = true; + } + + _onfocusout(event) { + this._focused = false; } toggleExpanded() { this.expanded = !this.expanded; } - get aclas() { + get classessni() { return { - content: { + root: { "ui5-sni-content": true, "ui5-sni-padding": !this.icon, }, children: { "ui5-sni-children": true, "ui5-sni-children-shown": this.expanded, - } + }, }; } - get getActiveIcon() { + get activeIcon() { if (!this.expandable) { return undefined; } return this.expanded ? "navigation-down-arrow" : "navigation-right-arrow"; } + + get hasOverflow() { + return this._collapsed && this.icon && this.items.length > 0; + } } SideNavigationItem.define(); diff --git a/packages/main/src/SideNavigationItemPopoverContent.hbs b/packages/main/src/SideNavigationItemPopoverContent.hbs new file mode 100644 index 000000000000..2eba0b50f72b --- /dev/null +++ b/packages/main/src/SideNavigationItemPopoverContent.hbs @@ -0,0 +1,3 @@ + +
Hello popover
+ \ No newline at end of file diff --git a/packages/main/src/themes/SideNavigation.css b/packages/main/src/themes/SideNavigation.css index e3c7a65171cb..9465fe852b01 100644 --- a/packages/main/src/themes/SideNavigation.css +++ b/packages/main/src/themes/SideNavigation.css @@ -1,10 +1,30 @@ :host(:not([hidden])) { display: inline-block; - width: 100%; + width: 250px; height: 100%; - border: 1px solid red; + border-right: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor); +} + +:host([collapsed]) { + width: 2.5rem; +} + +::slotted(ui5-side-navigation-item:not([selected])) { + border-bottom: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor); } .ui5-sn-bottom-content { border-top: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor); +} + +.ui5-sn-root { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.ui5-sn-flex-wrapper { + display: flex; + flex-direction: column; } \ No newline at end of file diff --git a/packages/main/src/themes/SideNavigationItem.css b/packages/main/src/themes/SideNavigationItem.css index 69241f41b739..ad0a38088a99 100644 --- a/packages/main/src/themes/SideNavigationItem.css +++ b/packages/main/src/themes/SideNavigationItem.css @@ -2,20 +2,70 @@ display: inline-block; width: 100%; height: 100%; - border: 1px solid blue; + background: var( --sapList_Background); + cursor: pointer; +} + +:host(:hover) { + background: var(--sapList_Hover_Background); +} + +:host([selected]) { + background: var( --sapList_SelectionBackgroundColor); +} + +:host([selected]) .ui5-sni-content { + border-bottom: 1px solid var(--sapList_SelectionBorderColor); +} + +:host([_mouse-down]) { + background: var(--sapList_Active_Background); + color: var(--sapList_Active_TextColor); +} + +:host([_mouse-down]) .ui5-sni-icon > ui5-icon { + color: inherit; +} + +:host([_focused]) .ui5-sni-content:after { + content: ""; + border: var(--_ui5_listitembase_focus_width) dotted var(--sapContent_FocusColor); + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; +} + +:host([_collapsed]) ui5-title, +:host([_collapsed]) .ui5-sni-arrow { + display: none; +} + +:host([_collapsed]) { + width: 2.5rem; +} + +:host([_collapsed]) .ui5-sni-bottom-arrow::after { + content: ""; + width: 0; + height: 0; + border-left: 0.375rem solid transparent; + border-bottom: .375rem solid var(--sapContent_IconColor); + position: absolute; + right: 0.1875rem; + bottom: 0.125rem; } .ui5-sni-content { width: 100%; height: 2.5rem; + position: relative; box-sizing: border-box; display: flex; align-items: center; -} - -.ui5-sni-content:hover { - background: var(--sapList_Hover_Background); - cursor: pointer; + outline: none; } .ui5-sni-padding { @@ -23,7 +73,9 @@ } ui5-title { + color: inherit; flex-grow: 1; + cursor: pointer; } .ui5-sni-icon { @@ -32,6 +84,7 @@ ui5-title { display: flex; justify-content: center; align-items: center; + color: inherit; } .ui5-sni-icon > ui5-icon { @@ -39,13 +92,11 @@ ui5-title { } .ui5-sni-children { - height: 100%; - max-height: 0; - transition: max-height 0.25s ease-in; - overflow: hidden; + height: 0; + transition: all 0.25s ease-in; } .ui5-sni-children-shown { - max-height: 100%; - transition: max-height 0.25s ease-in; + height: auto; + transition: all 0.25s ease-in; } \ No newline at end of file diff --git a/packages/main/src/themes/Title.css b/packages/main/src/themes/Title.css index 00054292ca8d..81dc03b55bac 100644 --- a/packages/main/src/themes/Title.css +++ b/packages/main/src/themes/Title.css @@ -1,5 +1,6 @@ :host(:not([hidden])) { display: block; + cursor: text; } :host { @@ -24,7 +25,7 @@ -webkit-margin-start: 0; -webkit-margin-end: 0; margin: 0; - cursor: text; + cursor: inherit; } :host([wrap]) .ui5-title-root { diff --git a/packages/main/test/pages/SideNavigation.html b/packages/main/test/pages/SideNavigation.html index ea49b666e087..388d1416f7cc 100644 --- a/packages/main/test/pages/SideNavigation.html +++ b/packages/main/test/pages/SideNavigation.html @@ -13,7 +13,18 @@ + @@ -35,14 +34,14 @@ - - - + + + - - - + + + diff --git a/packages/main/test/samples/SideNavigation.sample.html b/packages/main/test/samples/SideNavigation.sample.html index a120de082a53..1f2f44c86e1e 100644 --- a/packages/main/test/samples/SideNavigation.sample.html +++ b/packages/main/test/samples/SideNavigation.sample.html @@ -16,23 +16,23 @@

Side Navigation in Application

> - - + + - - - + + + - - + + - + - + 

-<ui5-shellbar 
+<ui5-shellbar
 primary-title="UI5 Web Components"
 secondary-title="The Best Run SAP"
 show-co-pilot
@@ -51,14 +51,14 @@ <h3>Side Navigation in Application</h3>
 
 <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 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-item text="Local"></ui5-side-navigation-item>
-		<ui5-side-navigation-item text="Others"></ui5-side-navigation-item>
+		<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>

From 1a19ffc415942ca3fef8488576e22b0af4e72ca2 Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Thu, 9 Jul 2020 18:36:54 +0300
Subject: [PATCH 09/29] move to fiori package, add tests, fix comments

---
 packages/base/src/UI5Element.js               |  20 ++--
 packages/fiori/bundle.esm.js                  |   3 +
 .../{main => fiori}/src/SideNavigation.hbs    |  10 +-
 .../{main => fiori}/src/SideNavigation.js     |  21 ++--
 .../{main => fiori}/src/SideNavigationItem.js |  13 +--
 .../src/SideNavigationItemPopoverContent.hbs  |   0
 .../src/SideNavigationSubItem.js              |   8 +-
 .../src/themes/SideNavigation.css             |   0
 packages/fiori/test/pages/SideNavigation.html |  83 ++++++++++++++
 .../test/pages/SideNavigationSample.html      |  65 -----------
 .../test/samples/SideNavigation.sample.html   |   0
 .../fiori/test/specs/SideNavigation.spec.js   |  44 ++++++++
 packages/main/bundle.esm.js                   |   3 -
 packages/main/src/Icon.hbs                    |   7 +-
 packages/main/src/themes/Button.css           |   3 +-
 packages/main/src/themes/Icon.css             |   9 --
 .../main/src/themes/SideNavigationItem.css    | 104 ------------------
 .../main/src/themes/SideNavigationSubItem.css |   0
 packages/main/test/pages/SideNavigation.html  |  52 ---------
 19 files changed, 167 insertions(+), 278 deletions(-)
 rename packages/{main => fiori}/src/SideNavigation.hbs (90%)
 rename packages/{main => fiori}/src/SideNavigation.js (89%)
 rename packages/{main => fiori}/src/SideNavigationItem.js (85%)
 rename packages/{main => fiori}/src/SideNavigationItemPopoverContent.hbs (100%)
 rename packages/{main => fiori}/src/SideNavigationSubItem.js (81%)
 rename packages/{main => fiori}/src/themes/SideNavigation.css (100%)
 create mode 100644 packages/fiori/test/pages/SideNavigation.html
 delete mode 100644 packages/fiori/test/pages/SideNavigationSample.html
 rename packages/{main => fiori}/test/samples/SideNavigation.sample.html (100%)
 create mode 100644 packages/fiori/test/specs/SideNavigation.spec.js
 delete mode 100644 packages/main/src/themes/SideNavigationItem.css
 delete mode 100644 packages/main/src/themes/SideNavigationSubItem.css
 delete mode 100644 packages/main/test/pages/SideNavigation.html

diff --git a/packages/base/src/UI5Element.js b/packages/base/src/UI5Element.js
index 531bf3fb9412..2024cbbeb009 100644
--- a/packages/base/src/UI5Element.js
+++ b/packages/base/src/UI5Element.js
@@ -109,14 +109,14 @@ class UI5Element extends HTMLElement {
 		const needsShadowDOM = this.constructor._needsShadowDOM();
 		const slotsAreManaged = this.constructor.getMetadata().slotsAreManaged();
 
+		if (slotsAreManaged) {
+			// always register the observer before yielding control to the main thread (await)
+			this._startObservingDOMChildren();
+			await this._processChildren();
+		}
+
 		// Render the Shadow DOM
 		if (needsShadowDOM) {
-			if (slotsAreManaged) {
-				// always register the observer before yielding control to the main thread (await)
-				this._startObservingDOMChildren();
-				await this._processChildren();
-			}
-
 			if (!this.shadowRoot) { // Workaround for Firefox74 bug
 				await Promise.resolve();
 			}
@@ -139,11 +139,11 @@ class UI5Element extends HTMLElement {
 		const needsStaticArea = this.constructor._needsStaticArea();
 		const slotsAreManaged = this.constructor.getMetadata().slotsAreManaged();
 
-		if (needsShadowDOM) {
-			if (slotsAreManaged) {
-				this._stopObservingDOMChildren();
-			}
+		if (slotsAreManaged) {
+			this._stopObservingDOMChildren();
+		}
 
+		if (needsShadowDOM) {
 			RenderScheduler.deregister(this);
 			if (typeof this.onExitDOM === "function") {
 				this.onExitDOM();
diff --git a/packages/fiori/bundle.esm.js b/packages/fiori/bundle.esm.js
index 3c1c7f9df6ff..94bb9c98733a 100644
--- a/packages/fiori/bundle.esm.js
+++ b/packages/fiori/bundle.esm.js
@@ -9,6 +9,9 @@ import "./dist/features/CoPilotAnimation.js";
 // FIORI components
 import ProductSwitch from "./dist/ProductSwitch.js";
 import ProductSwitchItem from "./dist/ProductSwitchItem.js";
+import SideNavigation from "./dist/SideNavigation.js";
+import SideNavigationItem from "./dist/SideNavigationItem.js";
+import SideNavigationSubItem from "./dist/SideNavigationSubItem.js";
 import ShellBar from "./dist/ShellBar.js";
 import ShellBarItem from "./dist/ShellBarItem.js";
 import UploadCollection from "./dist/UploadCollection.js";
diff --git a/packages/main/src/SideNavigation.hbs b/packages/fiori/src/SideNavigation.hbs
similarity index 90%
rename from packages/main/src/SideNavigation.hbs
rename to packages/fiori/src/SideNavigation.hbs
index 31c43bc78e3c..c23191bb2a45 100644
--- a/packages/main/src/SideNavigation.hbs
+++ b/packages/fiori/src/SideNavigation.hbs
@@ -3,7 +3,7 @@
         <ui5-tree
             id="ui5-sn-items-tree"
             mode="SingleSelect"
-            ?_show-selected-on-sub-items="true"
+            _show-selected-on-sub-items
             @ui5-item-click="{{handleItemClick}}"
         >
             {{#each _currentItems}}
@@ -11,7 +11,7 @@
                     icon="{{this.treeItem.icon}}"
                     level="{{this.treeItem.level}}"
                     .treeItem="{{this.treeItem}}"
-                    show-toggle-button-end="true"
+                    show-toggle-button-end
                     text="{{this.treeItem.text}}"
                     ?has-children="{{this.treeItem.expandable}}"
                     ?expanded="{{this.treeItem.expanded}}"
@@ -24,7 +24,7 @@
                                 <ui5-tree-item
                                     level="{{this.level}}"
                                     .treeItem="{{this}}"
-                                    show-toggle-button-end="true"
+                                    show-toggle-button-end
                                     text="{{this.text}}"
                                     index="{{this.index}}"
                                     ?has-children="{{this.expandable}}"
@@ -47,7 +47,7 @@
             <ui5-tree
                 id="ui5-sn-fixed-items-tree"
                 mode="SingleSelect"
-                ?_show-selected-on-sub-items="true"
+                _show-selected-on-sub-items
                 @ui5-item-click="{{handleItemClick}}"
             >
                 {{#each _currentFixedItems}}
@@ -55,7 +55,7 @@
                         icon="{{this.treeItem.icon}}"
                         level="{{this.treeItem.level}}"
                         .treeItem="{{this.treeItem}}"
-                        show-toggle-button-end="true"
+                        show-toggle-button-end
                         text="{{this.treeItem.text}}"
                         index="{{this.index}}"
                         ?has-children="{{this.treeItem.expandable}}"
diff --git a/packages/main/src/SideNavigation.js b/packages/fiori/src/SideNavigation.js
similarity index 89%
rename from packages/main/src/SideNavigation.js
rename to packages/fiori/src/SideNavigation.js
index c0f56fcdffea..7921f63f65eb 100644
--- a/packages/main/src/SideNavigation.js
+++ b/packages/fiori/src/SideNavigation.js
@@ -1,13 +1,12 @@
 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 ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import Tree from "@ui5/webcomponents/dist/Tree.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
@@ -15,7 +14,7 @@ import StandardListItem from "./StandardListItem.js";
 const metadata = {
 	tag: "ui5-side-navigation",
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.SideNavigation.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.fiori.SideNavigation.prototype */ {
 		/**
 		 * Defines whether the <code>ui5-side-navigation</code> is expanded or collapsed.
 		 *
@@ -35,7 +34,7 @@ const metadata = {
 			multiple: true,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.SideNavigation.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.fiori.SideNavigation.prototype */ {
 		/**
 		 * Defines the items in the <code>ui5-side-navigation</code>.
 		 *
@@ -57,11 +56,11 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.SideNavigation.prototype */ {
+	events: /** @lends sap.ui.webcomponents.fiori.SideNavigation.prototype */ {
 		/**
 		 * Fired when the selection has changed via user interaction
 		 *
-		 * @event sap.ui.webcomponents.main.SideNavigation#selection-change
+		 * @event sap.ui.webcomponents.fiori.SideNavigation#selection-change
 		 * @param {HTMLElement} item the clicked item.
 		 * @public
 		 */
@@ -90,7 +89,7 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.SideNavigation
+ * @alias sap.ui.webcomponents.fiori.SideNavigation
  * @extends UI5Element
  * @tagname ui5-side-navigation
  * @since 1.0.0-rc.8
@@ -120,9 +119,8 @@ class SideNavigation extends UI5Element {
 
 	static async onDefine() {
 		await Promise.all([
+			Tree.define(),
 			ResponsivePopover.define(),
-			List.define(),
-			StandardListItem.define(),
 		]);
 	}
 
@@ -154,11 +152,12 @@ class SideNavigation extends UI5Element {
 		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);
+		} else {
+			this.fireSelectionChange(event);
 		}
 	}
 
diff --git a/packages/main/src/SideNavigationItem.js b/packages/fiori/src/SideNavigationItem.js
similarity index 85%
rename from packages/main/src/SideNavigationItem.js
rename to packages/fiori/src/SideNavigationItem.js
index ebb6bf05ab56..f774c6e2eb83 100644
--- a/packages/main/src/SideNavigationItem.js
+++ b/packages/fiori/src/SideNavigationItem.js
@@ -1,4 +1,3 @@
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 
@@ -8,7 +7,7 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 const metadata = {
 	tag: "ui5-side-navigation-item",
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.SideNavigationItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.fiori.SideNavigationItem.prototype */ {
 		/**
 		 * Defines the text of the item.
 		 *
@@ -73,7 +72,7 @@ const metadata = {
 			defaultValue: 1,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.SideNavigationItem.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.fiori.SideNavigationItem.prototype */ {
 		/**
 		 * If you wish to nest menus, you can pass inner menu items to the default slot.
 		 *
@@ -86,7 +85,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.SideNavigationItem.prototype */ {
+	events: /** @lends sap.ui.webcomponents.fiori.SideNavigationItem.prototype */ {
 		//
 	},
 };
@@ -107,7 +106,7 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.SideNavigationItem
+ * @alias sap.ui.webcomponents.fiori.SideNavigationItem
  * @extends UI5Element
  * @tagname ui5-side-navigation-item
  * @public
@@ -117,10 +116,6 @@ class SideNavigationItem extends UI5Element {
 	static get metadata() {
 		return metadata;
 	}
-
-	static get render() {
-		return litRender;
-	}
 }
 
 SideNavigationItem.define();
diff --git a/packages/main/src/SideNavigationItemPopoverContent.hbs b/packages/fiori/src/SideNavigationItemPopoverContent.hbs
similarity index 100%
rename from packages/main/src/SideNavigationItemPopoverContent.hbs
rename to packages/fiori/src/SideNavigationItemPopoverContent.hbs
diff --git a/packages/main/src/SideNavigationSubItem.js b/packages/fiori/src/SideNavigationSubItem.js
similarity index 81%
rename from packages/main/src/SideNavigationSubItem.js
rename to packages/fiori/src/SideNavigationSubItem.js
index 514aa8bf277f..ca9fdd0f4892 100644
--- a/packages/main/src/SideNavigationSubItem.js
+++ b/packages/fiori/src/SideNavigationSubItem.js
@@ -7,7 +7,7 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
  */
 const metadata = {
 	tag: "ui5-side-navigation-sub-item",
-	properties: /** @lends sap.ui.webcomponents.main.SideNavigationSubItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.fiori.SideNavigationSubItem.prototype */ {
 		/**
 		 * Defines the text of the item.
 		 *
@@ -27,10 +27,10 @@ const metadata = {
 			defaultValue: 2,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.SideNavigationSubItem.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.fiori.SideNavigationSubItem.prototype */ {
 		//
 	},
-	events: /** @lends sap.ui.webcomponents.main.SideNavigationSubItem.prototype */ {
+	events: /** @lends sap.ui.webcomponents.fiori.SideNavigationSubItem.prototype */ {
 		//
 	},
 };
@@ -52,7 +52,7 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.SideNavigationSubItem
+ * @alias sap.ui.webcomponents.fiori.SideNavigationSubItem
  * @extends UI5Element
  * @tagname ui5-side-navigation-sub-item
  * @public
diff --git a/packages/main/src/themes/SideNavigation.css b/packages/fiori/src/themes/SideNavigation.css
similarity index 100%
rename from packages/main/src/themes/SideNavigation.css
rename to packages/fiori/src/themes/SideNavigation.css
diff --git a/packages/fiori/test/pages/SideNavigation.html b/packages/fiori/test/pages/SideNavigation.html
new file mode 100644
index 000000000000..204fc04f0939
--- /dev/null
+++ b/packages/fiori/test/pages/SideNavigation.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Side Navigation</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;
+		}
+
+		.content {
+			height: 100%;
+		}
+	</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>
+
+	<div class="content">
+		<ui5-side-navigation id="sn1">
+			<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>
+
+		<ui5-input id="counter" value="0"></ui5-input>
+	</div>
+	
+
+	
+
+	<script>
+		var sideNavigation = document.querySelector("ui5-side-navigation"),
+			input = document.querySelector("#counter"),
+			counter = 0;
+		document.querySelector("#startButton").addEventListener("click", function(event) {
+			sideNavigation.collapsed = !sideNavigation.collapsed;
+		});
+
+		sideNavigation.addEventListener("ui5-selection-change", function() {
+			input.value = ++counter;
+		});
+
+	</script>
+</body>
+</html>
diff --git a/packages/fiori/test/pages/SideNavigationSample.html b/packages/fiori/test/pages/SideNavigationSample.html
deleted file mode 100644
index 86e417a125c1..000000000000
--- a/packages/fiori/test/pages/SideNavigationSample.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!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/test/samples/SideNavigation.sample.html b/packages/fiori/test/samples/SideNavigation.sample.html
similarity index 100%
rename from packages/main/test/samples/SideNavigation.sample.html
rename to packages/fiori/test/samples/SideNavigation.sample.html
diff --git a/packages/fiori/test/specs/SideNavigation.spec.js b/packages/fiori/test/specs/SideNavigation.spec.js
new file mode 100644
index 000000000000..d204c3ed860f
--- /dev/null
+++ b/packages/fiori/test/specs/SideNavigation.spec.js
@@ -0,0 +1,44 @@
+
+const assert = require("chai").assert;
+
+describe("Component Behavior", () => {
+	browser.url("http://localhost:8081/test-resources/pages/SideNavigation.html");
+
+	describe("Main functionality", () => {
+		it("Tests selection-change event", () => {
+			const input = browser.$("#counter");
+			const sideNavigation = browser.$("ui5-side-navigation");
+			let items = sideNavigation.shadow$("ui5-tree").shadow$("ui5-list").$$("ui5-li-tree");
+			const fixedItems = sideNavigation.shadow$$("ui5-tree")[1].shadow$("ui5-list").$$("ui5-li-tree");
+
+			items[0].click();
+			items[3].click();
+
+			assert.strictEqual(input.getProperty("value"), "2", "Event is fired");
+
+			fixedItems[0].click();
+
+			assert.strictEqual(input.getProperty("value"), "3", "Event is fired");
+
+			sideNavigation.setProperty("collapsed", "true");
+			items = sideNavigation.shadow$("ui5-tree").shadow$("ui5-list").$$("ui5-li-tree");
+
+			items[0].click();
+
+			assert.strictEqual(input.getProperty("value"), "4", "Event is fired");
+
+			items[1].click();
+
+			assert.strictEqual(input.getProperty("value"), "5", "Event is fired");
+
+			const staticAreaItemClassName = browser.getStaticAreaItemClassName("#sn1");
+			const popover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+			items = popover.$("ui5-list").$$("ui5-li");
+
+			items[0].click();
+			items[1].click();
+
+			assert.strictEqual(input.getProperty("value"), "7", "Event is fired");
+		})
+	});
+});
\ No newline at end of file
diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js
index ac3497466346..bbf018089e5c 100644
--- a/packages/main/bundle.esm.js
+++ b/packages/main/bundle.esm.js
@@ -54,9 +54,6 @@ 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
index 64ce025ed2a8..f91cd8feb22e 100644
--- a/packages/main/src/Icon.hbs
+++ b/packages/main/src/Icon.hbs
@@ -1,5 +1,4 @@
-<div class="ui5-icon-svg-wrapper">
-	<svg
+<svg
 	class="ui5-icon-root"
 	tabindex="{{tabIndex}}"
 	dir="{{_dir}}"
@@ -22,6 +21,4 @@
 	<g role="presentation">
 		<path transform="translate(0, 512) scale(1, -1)" d="{{pathData}}"/>
 	</g>
-</svg>
-
-</div>
\ No newline at end of file
+</svg>
\ No newline at end of file
diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css
index 81e60f798daf..ba870d67f592 100644
--- a/packages/main/src/themes/Button.css
+++ b/packages/main/src/themes/Button.css
@@ -65,7 +65,8 @@
 
 .ui5-button-icon {
 	font-size: var(--_ui5_button_icon_font_size);
-	height: 100%;
+	height: 0;
+	top: -.5rem;
 	position: relative;
 	color: inherit;
 	flex-shrink: 0;
diff --git a/packages/main/src/themes/Icon.css b/packages/main/src/themes/Icon.css
index 2102a420761f..862b43b5710d 100644
--- a/packages/main/src/themes/Icon.css
+++ b/packages/main/src/themes/Icon.css
@@ -28,17 +28,8 @@
 }
 
 .ui5-icon-root {
-    width: 1rem;
 	display:flex;
 	transform: scale(1, -1);
 	transform-origin: center;
 	outline: none;
-}
-
-.ui5-icon-svg-wrapper {
-	width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/SideNavigationItem.css b/packages/main/src/themes/SideNavigationItem.css
deleted file mode 100644
index 32bbf831a811..000000000000
--- a/packages/main/src/themes/SideNavigationItem.css
+++ /dev/null
@@ -1,104 +0,0 @@
-:host(:not([hidden])) {
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    background: var(--sapList_Background);
-    cursor: pointer;
-}
-
-:host([selected]) .ui5-sni-content {
-    background: var(--sapList_SelectionBackgroundColor);
-}
-
-:host([selected]) .ui5-sni-content {
-    border-bottom: 1px solid var(--sapList_SelectionBorderColor);
-}
-
-:host(:not([selected])) {
-    border-bottom: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);
-}
-
-:host([_mouse-down]) .ui5-sni-content {
-    background: var(--sapList_Active_Background);
-    color: var(--sapList_Active_TextColor);
-}
-
-:host([_mouse-down]) ui5-icon {
-    color: inherit;
-}
-
-:host([_collapsed]) ui5-icon.ui5-sni-expand-icon {
-    display: none;
-}
-
-:host([_collapsed]) ui5-icon:not(.ui5-sni-expand-icon) {
-    width: 100%;
-    padding: 0;
-}
-
-:host([_collapsed]) {
-    border-bottom: none;
-}
-
-:host([_focused]) .ui5-sni-content:after {
-    content: "";
-	border: var(--_ui5_listitembase_focus_width) dotted var(--sapContent_FocusColor);
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	pointer-events: none;
-}
-
-:host([_collapsed]) ui5-title,
-:host([_collapsed]) .ui5-sni-arrow {
-    display: none;
-}
-
-:host([_collapsed]) {
-    width: 100%;
-}
-
-:host([_collapsed]) .ui5-sni-bottom-arrow::after {
-    content: "";
-    width: 0;
-    height: 0;
-    border-left: 0.375rem solid transparent;
-    border-bottom: .375rem solid var(--sapContent_IconColor);
-    position: absolute;
-    right: 0.1875rem;
-    bottom: 0.125rem;
-}
-
-.ui5-sni-content {
-    width: 100%;
-    height: var(--ui5_side_navigation_item_height);
-    position: relative;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    outline: none;
-    user-select: none;
-}
-
-.ui5-sni-content:hover {
-    background: var(--sapList_Hover_Background);
-}
-
-.ui5-sni-padding {
-    padding-left: .5rem;
-}
-
-ui5-title {
-    text-shadow: none;
-    color: inherit;
-    flex-grow: 1;
-    cursor: pointer;
-}
-
-ui5-icon {
-    height: 100%;
-    padding: 0 1.5rem;
-    color: var(--sapContent_IconColor);
-}
\ No newline at end of file
diff --git a/packages/main/src/themes/SideNavigationSubItem.css b/packages/main/src/themes/SideNavigationSubItem.css
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/packages/main/test/pages/SideNavigation.html b/packages/main/test/pages/SideNavigation.html
deleted file mode 100644
index 2c2f7068e2d9..000000000000
--- a/packages/main/test/pages/SideNavigation.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<meta charset="utf-8">
-
-	<title>SideNavigation</title>
-	<script>
-		delete Document.prototype.adoptedStyleSheets
-	</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 {
-			display: flex;
-    		flex-direction: column;
-		}
-
-		ui5-side-navigation {
-			height: 100vh;
-		}
-	</style>
-</head>
-
-<body style="background-color: var(--sapBackgroundColor);">
-	<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>
-
-</body>
-</html>

From 3c9dc6d0dddc25bef3e4cf52ec877091d1bcccf4 Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Fri, 10 Jul 2020 12:07:18 +0300
Subject: [PATCH 10/29] fix comments and styling issues

---
 packages/fiori/src/SideNavigation.hbs         |  2 --
 packages/fiori/src/SideNavigationItem.js      |  1 +
 packages/fiori/src/themes/SideNavigation.css  |  1 -
 .../fiori/test/specs/SideNavigation.spec.js   |  6 +++---
 packages/main/src/Tree.hbs                    |  1 -
 packages/main/src/TreeItem.js                 |  8 -------
 packages/main/src/TreeListItem.js             |  8 -------
 packages/main/src/themes/TreeListItem.css     | 21 +++++++++++++------
 8 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/packages/fiori/src/SideNavigation.hbs b/packages/fiori/src/SideNavigation.hbs
index c23191bb2a45..d9fffb745c04 100644
--- a/packages/fiori/src/SideNavigation.hbs
+++ b/packages/fiori/src/SideNavigation.hbs
@@ -3,7 +3,6 @@
         <ui5-tree
             id="ui5-sn-items-tree"
             mode="SingleSelect"
-            _show-selected-on-sub-items
             @ui5-item-click="{{handleItemClick}}"
         >
             {{#each _currentItems}}
@@ -47,7 +46,6 @@
             <ui5-tree
                 id="ui5-sn-fixed-items-tree"
                 mode="SingleSelect"
-                _show-selected-on-sub-items
                 @ui5-item-click="{{handleItemClick}}"
             >
                 {{#each _currentFixedItems}}
diff --git a/packages/fiori/src/SideNavigationItem.js b/packages/fiori/src/SideNavigationItem.js
index f774c6e2eb83..8457252d45f1 100644
--- a/packages/fiori/src/SideNavigationItem.js
+++ b/packages/fiori/src/SideNavigationItem.js
@@ -35,6 +35,7 @@ const metadata = {
 		 * Defines whether the item is expandable. In order to use this property you need to pass another <code>ui5-side-navigation-item</code> as a default slot.
 		 * @public
 		 * @type {boolean}
+		 * @defaultvalue false
 		 */
 		expandable: {
 			type: Boolean,
diff --git a/packages/fiori/src/themes/SideNavigation.css b/packages/fiori/src/themes/SideNavigation.css
index 81bcbf88cc25..4759f8815a94 100644
--- a/packages/fiori/src/themes/SideNavigation.css
+++ b/packages/fiori/src/themes/SideNavigation.css
@@ -5,7 +5,6 @@
     border-right: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);
     transition: width .25s;
     --_ui5-tree-toggle-box-width: 1rem;
-    --_ui5_tree_sub_item_background: var(--sapList_Background);
 }
 
 :host([collapsed]) {
diff --git a/packages/fiori/test/specs/SideNavigation.spec.js b/packages/fiori/test/specs/SideNavigation.spec.js
index d204c3ed860f..e1a4a26d08cb 100644
--- a/packages/fiori/test/specs/SideNavigation.spec.js
+++ b/packages/fiori/test/specs/SideNavigation.spec.js
@@ -20,7 +20,7 @@ describe("Component Behavior", () => {
 
 			assert.strictEqual(input.getProperty("value"), "3", "Event is fired");
 
-			sideNavigation.setProperty("collapsed", "true");
+			sideNavigation.setAttribute("collapsed", "true");
 			items = sideNavigation.shadow$("ui5-tree").shadow$("ui5-list").$$("ui5-li-tree");
 
 			items[0].click();
@@ -29,7 +29,7 @@ describe("Component Behavior", () => {
 
 			items[1].click();
 
-			assert.strictEqual(input.getProperty("value"), "5", "Event is fired");
+			assert.strictEqual(input.getProperty("value"), "4", "Event is not fired");
 
 			const staticAreaItemClassName = browser.getStaticAreaItemClassName("#sn1");
 			const popover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
@@ -38,7 +38,7 @@ describe("Component Behavior", () => {
 			items[0].click();
 			items[1].click();
 
-			assert.strictEqual(input.getProperty("value"), "7", "Event is fired");
+			assert.strictEqual(input.getProperty("value"), "6", "Event is fired");
 		})
 	});
 });
\ No newline at end of file
diff --git a/packages/main/src/Tree.hbs b/packages/main/src/Tree.hbs
index 9d3993f3a67b..f2965627e65e 100644
--- a/packages/main/src/Tree.hbs
+++ b/packages/main/src/Tree.hbs
@@ -15,7 +15,6 @@
             level="{{this.level}}"
             icon="{{this.treeItem.icon}}"
             ?show-toggle-button-end="{{this.treeItem.showToggleButtonEnd}}"
-            ?_show-selected-on-sub-items="{{this.treeItem._showSelectedOnSubItems}}"
             ?expandable="{{this.treeItem.hasChildren}}"
             ?_collapsed="{{this.treeItem._collapsed}}"
             .treeItem="{{this.treeItem}}"
diff --git a/packages/main/src/TreeItem.js b/packages/main/src/TreeItem.js
index 2eadb540dd10..ce40b34958ae 100644
--- a/packages/main/src/TreeItem.js
+++ b/packages/main/src/TreeItem.js
@@ -91,14 +91,6 @@ const metadata = {
 		_collapsed: {
 			type: Boolean,
 		},
-
-		/**
-		 * @private
-		 * @since 1.0.0-rc.8
-		 */
-		_showSelectedOnSubItems: {
-			type: Boolean,
-		},
 	},
 	slots: /** @lends sap.ui.webcomponents.main.TreeItem.prototype */ {
 
diff --git a/packages/main/src/TreeListItem.js b/packages/main/src/TreeListItem.js
index f92bf266c9ef..63f350877fd2 100644
--- a/packages/main/src/TreeListItem.js
+++ b/packages/main/src/TreeListItem.js
@@ -86,14 +86,6 @@ const metadata = {
 			type: Boolean,
 		},
 
-		/**
-		 * @private
-		 * @since 1.0.0-rc.8
-		 */
-		_showSelectedOnSubItems: {
-			type: Boolean,
-		},
-
 	},
 	slots: /** @lends sap.ui.webcomponents.main.TreeListItem.prototype */ {
 		/**
diff --git a/packages/main/src/themes/TreeListItem.css b/packages/main/src/themes/TreeListItem.css
index cb71ed8d7e31..5b573156117b 100644
--- a/packages/main/src/themes/TreeListItem.css
+++ b/packages/main/src/themes/TreeListItem.css
@@ -2,7 +2,6 @@
 	display: block;
     cursor: pointer;
     position: relative;
-    --_ui5_tree_sub_item_background: var(--sapList_AlternatingBackground);
 }
 
 :host([_collapsed]:not([hidden])) {
@@ -36,16 +35,26 @@
     padding-left: 0;
 }
 
-:host([selected][has-border]:not([level="1"])) {
+:host([selected][has-border]:not([level="1"])),
+:host(:not([level="1"])) {
     border-bottom: none;
 }
 
-:host([show-toggle-button-end][selected]:not([level="1"])) {
-	border-bottom: var(--ui5-listitem-selected-border-bottom);
+:host([show-toggle-button-end][selected]:not([level="1"])){
+    border-bottom: var(--ui5-listitem-selected-border-bottom);
 }
 
-:host(:not([level="1"][_show-selected-on-sub-items])) .ui5-li-root-tree {
-    background: var(--_ui5_tree_sub_item_background);
+:host([show-toggle-button-end]:not([selected])) .ui5-li-root-tree:hover {
+    background: var(--sapList_Hover_Background);
+    cursor: pointer;
+}
+
+:host(:not([level="1"])) .ui5-li-root-tree {
+    background: var(--sapList_AlternatingBackground);
+}
+
+:host([show-toggle-button-end][selected]:not([level="1"])) .ui5-li-root-tree {
+    background: var(--sapList_SelectionBackgroundColor);
 }
 
 .ui5-li-tree-toggle-box {

From a64bcf135f0f13cc2d8b761586f42df5227b36bb Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Fri, 10 Jul 2020 13:47:18 +0300
Subject: [PATCH 11/29] fix background

---
 packages/main/src/themes/TreeListItem.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/main/src/themes/TreeListItem.css b/packages/main/src/themes/TreeListItem.css
index 5b573156117b..b79bc35225ff 100644
--- a/packages/main/src/themes/TreeListItem.css
+++ b/packages/main/src/themes/TreeListItem.css
@@ -53,6 +53,10 @@
     background: var(--sapList_AlternatingBackground);
 }
 
+:host([show-toggle-button-end]:not([level="1"])) .ui5-li-root-tree {
+    background: var(--ui5-listitem-background-color);
+}
+
 :host([show-toggle-button-end][selected]:not([level="1"])) .ui5-li-root-tree {
     background: var(--sapList_SelectionBackgroundColor);
 }

From 3ad734ac5738d695712ec6619e5a02aa55759086 Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladislav.tasev@sap.com>
Date: Wed, 15 Jul 2020 16:17:50 +0300
Subject: [PATCH 12/29] simplification and disambiguation

---
 packages/fiori/src/SideNavigation.hbs         | 77 +++++++++----------
 packages/fiori/src/SideNavigation.js          | 63 ++++-----------
 .../src/SideNavigationItemPopoverContent.hbs  | 22 +++---
 3 files changed, 63 insertions(+), 99 deletions(-)

diff --git a/packages/fiori/src/SideNavigation.hbs b/packages/fiori/src/SideNavigation.hbs
index d9fffb745c04..5e144b0627e8 100644
--- a/packages/fiori/src/SideNavigation.hbs
+++ b/packages/fiori/src/SideNavigation.hbs
@@ -3,42 +3,40 @@
         <ui5-tree
             id="ui5-sn-items-tree"
             mode="SingleSelect"
-            @ui5-item-click="{{handleItemClick}}"
+            @ui5-item-click="{{handleTreeItemClick}}"
         >
-            {{#each _currentItems}}
+            {{#each items}}
                 <ui5-tree-item
-                    icon="{{this.treeItem.icon}}"
-                    level="{{this.treeItem.level}}"
-                    .treeItem="{{this.treeItem}}"
+                    icon="{{this.icon}}"
+                    level="{{this.level}}"
+                    .associatedItem="{{this}}"
                     show-toggle-button-end
-                    text="{{this.treeItem.text}}"
-                    ?has-children="{{this.treeItem.expandable}}"
-                    ?expanded="{{this.treeItem.expanded}}"
-                    ?_collapsed="{{this.collapsed}}"
-                    ?selected="{{this.treeItem.selected}}"
+                    text="{{this.text}}"
+                    ?has-children="{{this.expandable}}"
+                    ?expanded="{{this.expanded}}"
+                    ?_collapsed="{{../collapsed}}"
+                    ?selected="{{this.selected}}"
                 >
-                    {{#if ../_shoudlShowSubItems}}
-                        {{#if subItems}}
-                            {{#each subItems}}
-                                <ui5-tree-item
-                                    level="{{this.level}}"
-                                    .treeItem="{{this}}"
-                                    show-toggle-button-end
-                                    text="{{this.text}}"
-                                    index="{{this.index}}"
-                                    ?has-children="{{this.expandable}}"
-                                    ?selected="{{this.selected}}"
-                                >
-                                </ui5-tree-item>
-                            {{/each}}
-                        {{/if}}
-                    {{/if}}
+                    {{#unless ../collapsed}}
+                        {{#each this.items}}
+                            <ui5-tree-item
+                                level="{{this.level}}"
+                                .associatedItem="{{this}}"
+                                show-toggle-button-end
+                                text="{{this.text}}"
+                                index="{{this.index}}"
+                                ?has-children="{{this.expandable}}"
+                                ?selected="{{this.selected}}"
+                            >
+                            </ui5-tree-item>
+                        {{/each}}
+                    {{/unless}}
                 </ui5-tree-item>
             {{/each}}
         </ui5-tree>
     {{/if}}
 
-    {{#if _currentFixedItems.length}}
+    {{#if fixedItems.length}}
        <div>
             <div class="ui5-sn-bottom-content-border">
                 <span></span>
@@ -46,22 +44,21 @@
             <ui5-tree
                 id="ui5-sn-fixed-items-tree"
                 mode="SingleSelect"
-                @ui5-item-click="{{handleItemClick}}"
+                @ui5-item-click="{{handleTreeItemClick}}"
             >
-                {{#each _currentFixedItems}}
-                        <ui5-tree-item
-                        icon="{{this.treeItem.icon}}"
-                        level="{{this.treeItem.level}}"
-                        .treeItem="{{this.treeItem}}"
+                {{#each fixedItems}}
+                    <ui5-tree-item
+                        icon="{{this.icon}}"
+                        level="{{this.level}}"
+                        .associatedItem="{{this}}"
                         show-toggle-button-end
-                        text="{{this.treeItem.text}}"
+                        text="{{this.text}}"
                         index="{{this.index}}"
-                        ?has-children="{{this.treeItem.expandable}}"
-                        ?expanded="{{this.treeItem.expanded}}"
-                        ?_collapsed="{{this.collapsed}}"
-                        ?selected="{{this.treeItem.selected}}"
-                    >
-                    </ui5-tree-item>
+                        ?has-children="{{this.expandable}}"
+                        ?expanded="{{this.expanded}}"
+                        ?_collapsed="{{../collapsed}}"
+                        ?selected="{{this.selected}}"
+                    ></ui5-tree-item>
                 {{/each}}
             </ui5-tree>
        </div>
diff --git a/packages/fiori/src/SideNavigation.js b/packages/fiori/src/SideNavigation.js
index 7921f63f65eb..74f8d643e6ae 100644
--- a/packages/fiori/src/SideNavigation.js
+++ b/packages/fiori/src/SideNavigation.js
@@ -124,47 +124,30 @@ class SideNavigation extends UI5Element {
 		]);
 	}
 
-	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;
-	}
+	handleTreeItemClick(event) {
+		const treeItem = event.detail.item;
+		const item = treeItem.associatedItem;
 
-	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();
 
-
-		if (this.collapsed && item.treeItem.items.length) {
-			this._popoverContent = this._generatePopoverContent(event.detail.item);
-			this.openPicker(currentTree._getRealItemDomRef(item), item);
+		if (this.collapsed && item.items.length) {
+			this._popoverContent = [item, ...item.items];
+			this.openPicker(currentTree._getRealItemDomRef(treeItem), treeItem);
 		} else {
-			this.fireSelectionChange(event);
+			this.fireSelectionChange(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
+	handleListItemClick(event) {
+		const listItem = event.detail.item;
+		const item = listItem.associatedItem;
 
+		this.fireSelectionChange(item);
+	}
+
+	fireSelectionChange(item) {
 		this.fireEvent("selection-change", { item });
 	}
 
@@ -178,20 +161,6 @@ class SideNavigation extends UI5Element {
 		});
 	}
 
-	_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");
 	}
@@ -217,10 +186,6 @@ class SideNavigation extends UI5Element {
 	get _fixedItemsTree() {
 		return this.getDomRef().querySelector("#ui5-sn-fixed-items-tree");
 	}
-
-	get _shoudlShowSubItems() {
-		return !this.collapsed;
-	}
 }
 
 SideNavigation.define();
diff --git a/packages/fiori/src/SideNavigationItemPopoverContent.hbs b/packages/fiori/src/SideNavigationItemPopoverContent.hbs
index 06d08d3ebc6a..45471f0a622f 100644
--- a/packages/fiori/src/SideNavigationItemPopoverContent.hbs
+++ b/packages/fiori/src/SideNavigationItemPopoverContent.hbs
@@ -1,13 +1,15 @@
 <ui5-responsive-popover
-vertical-align="Top">
+	vertical-align="Top"
+>
     <ui5-list
-    @ui5-item-click="{{fireSelectionChange}}">
-        {{#if _popoverContent}}
-            {{#each _popoverContent}}
-                <ui5-li
-                .item="{{this.item}}"
-                >{{this.text}}</ui5-li>
-            {{/each}}
-        {{/if}}
+        @ui5-item-click="{{handleListItemClick}}"
+    >
+        {{#each _popoverContent}}
+            <ui5-li
+                .assiciatedItem="{{this}}"
+            >
+	            {{this.text}}
+            </ui5-li>
+        {{/each}}
     </ui5-list>
-</ui5-responsive-popover>
\ No newline at end of file
+</ui5-responsive-popover>

From d55bb10425503df605ec1222653c0076f11081ab Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladislav.tasev@sap.com>
Date: Wed, 15 Jul 2020 16:26:45 +0300
Subject: [PATCH 13/29] remove unnecessary parameters and functions

---
 packages/fiori/src/SideNavigation.js | 20 +-------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

diff --git a/packages/fiori/src/SideNavigation.js b/packages/fiori/src/SideNavigation.js
index 74f8d643e6ae..5c0da80c9904 100644
--- a/packages/fiori/src/SideNavigation.js
+++ b/packages/fiori/src/SideNavigation.js
@@ -134,7 +134,7 @@ class SideNavigation extends UI5Element {
 
 		if (this.collapsed && item.items.length) {
 			this._popoverContent = [item, ...item.items];
-			this.openPicker(currentTree._getRealItemDomRef(treeItem), treeItem);
+			this.openPicker(currentTree._getRealItemDomRef(treeItem));
 		} else {
 			this.fireSelectionChange(item);
 		}
@@ -151,24 +151,6 @@ class SideNavigation extends UI5Element {
 		this.fireEvent("selection-change", { item });
 	}
 
-	_resetSelectedItems(items) {
-		items.forEach(item => {
-			item.selected = false;
-
-			if (item.subItems) {
-				this._resetSelectedItems(item.subItems);
-			}
-		});
-	}
-
-	getMiddleFocusHelper() {
-		return this.getDomRef().querySelector(".ui5-sn-middle-focus-helper");
-	}
-
-	_focusOtherList() {
-		this.getMiddleFocusHelper().focus();
-	}
-
 	async getPicker() {
 		return (await this.getStaticAreaItemDomRef()).querySelector("ui5-responsive-popover");
 	}

From 7b3d14ff5cb54aacb911e55b4ae2cc71f44b6430 Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladislav.tasev@sap.com>
Date: Wed, 15 Jul 2020 16:35:34 +0300
Subject: [PATCH 14/29] delete level

---
 packages/fiori/src/SideNavigation.hbs       |  3 ---
 packages/fiori/src/SideNavigationItem.js    |  9 ---------
 packages/fiori/src/SideNavigationSubItem.js | 14 --------------
 packages/main/src/Tree.js                   |  6 ++----
 packages/main/src/TreeItem.js               |  9 ---------
 5 files changed, 2 insertions(+), 39 deletions(-)

diff --git a/packages/fiori/src/SideNavigation.hbs b/packages/fiori/src/SideNavigation.hbs
index 5e144b0627e8..7dd16ed8ce51 100644
--- a/packages/fiori/src/SideNavigation.hbs
+++ b/packages/fiori/src/SideNavigation.hbs
@@ -8,7 +8,6 @@
             {{#each items}}
                 <ui5-tree-item
                     icon="{{this.icon}}"
-                    level="{{this.level}}"
                     .associatedItem="{{this}}"
                     show-toggle-button-end
                     text="{{this.text}}"
@@ -20,7 +19,6 @@
                     {{#unless ../collapsed}}
                         {{#each this.items}}
                             <ui5-tree-item
-                                level="{{this.level}}"
                                 .associatedItem="{{this}}"
                                 show-toggle-button-end
                                 text="{{this.text}}"
@@ -49,7 +47,6 @@
                 {{#each fixedItems}}
                     <ui5-tree-item
                         icon="{{this.icon}}"
-                        level="{{this.level}}"
                         .associatedItem="{{this}}"
                         show-toggle-button-end
                         text="{{this.text}}"
diff --git a/packages/fiori/src/SideNavigationItem.js b/packages/fiori/src/SideNavigationItem.js
index 8457252d45f1..1af056ae0a28 100644
--- a/packages/fiori/src/SideNavigationItem.js
+++ b/packages/fiori/src/SideNavigationItem.js
@@ -1,5 +1,4 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 
 /**
  * @public
@@ -64,14 +63,6 @@ const metadata = {
 		selected: {
 			type: Boolean,
 		},
-
-		/**
-		 * @private
-		 */
-		level: {
-			type: Integer,
-			defaultValue: 1,
-		},
 	},
 	slots: /** @lends sap.ui.webcomponents.fiori.SideNavigationItem.prototype */ {
 		/**
diff --git a/packages/fiori/src/SideNavigationSubItem.js b/packages/fiori/src/SideNavigationSubItem.js
index ca9fdd0f4892..01e4bdb8d1ee 100644
--- a/packages/fiori/src/SideNavigationSubItem.js
+++ b/packages/fiori/src/SideNavigationSubItem.js
@@ -1,6 +1,4 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 
 /**
  * @public
@@ -18,14 +16,6 @@ const metadata = {
 		text: {
 			type: String,
 		},
-
-		/**
-		 * @private
-		 */
-		level: {
-			type: Integer,
-			defaultValue: 2,
-		},
 	},
 	slots: /** @lends sap.ui.webcomponents.fiori.SideNavigationSubItem.prototype */ {
 		//
@@ -62,10 +52,6 @@ class SideNavigationSubItem extends UI5Element {
 	static get metadata() {
 		return metadata;
 	}
-
-	static get render() {
-		return litRender;
-	}
 }
 
 SideNavigationSubItem.define();
diff --git a/packages/main/src/Tree.js b/packages/main/src/Tree.js
index 4ee88bfbf235..bdb198db58de 100644
--- a/packages/main/src/Tree.js
+++ b/packages/main/src/Tree.js
@@ -350,16 +350,14 @@ const walkTree = (el, level, callback) => {
 
 const buildTree = (el, level, result) => {
 	el.items.forEach(item => {
-		const currLevel = item.level || level;
-
 		const listItem = {
 			treeItem: item,
-			level: currLevel,
+			level,
 		};
 
 		result.push(listItem);
 		if (item.expanded && item.items.length > 0) {
-			buildTree(item, currLevel + 1, result);
+			buildTree(item, level + 1, result);
 		}
 	});
 };
diff --git a/packages/main/src/TreeItem.js b/packages/main/src/TreeItem.js
index ce40b34958ae..1628958a8b64 100644
--- a/packages/main/src/TreeItem.js
+++ b/packages/main/src/TreeItem.js
@@ -1,5 +1,4 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 
 /**
  * @public
@@ -76,14 +75,6 @@ const metadata = {
 			type: Boolean,
 		},
 
-		/**
-		 * @private
-		 * @since 1.0.0-rc.8
-		 */
-		level: {
-			type: Integer,
-		},
-
 		/**
 		 * @private
 		 * @since 1.0.0-rc.8

From ccb96d938ed6c7f89a701c14f78fcd4cbf73e178 Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladislav.tasev@sap.com>
Date: Wed, 15 Jul 2020 16:57:10 +0300
Subject: [PATCH 15/29] delete expandable 1

---
 packages/fiori/src/SideNavigation.hbs       |  4 +---
 packages/fiori/src/SideNavigationItem.js    | 14 --------------
 packages/fiori/src/SideNavigationSubItem.js |  6 ------
 3 files changed, 1 insertion(+), 23 deletions(-)

diff --git a/packages/fiori/src/SideNavigation.hbs b/packages/fiori/src/SideNavigation.hbs
index 7dd16ed8ce51..2186366a0b9f 100644
--- a/packages/fiori/src/SideNavigation.hbs
+++ b/packages/fiori/src/SideNavigation.hbs
@@ -11,7 +11,7 @@
                     .associatedItem="{{this}}"
                     show-toggle-button-end
                     text="{{this.text}}"
-                    ?has-children="{{this.expandable}}"
+                    ?has-children="{{this.items.length}}"
                     ?expanded="{{this.expanded}}"
                     ?_collapsed="{{../collapsed}}"
                     ?selected="{{this.selected}}"
@@ -23,7 +23,6 @@
                                 show-toggle-button-end
                                 text="{{this.text}}"
                                 index="{{this.index}}"
-                                ?has-children="{{this.expandable}}"
                                 ?selected="{{this.selected}}"
                             >
                             </ui5-tree-item>
@@ -51,7 +50,6 @@
                         show-toggle-button-end
                         text="{{this.text}}"
                         index="{{this.index}}"
-                        ?has-children="{{this.expandable}}"
                         ?expanded="{{this.expanded}}"
                         ?_collapsed="{{../collapsed}}"
                         ?selected="{{this.selected}}"
diff --git a/packages/fiori/src/SideNavigationItem.js b/packages/fiori/src/SideNavigationItem.js
index 1af056ae0a28..da0391477e8a 100644
--- a/packages/fiori/src/SideNavigationItem.js
+++ b/packages/fiori/src/SideNavigationItem.js
@@ -29,17 +29,6 @@ const metadata = {
 			type: String,
 		},
 
-		/**
-		 *
-		 * Defines whether the item is expandable. In order to use this property you need to pass another <code>ui5-side-navigation-item</code> as a default slot.
-		 * @public
-		 * @type {boolean}
-		 * @defaultvalue false
-		 */
-		expandable: {
-			type: Boolean,
-		},
-
 		/**
 		 * Defines if the item is expanded
 		 * <br><br>
@@ -77,9 +66,6 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.fiori.SideNavigationItem.prototype */ {
-		//
-	},
 };
 
 /**
diff --git a/packages/fiori/src/SideNavigationSubItem.js b/packages/fiori/src/SideNavigationSubItem.js
index 01e4bdb8d1ee..2289d604f90b 100644
--- a/packages/fiori/src/SideNavigationSubItem.js
+++ b/packages/fiori/src/SideNavigationSubItem.js
@@ -17,12 +17,6 @@ const metadata = {
 			type: String,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.fiori.SideNavigationSubItem.prototype */ {
-		//
-	},
-	events: /** @lends sap.ui.webcomponents.fiori.SideNavigationSubItem.prototype */ {
-		//
-	},
 };
 
 /**

From f43dbc8265c4e6af7a406b9f68288b3fa573da02 Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladislav.tasev@sap.com>
Date: Thu, 16 Jul 2020 10:09:05 +0300
Subject: [PATCH 16/29] use existing tree function, fix module imports help

---
 packages/fiori/src/SideNavigation.js        |  7 ++++---
 packages/fiori/src/SideNavigationItem.js    |  4 ++--
 packages/fiori/src/SideNavigationSubItem.js |  2 +-
 packages/main/src/Icon.hbs                  |  2 +-
 packages/main/src/Tree.js                   | 18 +++++++++---------
 5 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/fiori/src/SideNavigation.js b/packages/fiori/src/SideNavigation.js
index 5c0da80c9904..ead1c2f82f6d 100644
--- a/packages/fiori/src/SideNavigation.js
+++ b/packages/fiori/src/SideNavigation.js
@@ -130,11 +130,13 @@ class SideNavigation extends UI5Element {
 
 		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();
+		otherTree.walk(current => {
+			current.selected = false;
+		});
 
 		if (this.collapsed && item.items.length) {
 			this._popoverContent = [item, ...item.items];
-			this.openPicker(currentTree._getRealItemDomRef(treeItem));
+			this.openPicker(currentTree._getListItemForTreeItem(treeItem));
 		} else {
 			this.fireSelectionChange(item);
 		}
@@ -157,7 +159,6 @@ class SideNavigation extends UI5Element {
 
 	async openPicker(opener) {
 		const responsivePopover = await this.getPicker();
-
 		responsivePopover.open(opener);
 	}
 
diff --git a/packages/fiori/src/SideNavigationItem.js b/packages/fiori/src/SideNavigationItem.js
index da0391477e8a..c1c82cf7cfee 100644
--- a/packages/fiori/src/SideNavigationItem.js
+++ b/packages/fiori/src/SideNavigationItem.js
@@ -23,7 +23,7 @@ const metadata = {
 		 *
 		 * @public
 		 * @type {string}
-		 * @defaultvalue false
+		 * @defaultvalue ""
 		 */
 		icon: {
 			type: String,
@@ -80,7 +80,7 @@ const metadata = {
  * For the <code>ui5-side-navigation-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/SideNavigationItem.js";</code>
+ * <code>import @ui5/webcomponents-fiori/dist/SideNavigationItem.js";</code>
  *
  * @constructor
  * @author SAP SE
diff --git a/packages/fiori/src/SideNavigationSubItem.js b/packages/fiori/src/SideNavigationSubItem.js
index 2289d604f90b..637b7931a204 100644
--- a/packages/fiori/src/SideNavigationSubItem.js
+++ b/packages/fiori/src/SideNavigationSubItem.js
@@ -32,7 +32,7 @@ const metadata = {
  * For the <code>ui5-side-navigation-sub-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/SideNavigationSubItem.js";</code>
+ * <code>import @ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";</code>
  *
  * @constructor
  * @author SAP SE
diff --git a/packages/main/src/Icon.hbs b/packages/main/src/Icon.hbs
index f91cd8feb22e..8b3f55c62dc2 100644
--- a/packages/main/src/Icon.hbs
+++ b/packages/main/src/Icon.hbs
@@ -21,4 +21,4 @@
 	<g role="presentation">
 		<path transform="translate(0, 512) scale(1, -1)" d="{{pathData}}"/>
 	</g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/packages/main/src/Tree.js b/packages/main/src/Tree.js
index bdb198db58de..df156afd579f 100644
--- a/packages/main/src/Tree.js
+++ b/packages/main/src/Tree.js
@@ -16,7 +16,6 @@ import TreeCss from "./generated/themes/Tree.css.js";
  */
 const metadata = {
 	tag: "ui5-tree",
-	managedSlots: true,
 	properties: /** @lends sap.ui.webcomponents.main.Tree.prototype */ {
 		/**
 		 * Defines the mode of the <code>ui5-tree</code>. Since the tree uses a <code>ui5-list</code> to display its structure,
@@ -79,6 +78,7 @@ const metadata = {
 			multiple: true,
 		},
 	},
+	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.Tree.prototype */ {
 
 		/**
@@ -318,14 +318,14 @@ class Tree extends UI5Element {
 		});
 	}
 
-	_clearSelectedItems() {
-		return this.list.deselectSelectedItems();
-	}
-
-	_getRealItemDomRef(item) {
-		const position = this.items.indexOf(item);
-
-		return this.getDomRef().querySelectorAll("ui5-li-tree")[position];
+	/**
+	 * Returns the corresponding list item for a given tree item
+	 *
+	 * @param item The tree item
+	 * @protected
+	 */
+	_getListItemForTreeItem(item) {
+		return this.list.items.find(listItem => listItem.treeItem === item);
 	}
 
 	/**

From 941651b264be40b18fbf5abfe26625793e9e06ed Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladislav.tasev@sap.com>
Date: Thu, 16 Jul 2020 10:37:12 +0300
Subject: [PATCH 17/29] delete expandable - it is the same as showToggleButton

---
 packages/fiori/src/SideNavigationItem.js  | 3 ---
 packages/main/src/Tree.hbs                | 1 -
 packages/main/src/TreeListItem.js         | 7 -------
 packages/main/src/themes/TreeListItem.css | 2 +-
 4 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/packages/fiori/src/SideNavigationItem.js b/packages/fiori/src/SideNavigationItem.js
index c1c82cf7cfee..696ff1edb71b 100644
--- a/packages/fiori/src/SideNavigationItem.js
+++ b/packages/fiori/src/SideNavigationItem.js
@@ -31,9 +31,6 @@ const metadata = {
 
 		/**
 		 * Defines if the item is expanded
-		 * <br><br>
-		 * <b>Note:</b>
-		 * If <code>expandable</code> property is set to <code>true</code>, you can control via this property whether the current item is expanded or not.
 		 *
 		 * @public
 		 * @type {boolean}
diff --git a/packages/main/src/Tree.hbs b/packages/main/src/Tree.hbs
index 376edf54fe74..faf2a1000cdd 100644
--- a/packages/main/src/Tree.hbs
+++ b/packages/main/src/Tree.hbs
@@ -15,7 +15,6 @@
             level="{{this.level}}"
             icon="{{this.treeItem.icon}}"
             ?show-toggle-button-end="{{this.treeItem.showToggleButtonEnd}}"
-            ?expandable="{{this.treeItem.hasChildren}}"
             ?_collapsed="{{this.treeItem._collapsed}}"
             .treeItem="{{this.treeItem}}"
             .expanded="{{this.treeItem.expanded}}"
diff --git a/packages/main/src/TreeListItem.js b/packages/main/src/TreeListItem.js
index 4cf7499ce24e..4f62776f70aa 100644
--- a/packages/main/src/TreeListItem.js
+++ b/packages/main/src/TreeListItem.js
@@ -63,13 +63,6 @@ const metadata = {
 			type: Boolean,
 		},
 
-		/**
-		 * @private
-		 */
-		expandable: {
-			type: Boolean,
-		},
-
 		/**
 		 * @private
 		 * @since 1.0.0-rc.8
diff --git a/packages/main/src/themes/TreeListItem.css b/packages/main/src/themes/TreeListItem.css
index b79bc35225ff..6999d280965f 100644
--- a/packages/main/src/themes/TreeListItem.css
+++ b/packages/main/src/themes/TreeListItem.css
@@ -20,7 +20,7 @@
     padding: 0;
 }
 
-:host([_collapsed][expandable])::after {
+:host([_collapsed][show-toggle-button])::after {
     content: "";
     width: 0;
     height: 0;

From 14cf96c8ae869eaddcd34841ddc78bee9d81b5d4 Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladislav.tasev@sap.com>
Date: Thu, 16 Jul 2020 11:17:14 +0300
Subject: [PATCH 18/29] move _collapsed and _showToggleButtonEnd to tree level
 and don't pass them through tree items, rename them as _collapsed is
 confusing in tree context

---
 packages/fiori/src/SideNavigation.hbs     |  9 ++++-----
 packages/main/src/Tree.hbs                |  4 ++--
 packages/main/src/Tree.js                 | 21 +++++++++++++++++++++
 packages/main/src/TreeItem.js             | 16 ----------------
 packages/main/src/TreeListItem.js         | 15 +++++++--------
 packages/main/src/themes/Icon.css         |  2 +-
 packages/main/src/themes/TreeListItem.css | 18 +++++++++---------
 7 files changed, 44 insertions(+), 41 deletions(-)

diff --git a/packages/fiori/src/SideNavigation.hbs b/packages/fiori/src/SideNavigation.hbs
index 2186366a0b9f..6493a54a5c40 100644
--- a/packages/fiori/src/SideNavigation.hbs
+++ b/packages/fiori/src/SideNavigation.hbs
@@ -3,24 +3,23 @@
         <ui5-tree
             id="ui5-sn-items-tree"
             mode="SingleSelect"
+            ?_minimal="{{collapsed}}"
+            _toggle-button-end
             @ui5-item-click="{{handleTreeItemClick}}"
         >
             {{#each items}}
                 <ui5-tree-item
                     icon="{{this.icon}}"
                     .associatedItem="{{this}}"
-                    show-toggle-button-end
                     text="{{this.text}}"
                     ?has-children="{{this.items.length}}"
                     ?expanded="{{this.expanded}}"
-                    ?_collapsed="{{../collapsed}}"
                     ?selected="{{this.selected}}"
                 >
                     {{#unless ../collapsed}}
                         {{#each this.items}}
                             <ui5-tree-item
                                 .associatedItem="{{this}}"
-                                show-toggle-button-end
                                 text="{{this.text}}"
                                 index="{{this.index}}"
                                 ?selected="{{this.selected}}"
@@ -41,17 +40,17 @@
             <ui5-tree
                 id="ui5-sn-fixed-items-tree"
                 mode="SingleSelect"
+                ?_minimal="{{collapsed}}"
+                _toggle-button-end
                 @ui5-item-click="{{handleTreeItemClick}}"
             >
                 {{#each fixedItems}}
                     <ui5-tree-item
                         icon="{{this.icon}}"
                         .associatedItem="{{this}}"
-                        show-toggle-button-end
                         text="{{this.text}}"
                         index="{{this.index}}"
                         ?expanded="{{this.expanded}}"
-                        ?_collapsed="{{../collapsed}}"
                         ?selected="{{this.selected}}"
                     ></ui5-tree-item>
                 {{/each}}
diff --git a/packages/main/src/Tree.hbs b/packages/main/src/Tree.hbs
index faf2a1000cdd..0a944def6270 100644
--- a/packages/main/src/Tree.hbs
+++ b/packages/main/src/Tree.hbs
@@ -14,8 +14,8 @@
             type="Active"
             level="{{this.level}}"
             icon="{{this.treeItem.icon}}"
-            ?show-toggle-button-end="{{this.treeItem.showToggleButtonEnd}}"
-            ?_collapsed="{{this.treeItem._collapsed}}"
+            ?_toggle-button-end="{{../_toggleButtonEnd}}"
+            ?_minimal="{{../_minimal}}"
             .treeItem="{{this.treeItem}}"
             .expanded="{{this.treeItem.expanded}}"
             .selected="{{this.treeItem.selected}}"
diff --git a/packages/main/src/Tree.js b/packages/main/src/Tree.js
index df156afd579f..37805e007a37 100644
--- a/packages/main/src/Tree.js
+++ b/packages/main/src/Tree.js
@@ -77,6 +77,27 @@ const metadata = {
 			type: Object,
 			multiple: true,
 		},
+
+		/**
+		 * Shows the toggle button at the end, rather than at the beginning of the item
+		 *
+		 * @protected
+		 * @since 1.0.0-rc.8
+		 */
+		_toggleButtonEnd: {
+			type: Boolean,
+		},
+
+		/**
+		 * Represents the tree in a very minimal state - only top level nodes are shown (and just the icons),
+		 * in addition nodes with children have a small arrow
+		 *
+		 * @protected
+		 * @since 1.0.0-rc.8
+		 */
+		_minimal: {
+			type: Boolean,
+		},
 	},
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.Tree.prototype */ {
diff --git a/packages/main/src/TreeItem.js b/packages/main/src/TreeItem.js
index 1628958a8b64..4fbbe7961602 100644
--- a/packages/main/src/TreeItem.js
+++ b/packages/main/src/TreeItem.js
@@ -66,22 +66,6 @@ const metadata = {
 		icon: {
 			type: String,
 		},
-
-		/**
-		 * @private
-		 * @since 1.0.0-rc.8
-		 */
-		showToggleButtonEnd: {
-			type: Boolean,
-		},
-
-		/**
-		 * @private
-		 * @since 1.0.0-rc.8
-		 */
-		_collapsed: {
-			type: Boolean,
-		},
 	},
 	slots: /** @lends sap.ui.webcomponents.main.TreeItem.prototype */ {
 
diff --git a/packages/main/src/TreeListItem.js b/packages/main/src/TreeListItem.js
index 4f62776f70aa..7037ef893dcf 100644
--- a/packages/main/src/TreeListItem.js
+++ b/packages/main/src/TreeListItem.js
@@ -64,18 +64,18 @@ const metadata = {
 		},
 
 		/**
-		 * @private
+		 * @protected
 		 * @since 1.0.0-rc.8
 		 */
-		showToggleButtonEnd: {
+		_toggleButtonEnd: {
 			type: Boolean,
 		},
 
 		/**
-		 * @private
+		 * @protected
 		 * @since 1.0.0-rc.8
 		 */
-		_collapsed: {
+		_minimal: {
 			type: Boolean,
 		},
 
@@ -91,7 +91,6 @@ const metadata = {
 		 * @public
 		 */
 		"default": {
-			propertyName: "items",
 			type: Node,
 		},
 	},
@@ -192,15 +191,15 @@ class TreeListItem extends ListItem {
 	}
 
 	get _showToggleButtonBeginning() {
-		return this.showToggleButton && !this._collapsed && !this.showToggleButtonEnd;
+		return this.showToggleButton && !this._minimal && !this._toggleButtonEnd;
 	}
 
 	get _showToggleButtonEnd() {
-		return this.showToggleButton && !this._collapsed && this.showToggleButtonEnd;
+		return this.showToggleButton && !this._minimal && this._toggleButtonEnd;
 	}
 
 	get showTitle() {
-		return this.textContent.length && !this._collapsed;
+		return this.textContent.length && !this._minimal;
 	}
 
 	get _accInfo() {
diff --git a/packages/main/src/themes/Icon.css b/packages/main/src/themes/Icon.css
index 862b43b5710d..a0dffafd8149 100644
--- a/packages/main/src/themes/Icon.css
+++ b/packages/main/src/themes/Icon.css
@@ -32,4 +32,4 @@
 	transform: scale(1, -1);
 	transform-origin: center;
 	outline: none;
-}
\ No newline at end of file
+}
diff --git a/packages/main/src/themes/TreeListItem.css b/packages/main/src/themes/TreeListItem.css
index 6999d280965f..2e2364c043cb 100644
--- a/packages/main/src/themes/TreeListItem.css
+++ b/packages/main/src/themes/TreeListItem.css
@@ -4,23 +4,23 @@
     position: relative;
 }
 
-:host([_collapsed]:not([hidden])) {
+:host([_minimal]:not([hidden])) {
     --_ui5-tree-toggle-box-width: 0rem;
 }
 
-:host([_collapsed]) .ui5-li-icon {
+:host([_minimal]) .ui5-li-icon {
     padding: 0;
 }
 
-:host([_collapsed]) .ui5-li-content {
+:host([_minimal]) .ui5-li-content {
     justify-content: center;
 }
 
-:host([_collapsed]) .ui5-li-root-tree {
+:host([_minimal]) .ui5-li-root-tree {
     padding: 0;
 }
 
-:host([_collapsed][show-toggle-button])::after {
+:host([_minimal][show-toggle-button])::after {
     content: "";
     width: 0;
     height: 0;
@@ -40,11 +40,11 @@
     border-bottom: none;
 }
 
-:host([show-toggle-button-end][selected]:not([level="1"])){
+:host([_toggle-button-end][selected]:not([level="1"])){
     border-bottom: var(--ui5-listitem-selected-border-bottom);
 }
 
-:host([show-toggle-button-end]:not([selected])) .ui5-li-root-tree:hover {
+:host([_toggle-button-end]:not([selected])) .ui5-li-root-tree:hover {
     background: var(--sapList_Hover_Background);
     cursor: pointer;
 }
@@ -53,11 +53,11 @@
     background: var(--sapList_AlternatingBackground);
 }
 
-:host([show-toggle-button-end]:not([level="1"])) .ui5-li-root-tree {
+:host([_toggle-button-end]:not([level="1"])) .ui5-li-root-tree {
     background: var(--ui5-listitem-background-color);
 }
 
-:host([show-toggle-button-end][selected]:not([level="1"])) .ui5-li-root-tree {
+:host([_toggle-button-end][selected]:not([level="1"])) .ui5-li-root-tree {
     background: var(--sapList_SelectionBackgroundColor);
 }
 

From ff7b909ead4e2a95d348a0559f9cc99d6de7a19c Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladislav.tasev@sap.com>
Date: Thu, 16 Jul 2020 11:52:40 +0300
Subject: [PATCH 19/29] fix for IE: do not override the CSS var, directly
 override width instead

---
 packages/fiori/test/pages/SideNavigation.html | 11 +++++++----
 packages/main/src/Tree.js                     |  5 ++---
 packages/main/src/TreeListItem.hbs            |  2 +-
 packages/main/src/TreeListItem.js             |  6 +++++-
 packages/main/src/themes/TreeListItem.css     |  4 ++--
 5 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/fiori/test/pages/SideNavigation.html b/packages/fiori/test/pages/SideNavigation.html
index 204fc04f0939..62d8cfbfaf4d 100644
--- a/packages/fiori/test/pages/SideNavigation.html
+++ b/packages/fiori/test/pages/SideNavigation.html
@@ -4,6 +4,9 @@
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<title>Side Navigation</title>
+	<script>
+		delete Document.prototype.adoptedStyleSheets
+	</script>
     <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">
@@ -35,7 +38,7 @@
 </head>
 
 <body style="background-color: var(--sapBackgroundColor);">
-	<ui5-shellbar 
+	<ui5-shellbar
 		primary-title="UI5 Web Components"
 		secondary-title="The Best Run SAP"
 		show-co-pilot
@@ -55,16 +58,16 @@
 				<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>
 
 		<ui5-input id="counter" value="0"></ui5-input>
 	</div>
-	
 
-	
+
+
 
 	<script>
 		var sideNavigation = document.querySelector("ui5-side-navigation"),
diff --git a/packages/main/src/Tree.js b/packages/main/src/Tree.js
index 37805e007a37..f2c9f5939f68 100644
--- a/packages/main/src/Tree.js
+++ b/packages/main/src/Tree.js
@@ -79,7 +79,7 @@ const metadata = {
 		},
 
 		/**
-		 * Shows the toggle button at the end, rather than at the beginning of the item
+		 * Shows the toggle button at the end, rather than at the beginning of the items
 		 *
 		 * @protected
 		 * @since 1.0.0-rc.8
@@ -89,8 +89,7 @@ const metadata = {
 		},
 
 		/**
-		 * Represents the tree in a very minimal state - only top level nodes are shown (and just the icons),
-		 * in addition nodes with children have a small arrow
+		 * Represents the tree in a very minimal state - icons only with no text and no toggle buttons
 		 *
 		 * @protected
 		 * @since 1.0.0-rc.8
diff --git a/packages/main/src/TreeListItem.hbs b/packages/main/src/TreeListItem.hbs
index 396c0448b1fd..878dff275cf3 100644
--- a/packages/main/src/TreeListItem.hbs
+++ b/packages/main/src/TreeListItem.hbs
@@ -13,7 +13,7 @@
 {{/inline}}
 
 {{#*inline "listItemContent"}}
-	{{#if showTitle}}
+	{{#if _showTitle}}
 		<div part="title" class="ui5-li-title"><slot></slot></div>
 	{{/if}}
 {{/inline}}
diff --git a/packages/main/src/TreeListItem.js b/packages/main/src/TreeListItem.js
index 7037ef893dcf..26c62fb8d5a0 100644
--- a/packages/main/src/TreeListItem.js
+++ b/packages/main/src/TreeListItem.js
@@ -64,6 +64,8 @@ const metadata = {
 		},
 
 		/**
+		 * Defines whether the toggle button is shown at the end, rather than at the beginning of the item
+		 *
 		 * @protected
 		 * @since 1.0.0-rc.8
 		 */
@@ -72,6 +74,8 @@ const metadata = {
 		},
 
 		/**
+		 * Defines whether the item shows minimal details - only icon (no text or toggle button)
+		 *
 		 * @protected
 		 * @since 1.0.0-rc.8
 		 */
@@ -198,7 +202,7 @@ class TreeListItem extends ListItem {
 		return this.showToggleButton && !this._minimal && this._toggleButtonEnd;
 	}
 
-	get showTitle() {
+	get _showTitle() {
 		return this.textContent.length && !this._minimal;
 	}
 
diff --git a/packages/main/src/themes/TreeListItem.css b/packages/main/src/themes/TreeListItem.css
index 2e2364c043cb..bca8f4d370d9 100644
--- a/packages/main/src/themes/TreeListItem.css
+++ b/packages/main/src/themes/TreeListItem.css
@@ -4,8 +4,8 @@
     position: relative;
 }
 
-:host([_minimal]:not([hidden])) {
-    --_ui5-tree-toggle-box-width: 0rem;
+:host([_minimal]) .ui5-li-tree-toggle-box {
+    width: 0;
 }
 
 :host([_minimal]) .ui5-li-icon {

From e7236df54d12dbc2685ee7f31da380c5b0872b51 Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladislav.tasev@sap.com>
Date: Thu, 16 Jul 2020 16:46:45 +0300
Subject: [PATCH 20/29] selected state fixed

---
 packages/fiori/src/SideNavigation.hbs         |  4 +-
 packages/fiori/src/SideNavigation.js          | 92 ++++++++++++++++---
 packages/fiori/src/SideNavigationItem.js      |  5 +-
 .../src/SideNavigationItemPopoverContent.hbs  | 15 ++-
 packages/fiori/src/SideNavigationSubItem.js   | 11 +++
 5 files changed, 104 insertions(+), 23 deletions(-)

diff --git a/packages/fiori/src/SideNavigation.hbs b/packages/fiori/src/SideNavigation.hbs
index 6493a54a5c40..76985f973b9f 100644
--- a/packages/fiori/src/SideNavigation.hbs
+++ b/packages/fiori/src/SideNavigation.hbs
@@ -2,7 +2,7 @@
     {{#if items.length}}
         <ui5-tree
             id="ui5-sn-items-tree"
-            mode="SingleSelect"
+            mode="None"
             ?_minimal="{{collapsed}}"
             _toggle-button-end
             @ui5-item-click="{{handleTreeItemClick}}"
@@ -39,7 +39,7 @@
             </div>
             <ui5-tree
                 id="ui5-sn-fixed-items-tree"
-                mode="SingleSelect"
+                mode="None"
                 ?_minimal="{{collapsed}}"
                 _toggle-button-end
                 @ui5-item-click="{{handleTreeItemClick}}"
diff --git a/packages/fiori/src/SideNavigation.js b/packages/fiori/src/SideNavigation.js
index ead1c2f82f6d..601ba878453d 100644
--- a/packages/fiori/src/SideNavigation.js
+++ b/packages/fiori/src/SideNavigation.js
@@ -31,7 +31,11 @@ const metadata = {
 		 */
 		_popoverContent: {
 			type: Object,
-			multiple: true,
+		},
+
+		_selectedItem: {
+			type: Object,
+			defaultValue: null,
 		},
 	},
 	slots: /** @lends sap.ui.webcomponents.fiori.SideNavigation.prototype */ {
@@ -124,21 +128,78 @@ class SideNavigation extends UI5Element {
 		]);
 	}
 
+	onBeforeRendering() {
+		if (!this._selectedItem) {
+			this._autoSelectItem();
+		}
+		const item = this._selectedItem;
+
+		if (this.collapsed) {
+			this.items.forEach(current => {
+				current.selected = (current === item) || current.items.includes(item);
+
+				current.items.forEach(currentSubitem => {
+					currentSubitem.selected = currentSubitem === item;
+				});
+			});
+		} else {
+			this.items.forEach(current => {
+				current.selected = current === item;
+
+				current.items.forEach(currentSubitem => {
+					currentSubitem.selected = currentSubitem === item;
+				});
+			});
+		}
+
+		this.fixedItems.forEach(current => {
+			current.selected = current === item;
+		});
+	}
+
+	_autoSelectItem() {
+		this.items.forEach(current => {
+			if (current.selected) {
+				this._selectedItem = current;
+			}
+
+			current.items.forEach(currentSubitem => {
+				if (currentSubitem.selected) {
+					this._selectedItem = currentSubitem;
+				}
+			});
+		});
+
+		this.fixedItems.forEach(current => {
+			if (current.selected) {
+				this._selectedItem = current;
+			}
+		});
+	}
+
+	_setSelectedItem(item) {
+		this._selectedItem = item; // set the current item as the selected item for the side navigation
+		this.fireEvent("selection-change", { item });
+	}
+
+	_buildPopoverContent(item) {
+		this._popoverContent = {
+			mainItem: item,
+			mainItemSelected: item.selected && !item.items.some(subItem => subItem.selected),
+			subItems: item.items,
+		};
+	}
+
 	handleTreeItemClick(event) {
 		const treeItem = event.detail.item;
 		const item = treeItem.associatedItem;
 
-		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.walk(current => {
-			current.selected = false;
-		});
-
 		if (this.collapsed && item.items.length) {
-			this._popoverContent = [item, ...item.items];
+			this._buildPopoverContent(item);
+			const currentTree = this._itemsTree === event.target ? this._itemsTree : this._fixedItemsTree;
 			this.openPicker(currentTree._getListItemForTreeItem(treeItem));
 		} else {
-			this.fireSelectionChange(item);
+			this._setSelectedItem(item);
 		}
 	}
 
@@ -146,11 +207,8 @@ class SideNavigation extends UI5Element {
 		const listItem = event.detail.item;
 		const item = listItem.associatedItem;
 
-		this.fireSelectionChange(item);
-	}
-
-	fireSelectionChange(item) {
-		this.fireEvent("selection-change", { item });
+		this._setSelectedItem(item);
+		this.closePicker();
 	}
 
 	async getPicker() {
@@ -162,6 +220,12 @@ class SideNavigation extends UI5Element {
 		responsivePopover.open(opener);
 	}
 
+	async closePicker(opener) {
+		const responsivePopover = await this.getPicker();
+		responsivePopover.close();
+	}
+
+
 	get _itemsTree() {
 		return this.getDomRef().querySelector("#ui5-sn-items-tree");
 	}
diff --git a/packages/fiori/src/SideNavigationItem.js b/packages/fiori/src/SideNavigationItem.js
index 696ff1edb71b..063eb57b7f8e 100644
--- a/packages/fiori/src/SideNavigationItem.js
+++ b/packages/fiori/src/SideNavigationItem.js
@@ -41,7 +41,8 @@ const metadata = {
 		},
 
 		/**
-		 * True only for the currently selected item.
+		 * Defines whether the subitem is selected
+		 *
 		 * @public
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -54,7 +55,7 @@ const metadata = {
 		/**
 		 * If you wish to nest menus, you can pass inner menu items to the default slot.
 		 *
- 		 * @type {HTMLElement[]}
+		 * @type {HTMLElement[]}
 		 * @public
 		 * @slot
 		 */
diff --git a/packages/fiori/src/SideNavigationItemPopoverContent.hbs b/packages/fiori/src/SideNavigationItemPopoverContent.hbs
index 45471f0a622f..73681f97db9f 100644
--- a/packages/fiori/src/SideNavigationItemPopoverContent.hbs
+++ b/packages/fiori/src/SideNavigationItemPopoverContent.hbs
@@ -2,14 +2,19 @@
 	vertical-align="Top"
 >
     <ui5-list
+	    mode="None"
         @ui5-item-click="{{handleListItemClick}}"
     >
-        {{#each _popoverContent}}
+	    <ui5-li
+		    ?selected="{{_popoverContent.mainItemSelected}}"
+		    .associatedItem="{{_popoverContent.mainItem}}"
+	    >{{_popoverContent.mainItem.text}}</ui5-li>
+
+        {{#each _popoverContent.subItems}}
             <ui5-li
-                .assiciatedItem="{{this}}"
-            >
-	            {{this.text}}
-            </ui5-li>
+	            ?selected="{{this.selected}}"
+                .associatedItem="{{this}}"
+            >{{this.text}}</ui5-li>
         {{/each}}
     </ui5-list>
 </ui5-responsive-popover>
diff --git a/packages/fiori/src/SideNavigationSubItem.js b/packages/fiori/src/SideNavigationSubItem.js
index 637b7931a204..aa27f9a69d57 100644
--- a/packages/fiori/src/SideNavigationSubItem.js
+++ b/packages/fiori/src/SideNavigationSubItem.js
@@ -16,6 +16,17 @@ const metadata = {
 		text: {
 			type: String,
 		},
+
+		/**
+		 * Defines whether the subitem is selected
+		 *
+		 * @public
+		 * @type {boolean}
+		 * @defaultvalue false
+		 */
+		selected: {
+			type: Boolean,
+		},
 	},
 };
 

From 45c2d2813a2c3f74556184fe434b7e39dc6e3048 Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Mon, 20 Jul 2020 10:30:53 +0300
Subject: [PATCH 21/29] apply invalidateParent &  fix failing tests

---
 packages/fiori/src/SideNavigation.js             | 7 +++++--
 packages/fiori/src/SideNavigationItem.js         | 1 +
 packages/fiori/test/specs/SideNavigation.spec.js | 3 +--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/fiori/src/SideNavigation.js b/packages/fiori/src/SideNavigation.js
index 601ba878453d..cb43fb6926dc 100644
--- a/packages/fiori/src/SideNavigation.js
+++ b/packages/fiori/src/SideNavigation.js
@@ -47,6 +47,7 @@ const metadata = {
 		 */
 		"default": {
 			propertyName: "items",
+			invalidateParent: true,
 			type: HTMLElement,
 		},
 
@@ -178,8 +179,10 @@ class SideNavigation extends UI5Element {
 	}
 
 	_setSelectedItem(item) {
-		this._selectedItem = item; // set the current item as the selected item for the side navigation
-		this.fireEvent("selection-change", { item });
+		if (item !== this._selectedItem) {
+			this._selectedItem = item; // set the current item as the selected item for the side navigation
+			this.fireEvent("selection-change", { item });
+		}
 	}
 
 	_buildPopoverContent(item) {
diff --git a/packages/fiori/src/SideNavigationItem.js b/packages/fiori/src/SideNavigationItem.js
index 063eb57b7f8e..2dbc27bbaa66 100644
--- a/packages/fiori/src/SideNavigationItem.js
+++ b/packages/fiori/src/SideNavigationItem.js
@@ -61,6 +61,7 @@ const metadata = {
 		 */
 		"default": {
 			propertyName: "items",
+			invalidateParent: true,
 			type: HTMLElement,
 		},
 	},
diff --git a/packages/fiori/test/specs/SideNavigation.spec.js b/packages/fiori/test/specs/SideNavigation.spec.js
index e1a4a26d08cb..b233495b8c85 100644
--- a/packages/fiori/test/specs/SideNavigation.spec.js
+++ b/packages/fiori/test/specs/SideNavigation.spec.js
@@ -35,10 +35,9 @@ describe("Component Behavior", () => {
 			const popover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
 			items = popover.$("ui5-list").$$("ui5-li");
 
-			items[0].click();
 			items[1].click();
 
-			assert.strictEqual(input.getProperty("value"), "6", "Event is fired");
+			assert.strictEqual(input.getProperty("value"), "5", "Event is fired");
 		})
 	});
 });
\ No newline at end of file

From 9b37a3b0f9d3d0a22e0d378dce0422c9f4178faf Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladislav.tasev@sap.com>
Date: Mon, 20 Jul 2020 15:54:58 +0300
Subject: [PATCH 22/29] selected can be changed programmatically

---
 packages/base/src/UI5Element.js               |  8 +-
 packages/fiori/src/SideNavigation.js          | 75 ++++++++-----------
 packages/fiori/test/pages/SideNavigation.html |  4 +-
 3 files changed, 36 insertions(+), 51 deletions(-)

diff --git a/packages/base/src/UI5Element.js b/packages/base/src/UI5Element.js
index 982d5ee544d2..8b3fa47edb9d 100644
--- a/packages/base/src/UI5Element.js
+++ b/packages/base/src/UI5Element.js
@@ -493,6 +493,10 @@ class UI5Element extends HTMLElement {
 	 * @private
 	 */
 	_invalidate() {
+		if (this._shouldInvalidateParent) {
+			this.parentNode._invalidate();
+		}
+
 		if (!this._upToDate) {
 			// console.log("already invalidated", this, ...arguments);
 			return;
@@ -502,10 +506,6 @@ class UI5Element extends HTMLElement {
 			this._upToDate = false;
 			// console.log("INVAL", this, ...arguments);
 			RenderScheduler.renderDeferred(this);
-
-			if (this._shouldInvalidateParent) {
-				this.parentNode._invalidate();
-			}
 		}
 	}
 
diff --git a/packages/fiori/src/SideNavigation.js b/packages/fiori/src/SideNavigation.js
index cb43fb6926dc..29f381b7291a 100644
--- a/packages/fiori/src/SideNavigation.js
+++ b/packages/fiori/src/SideNavigation.js
@@ -59,6 +59,7 @@ const metadata = {
 		 */
 		fixedItems: {
 			type: HTMLElement,
+			invalidateParent: true,
 		},
 	},
 	events: /** @lends sap.ui.webcomponents.fiori.SideNavigation.prototype */ {
@@ -130,59 +131,30 @@ class SideNavigation extends UI5Element {
 	}
 
 	onBeforeRendering() {
-		if (!this._selectedItem) {
-			this._autoSelectItem();
-		}
-		const item = this._selectedItem;
-
-		if (this.collapsed) {
-			this.items.forEach(current => {
-				current.selected = (current === item) || current.items.includes(item);
-
-				current.items.forEach(currentSubitem => {
-					currentSubitem.selected = currentSubitem === item;
-				});
-			});
-		} else {
-			this.items.forEach(current => {
-				current.selected = current === item;
-
-				current.items.forEach(currentSubitem => {
-					currentSubitem.selected = currentSubitem === item;
-				});
-			});
-		}
-
-		this.fixedItems.forEach(current => {
-			current.selected = current === item;
-		});
+		console.log('onbefore')
+		this._calculateSelectedItem();
 	}
 
-	_autoSelectItem() {
-		this.items.forEach(current => {
-			if (current.selected) {
-				this._selectedItem = current;
-			}
-
-			current.items.forEach(currentSubitem => {
-				if (currentSubitem.selected) {
-					this._selectedItem = currentSubitem;
-				}
-			});
+	_clearSelectedItem() {
+		this.walk(item => {
+			item.selected = false;
 		});
+	}
 
-		this.fixedItems.forEach(current => {
-			if (current.selected) {
-				this._selectedItem = current;
+	_calculateSelectedItem() {
+		this._selectedItem = null;
+		this.walk(item => {
+			if (item.selected) {
+				this._selectedItem = item;
 			}
 		});
 	}
 
 	_setSelectedItem(item) {
-		if (item !== this._selectedItem) {
-			this._selectedItem = item; // set the current item as the selected item for the side navigation
-			this.fireEvent("selection-change", { item });
-		}
+		this._clearSelectedItem();
+		item.selected = true;
+		this._selectedItem = item; // set the current item as the selected item for the side navigation
+		this.fireEvent("selection-change", { item });
 	}
 
 	_buildPopoverContent(item) {
@@ -228,7 +200,6 @@ class SideNavigation extends UI5Element {
 		responsivePopover.close();
 	}
 
-
 	get _itemsTree() {
 		return this.getDomRef().querySelector("#ui5-sn-items-tree");
 	}
@@ -236,6 +207,20 @@ class SideNavigation extends UI5Element {
 	get _fixedItemsTree() {
 		return this.getDomRef().querySelector("#ui5-sn-fixed-items-tree");
 	}
+
+	walk(callback) {
+		this.items.forEach(current => {
+			callback(current);
+
+			current.items.forEach(currentSubitem => {
+				callback(currentSubitem);
+			});
+		});
+
+		this.fixedItems.forEach(current => {
+			callback(current);
+		});
+	}
 }
 
 SideNavigation.define();
diff --git a/packages/fiori/test/pages/SideNavigation.html b/packages/fiori/test/pages/SideNavigation.html
index 62d8cfbfaf4d..84725b24d228 100644
--- a/packages/fiori/test/pages/SideNavigation.html
+++ b/packages/fiori/test/pages/SideNavigation.html
@@ -49,12 +49,12 @@
 	<div class="content">
 		<ui5-side-navigation id="sn1">
 			<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-item text="People" 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-item text="Events" 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>

From 63fb073fd78bdbfe46852ca4b551f89f25c40b79 Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladislav.tasev@sap.com>
Date: Mon, 20 Jul 2020 16:01:50 +0300
Subject: [PATCH 23/29] remove _selectedItem

---
 packages/fiori/src/SideNavigation.js | 39 ++++++++--------------------
 1 file changed, 11 insertions(+), 28 deletions(-)

diff --git a/packages/fiori/src/SideNavigation.js b/packages/fiori/src/SideNavigation.js
index 29f381b7291a..0fa1ee002339 100644
--- a/packages/fiori/src/SideNavigation.js
+++ b/packages/fiori/src/SideNavigation.js
@@ -32,11 +32,6 @@ const metadata = {
 		_popoverContent: {
 			type: Object,
 		},
-
-		_selectedItem: {
-			type: Object,
-			defaultValue: null,
-		},
 	},
 	slots: /** @lends sap.ui.webcomponents.fiori.SideNavigation.prototype */ {
 		/**
@@ -130,30 +125,12 @@ class SideNavigation extends UI5Element {
 		]);
 	}
 
-	onBeforeRendering() {
-		console.log('onbefore')
-		this._calculateSelectedItem();
-	}
-
-	_clearSelectedItem() {
-		this.walk(item => {
-			item.selected = false;
-		});
-	}
-
-	_calculateSelectedItem() {
-		this._selectedItem = null;
-		this.walk(item => {
-			if (item.selected) {
-				this._selectedItem = item;
-			}
-		});
-	}
-
 	_setSelectedItem(item) {
-		this._clearSelectedItem();
+		this._walk(current => {
+			current.selected = false;
+		});
 		item.selected = true;
-		this._selectedItem = item; // set the current item as the selected item for the side navigation
+
 		this.fireEvent("selection-change", { item });
 	}
 
@@ -168,6 +145,9 @@ class SideNavigation extends UI5Element {
 	handleTreeItemClick(event) {
 		const treeItem = event.detail.item;
 		const item = treeItem.associatedItem;
+		if (item.selected) {
+			return;
+		}
 
 		if (this.collapsed && item.items.length) {
 			this._buildPopoverContent(item);
@@ -181,6 +161,9 @@ class SideNavigation extends UI5Element {
 	handleListItemClick(event) {
 		const listItem = event.detail.item;
 		const item = listItem.associatedItem;
+		if (item.selected) {
+			return;
+		}
 
 		this._setSelectedItem(item);
 		this.closePicker();
@@ -208,7 +191,7 @@ class SideNavigation extends UI5Element {
 		return this.getDomRef().querySelector("#ui5-sn-fixed-items-tree");
 	}
 
-	walk(callback) {
+	_walk(callback) {
 		this.items.forEach(current => {
 			callback(current);
 

From 49e3ab3bfc6fe98915086502a92b1c7b84700410 Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Tue, 21 Jul 2020 11:45:47 +0300
Subject: [PATCH 24/29] make fixed items nestable & fix event firing for
 collapsed items

---
 packages/fiori/src/SideNavigation.hbs         | 15 ++++++++-
 packages/fiori/src/SideNavigation.js          | 32 +++++++++++++++++--
 packages/fiori/test/pages/SideNavigation.html |  5 ++-
 3 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/packages/fiori/src/SideNavigation.hbs b/packages/fiori/src/SideNavigation.hbs
index 76985f973b9f..9f866b1145ff 100644
--- a/packages/fiori/src/SideNavigation.hbs
+++ b/packages/fiori/src/SideNavigation.hbs
@@ -50,9 +50,22 @@
                         .associatedItem="{{this}}"
                         text="{{this.text}}"
                         index="{{this.index}}"
+                        ?has-children="{{this.items.length}}"
                         ?expanded="{{this.expanded}}"
                         ?selected="{{this.selected}}"
-                    ></ui5-tree-item>
+                    >
+                        {{#unless ../collapsed}}
+                            {{#each this.items}}
+                                <ui5-tree-item
+                                    .associatedItem="{{this}}"
+                                    text="{{this.text}}"
+                                    index="{{this.index}}"
+                                    ?selected="{{this.selected}}"
+                                >
+                                </ui5-tree-item>
+                            {{/each}}
+                        {{/unless}}
+                    </ui5-tree-item>
                 {{/each}}
             </ui5-tree>
        </div>
diff --git a/packages/fiori/src/SideNavigation.js b/packages/fiori/src/SideNavigation.js
index 0fa1ee002339..123a46a71601 100644
--- a/packages/fiori/src/SideNavigation.js
+++ b/packages/fiori/src/SideNavigation.js
@@ -125,6 +125,20 @@ class SideNavigation extends UI5Element {
 		]);
 	}
 
+	onBeforeRendering() {
+		if (this.collapsed) {
+			this._walk(current => {
+				if (current.items) {
+					current.items.forEach(currentSubItem => {
+						if (currentSubItem.selected) {
+							current.selected = true;
+						}
+					});
+				}
+			});
+		}
+	}
+
 	_setSelectedItem(item) {
 		this._walk(current => {
 			current.selected = false;
@@ -145,7 +159,7 @@ class SideNavigation extends UI5Element {
 	handleTreeItemClick(event) {
 		const treeItem = event.detail.item;
 		const item = treeItem.associatedItem;
-		if (item.selected) {
+		if (item.selected && !this.collapsed) {
 			return;
 		}
 
@@ -161,8 +175,18 @@ class SideNavigation extends UI5Element {
 	handleListItemClick(event) {
 		const listItem = event.detail.item;
 		const item = listItem.associatedItem;
+
 		if (item.selected) {
-			return;
+			if (this.collapsed) {
+				const mainItemInPopover = item === this._popoverContent.mainItem && this._popoverContent.mainItemSelected; // Selecting the main item in the popover
+				const subItemsInPopover = item !== this._popoverContent.mainItem && !this._popoverContent.mainItemSelected; // selecting the sub items in the popover
+
+				if (mainItemInPopover || subItemsInPopover) {
+					return;
+				}
+			} else {
+				return;
+			}
 		}
 
 		this._setSelectedItem(item);
@@ -202,6 +226,10 @@ class SideNavigation extends UI5Element {
 
 		this.fixedItems.forEach(current => {
 			callback(current);
+
+			current.items.forEach(currentSubitem => {
+				callback(currentSubitem);
+			});
 		});
 	}
 }
diff --git a/packages/fiori/test/pages/SideNavigation.html b/packages/fiori/test/pages/SideNavigation.html
index 84725b24d228..7414f5f1a7b9 100644
--- a/packages/fiori/test/pages/SideNavigation.html
+++ b/packages/fiori/test/pages/SideNavigation.html
@@ -59,7 +59,10 @@
 				<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="Usefull Links" icon="chain-link">
+				<ui5-side-navigation-sub-item text="Vacation Tool"></ui5-side-navigation-sub-item>
+				<ui5-side-navigation-sub-item text="HR tool"></ui5-side-navigation-sub-item>
+			</ui5-side-navigation-item>
 			<ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
 		</ui5-side-navigation>
 

From 8c0620dcc56543fc118d622a72c33d22a69ef7ce Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Tue, 21 Jul 2020 17:39:32 +0300
Subject: [PATCH 25/29] fix comments

---
 packages/fiori/src/SideNavigation.hbs | 33 +++++++++++-------------
 packages/fiori/src/SideNavigation.js  | 36 +++++++++++----------------
 2 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/packages/fiori/src/SideNavigation.hbs b/packages/fiori/src/SideNavigation.hbs
index 9f866b1145ff..17f97f2c77ff 100644
--- a/packages/fiori/src/SideNavigation.hbs
+++ b/packages/fiori/src/SideNavigation.hbs
@@ -7,21 +7,20 @@
             _toggle-button-end
             @ui5-item-click="{{handleTreeItemClick}}"
         >
-            {{#each items}}
+            {{#each _items}}
                 <ui5-tree-item
-                    icon="{{this.icon}}"
-                    .associatedItem="{{this}}"
-                    text="{{this.text}}"
-                    ?has-children="{{this.items.length}}"
-                    ?expanded="{{this.expanded}}"
+                    icon="{{this.item.icon}}"
+                    .associatedItem="{{this.item}}"
+                    text="{{this.item.text}}"
+                    ?has-children="{{this.item.items.length}}"
+                    ?expanded="{{this.item.expanded}}"
                     ?selected="{{this.selected}}"
                 >
                     {{#unless ../collapsed}}
-                        {{#each this.items}}
+                        {{#each this.item.items}}
                             <ui5-tree-item
                                 .associatedItem="{{this}}"
                                 text="{{this.text}}"
-                                index="{{this.index}}"
                                 ?selected="{{this.selected}}"
                             >
                             </ui5-tree-item>
@@ -44,22 +43,20 @@
                 _toggle-button-end
                 @ui5-item-click="{{handleTreeItemClick}}"
             >
-                {{#each fixedItems}}
+                {{#each _fixedItems}}
                     <ui5-tree-item
-                        icon="{{this.icon}}"
-                        .associatedItem="{{this}}"
-                        text="{{this.text}}"
-                        index="{{this.index}}"
-                        ?has-children="{{this.items.length}}"
-                        ?expanded="{{this.expanded}}"
+                        icon="{{this.item.icon}}"
+                        .associatedItem="{{this.item}}"
+                        text="{{this.item.text}}"
+                        ?has-children="{{this.item.items.length}}"
+                        ?expanded="{{this.item.expanded}}"
                         ?selected="{{this.selected}}"
                     >
                         {{#unless ../collapsed}}
-                            {{#each this.items}}
+                            {{#each this.item.items}}
                                 <ui5-tree-item
-                                    .associatedItem="{{this}}"
+                                    .associatedItem="{{this.item}}"
                                     text="{{this.text}}"
-                                    index="{{this.index}}"
                                     ?selected="{{this.selected}}"
                                 >
                                 </ui5-tree-item>
diff --git a/packages/fiori/src/SideNavigation.js b/packages/fiori/src/SideNavigation.js
index 123a46a71601..8101e36ee64f 100644
--- a/packages/fiori/src/SideNavigation.js
+++ b/packages/fiori/src/SideNavigation.js
@@ -126,17 +126,19 @@ class SideNavigation extends UI5Element {
 	}
 
 	onBeforeRendering() {
-		if (this.collapsed) {
-			this._walk(current => {
-				if (current.items) {
-					current.items.forEach(currentSubItem => {
-						if (currentSubItem.selected) {
-							current.selected = true;
-						}
-					});
-				}
-			});
-		}
+		this._items = this.items.map(item => {
+			return {
+				item,
+				selected: ((item.items.some(subItem => subItem.selected) && this.collapsed) || item.selected),
+			};
+		});
+
+		this._fixedItems = this.fixedItems.map(item => {
+			return {
+				item,
+				selected: ((item.items.some(subItem => subItem.selected) && this.collapsed) || item.selected),
+			};
+		});
 	}
 
 	_setSelectedItem(item) {
@@ -159,6 +161,7 @@ class SideNavigation extends UI5Element {
 	handleTreeItemClick(event) {
 		const treeItem = event.detail.item;
 		const item = treeItem.associatedItem;
+
 		if (item.selected && !this.collapsed) {
 			return;
 		}
@@ -177,16 +180,7 @@ class SideNavigation extends UI5Element {
 		const item = listItem.associatedItem;
 
 		if (item.selected) {
-			if (this.collapsed) {
-				const mainItemInPopover = item === this._popoverContent.mainItem && this._popoverContent.mainItemSelected; // Selecting the main item in the popover
-				const subItemsInPopover = item !== this._popoverContent.mainItem && !this._popoverContent.mainItemSelected; // selecting the sub items in the popover
-
-				if (mainItemInPopover || subItemsInPopover) {
-					return;
-				}
-			} else {
-				return;
-			}
+			return;
 		}
 
 		this._setSelectedItem(item);

From 8ed1eecbb1b7f124e9d18f3195a93335905c5a7c Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladislav.tasev@sap.com>
Date: Thu, 23 Jul 2020 13:11:44 +0300
Subject: [PATCH 26/29] fix bug: cannot select fixed subitem

---
 packages/fiori/src/SideNavigation.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fiori/src/SideNavigation.hbs b/packages/fiori/src/SideNavigation.hbs
index 17f97f2c77ff..22267f8cca4a 100644
--- a/packages/fiori/src/SideNavigation.hbs
+++ b/packages/fiori/src/SideNavigation.hbs
@@ -55,7 +55,7 @@
                         {{#unless ../collapsed}}
                             {{#each this.item.items}}
                                 <ui5-tree-item
-                                    .associatedItem="{{this.item}}"
+                                    .associatedItem="{{this}}"
                                     text="{{this.text}}"
                                     ?selected="{{this.selected}}"
                                 >

From 44f89f10931b573f0e423d5377f8c71218d42808 Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladislav.tasev@sap.com>
Date: Thu, 23 Jul 2020 14:17:04 +0300
Subject: [PATCH 27/29] slots docs, support for .hbs hooks, fix spacers in hbs

---
 packages/fiori/src/SideNavigation.hbs        | 144 ++++++++++---------
 packages/fiori/src/SideNavigation.js         |   9 +-
 packages/fiori/src/themes/SideNavigation.css |   9 +-
 3 files changed, 87 insertions(+), 75 deletions(-)

diff --git a/packages/fiori/src/SideNavigation.hbs b/packages/fiori/src/SideNavigation.hbs
index 22267f8cca4a..369306befcd2 100644
--- a/packages/fiori/src/SideNavigation.hbs
+++ b/packages/fiori/src/SideNavigation.hbs
@@ -1,70 +1,80 @@
 <div class="ui5-sn-root">
-    {{#if items.length}}
-        <ui5-tree
-            id="ui5-sn-items-tree"
-            mode="None"
-            ?_minimal="{{collapsed}}"
-            _toggle-button-end
-            @ui5-item-click="{{handleTreeItemClick}}"
-        >
-            {{#each _items}}
-                <ui5-tree-item
-                    icon="{{this.item.icon}}"
-                    .associatedItem="{{this.item}}"
-                    text="{{this.item.text}}"
-                    ?has-children="{{this.item.items.length}}"
-                    ?expanded="{{this.item.expanded}}"
-                    ?selected="{{this.selected}}"
-                >
-                    {{#unless ../collapsed}}
-                        {{#each this.item.items}}
-                            <ui5-tree-item
-                                .associatedItem="{{this}}"
-                                text="{{this.text}}"
-                                ?selected="{{this.selected}}"
-                            >
-                            </ui5-tree-item>
-                        {{/each}}
-                    {{/unless}}
-                </ui5-tree-item>
-            {{/each}}
-        </ui5-tree>
-    {{/if}}
+	{{> header }}
 
-    {{#if fixedItems.length}}
-       <div>
-            <div class="ui5-sn-bottom-content-border">
-                <span></span>
-            </div>
-            <ui5-tree
-                id="ui5-sn-fixed-items-tree"
-                mode="None"
-                ?_minimal="{{collapsed}}"
-                _toggle-button-end
-                @ui5-item-click="{{handleTreeItemClick}}"
-            >
-                {{#each _fixedItems}}
-                    <ui5-tree-item
-                        icon="{{this.item.icon}}"
-                        .associatedItem="{{this.item}}"
-                        text="{{this.item.text}}"
-                        ?has-children="{{this.item.items.length}}"
-                        ?expanded="{{this.item.expanded}}"
-                        ?selected="{{this.selected}}"
-                    >
-                        {{#unless ../collapsed}}
-                            {{#each this.item.items}}
-                                <ui5-tree-item
-                                    .associatedItem="{{this}}"
-                                    text="{{this.text}}"
-                                    ?selected="{{this.selected}}"
-                                >
-                                </ui5-tree-item>
-                            {{/each}}
-                        {{/unless}}
-                    </ui5-tree-item>
-                {{/each}}
-            </ui5-tree>
-       </div>
-    {{/if}}
+	{{#if items.length}}
+		<ui5-tree
+			id="ui5-sn-items-tree"
+			mode="None"
+			?_minimal="{{collapsed}}"
+			_toggle-button-end
+			@ui5-item-click="{{handleTreeItemClick}}"
+		>
+			{{#each _items}}
+				<ui5-tree-item
+					icon="{{this.item.icon}}"
+					.associatedItem="{{this.item}}"
+					text="{{this.item.text}}"
+					?has-children="{{this.item.items.length}}"
+					?expanded="{{this.item.expanded}}"
+					?selected="{{this.selected}}"
+				>
+					{{#unless ../collapsed}}
+						{{#each this.item.items}}
+							<ui5-tree-item
+								.associatedItem="{{this}}"
+								text="{{this.text}}"
+								?selected="{{this.selected}}"
+							>
+							</ui5-tree-item>
+						{{/each}}
+					{{/unless}}
+				</ui5-tree-item>
+			{{/each}}
+		</ui5-tree>
+	{{/if}}
+
+	<div class="ui5-sn-spacer"></div>
+
+	{{#if fixedItems.length}}
+	   <div>
+			<div class="ui5-sn-bottom-content-border">
+				<span></span>
+			</div>
+			<ui5-tree
+				id="ui5-sn-fixed-items-tree"
+				mode="None"
+				?_minimal="{{collapsed}}"
+				_toggle-button-end
+				@ui5-item-click="{{handleTreeItemClick}}"
+			>
+				{{#each _fixedItems}}
+					<ui5-tree-item
+						icon="{{this.item.icon}}"
+						.associatedItem="{{this.item}}"
+						text="{{this.item.text}}"
+						?has-children="{{this.item.items.length}}"
+						?expanded="{{this.item.expanded}}"
+						?selected="{{this.selected}}"
+					>
+						{{#unless ../collapsed}}
+							{{#each this.item.items}}
+								<ui5-tree-item
+									.associatedItem="{{this}}"
+									text="{{this.text}}"
+									?selected="{{this.selected}}"
+								>
+								</ui5-tree-item>
+							{{/each}}
+						{{/unless}}
+					</ui5-tree-item>
+				{{/each}}
+			</ui5-tree>
+	   </div>
+	{{/if}}
+
+	{{> footer }}
 </div>
+
+{{#*inline header}}{{/inline}}
+
+{{#*inline footer}}{{/inline}}
diff --git a/packages/fiori/src/SideNavigation.js b/packages/fiori/src/SideNavigation.js
index 8101e36ee64f..03cb2088ae57 100644
--- a/packages/fiori/src/SideNavigation.js
+++ b/packages/fiori/src/SideNavigation.js
@@ -35,7 +35,9 @@ const metadata = {
 	},
 	slots: /** @lends sap.ui.webcomponents.fiori.SideNavigation.prototype */ {
 		/**
-		 * Defines the items in the <code>ui5-side-navigation</code>.
+		 * Defines the main items of the <code>ui5-side-navigation</code>. Use the <code>ui5-side-navigation-item</code> component
+		 * for the top-level items, and the <code>ui5-side-navigation-subitem</code> component for second-level items, nested
+		 * inside the items.
 		 *
 		 * @public
 		 * @slot
@@ -47,7 +49,10 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the fixed items in the bottom of the <code>ui5-side-navigation</code>.
+		 * Defines the fixed items at the bottom of the <code>ui5-side-navigation</code>. Use the <code>ui5-side-navigation-item</code> component
+		 * for the fixed items, and optionally the <code>ui5-side-navigation-subitem</code> component to provide second-level items inside them.
+		 *
+		 * <b>Note:</b> In order to achieve the best user experience, it is recommended that you keep the fixed items "flat" (do not pass sub-items)
 		 *
 		 * @public
 		 * @slot
diff --git a/packages/fiori/src/themes/SideNavigation.css b/packages/fiori/src/themes/SideNavigation.css
index 4759f8815a94..9bbf2c1702e7 100644
--- a/packages/fiori/src/themes/SideNavigation.css
+++ b/packages/fiori/src/themes/SideNavigation.css
@@ -30,12 +30,9 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     background: var( --sapList_Background);
 }
 
-.ui5-sn-flex-wrapper {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-}
\ No newline at end of file
+.ui5-sn-spacer {
+    flex: auto;
+}

From 23f5b50341a5538a4efa89c4774373f10746f4ea Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladislav.tasev@sap.com>
Date: Thu, 23 Jul 2020 14:18:41 +0300
Subject: [PATCH 28/29] sample fix

---
 .../fiori/test/samples/SideNavigation.sample.html    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/fiori/test/samples/SideNavigation.sample.html b/packages/fiori/test/samples/SideNavigation.sample.html
index 1f2f44c86e1e..eb3904e85b05 100644
--- a/packages/fiori/test/samples/SideNavigation.sample.html
+++ b/packages/fiori/test/samples/SideNavigation.sample.html
@@ -19,17 +19,17 @@ <h3>Side Navigation in Application</h3>
 
 		<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-item text="People" 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-item text="Events" 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="Useful 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>
 
@@ -51,17 +51,17 @@ <h3>Side Navigation in Application</h3>
 
 <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-item text="People" 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-item text="Events" 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="Useful 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>
 

From d632e4c5196258af3118df4ab51c897a14cbfaba Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladislav.tasev@sap.com>
Date: Thu, 23 Jul 2020 14:22:58 +0300
Subject: [PATCH 29/29] add min height to the spacer for scenarios with many
 items

---
 packages/fiori/src/themes/SideNavigation.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/fiori/src/themes/SideNavigation.css b/packages/fiori/src/themes/SideNavigation.css
index 9bbf2c1702e7..66e9173010e2 100644
--- a/packages/fiori/src/themes/SideNavigation.css
+++ b/packages/fiori/src/themes/SideNavigation.css
@@ -35,4 +35,5 @@
 
 .ui5-sn-spacer {
     flex: auto;
+    min-height: 3rem;
 }