@sapui5/sap.ushell 1.132.0 → 1.133.0

package/src/main/js/sap/ushell/components/shell/SideNavigation/Component.js

@@ -1,10 +1,16 @@
-// Copyright (c) 2009-2023 SAP SE, All Rights Reserved
+// Copyright (c) 2009-2024 SAP SE, All Rights Reserved
 sap.ui.define([
     "sap/ui/core/ComponentContainer",
     "sap/ui/core/mvc/XMLView",
     "sap/ui/core/UIComponent",
-    "sap/ushell/Container"
-], function (ComponentContainer, XMLView, UIComponent, Container) {
+    "sap/ushell/Container",
+    "sap/ui/core/Fragment",
+    "sap/ushell/Config",
+    "sap/ui/model/json/JSONModel",
+    "sap/tnt/NavigationListItem",
+    "sap/ui/core/CustomData",
+    "sap/ushell/utils/WindowUtils"
+], function (ComponentContainer, XMLView, UIComponent, Container, Fragment, Config, JSONModel, NavigationListItem, CustomData, WindowUtils) {
     "use strict";
 
     return UIComponent.extend("sap.ushell.components.shell.SideNavigation.Component", {
@@ -14,44 +20,334 @@ sap.ui.define([
             interfaces: ["sap.ui.core.IAsyncContentCreation"]
         },
         init: function () {
+            this.sSideNavigationMode = Config.last("/core/sideNavigation/mode");
+            this.sSideNavigationListItemIcon = Config.last("/core/sideNavigation/configuration/spaces/defaultIcon");
+            this.runAsOwner(() => {
+                this.oMainViewPromise = XMLView.create({
+                    viewName: "sap.ushell.components.shell.SideNavigation.view.Main"
+                });
+                this.oSideNavigationViewPromise = XMLView.create({
+                    viewName: "sap.ushell.components.shell.SideNavigation.view.SideNavigation"
+                });
+            });
             UIComponent.prototype.init.apply(this, arguments);
+            this.oResourceBundle = this.getModel("i18n").getResourceBundle();
 
-            this.oMenuModelPromise = Container.getServiceAsync("Menu")
-                .then((oMenuService) => {
-                    return Promise.all([
-                        oMenuService.getMenuModel(),
-                        oMenuService.isSideNavigationEnabled()
-                    ]);
-                })
-                .then((aResults) => {
-                    const oMenuModel = aResults[0];
-                    const bSideNavigationEnabled = aResults[1];
-
-                    this.setModel(oMenuModel, "sideNavigation");
-
-                    if (bSideNavigationEnabled) {
-                        return this.oViewPromise.then(() => {
-                            const oSideNavigation = new ComponentContainer({
-                                id: "SideNavigationComponentContainer",
-                                height: "100%",
-                                component: this
-                            });
-                            Container.getRendererInternal().setSideNavigation(oSideNavigation);
-                        });
+            if (this.sSideNavigationMode === "Docked") {
+                Promise.all([this.oMainViewPromise, this.oSideNavigationViewPromise]).then((aResult) => {
+                    const [oMainView, oSideNavigationView] = aResult;
+                    oMainView.byId("mainLayout")?.addItem(oSideNavigationView);
+                    const oSideNavigationComponentContainer = new ComponentContainer({
+                        id: "SideNavigationComponentContainer",
+                        height: "100%",
+                        component: this
+                    });
+
+                    Container.getRendererInternal().setSideNavigation(oSideNavigationComponentContainer);
+                });
+            }
+            this._addHamburgerButton();
+            this.oSideNavigationModelPrepared = new Promise((resolve) => {
+                this.fnResolveSideNavigationModel = resolve;
+            });
+            this._prepapareSideNavigationModel();
+
+            const oViewConfiguration = new JSONModel({
+                //We need to initialize with a non-empty key to avoid flickering of the selection.
+                selectedKey: "NONE",
+                enableSideNavigation: true,
+                expanded: true,
+                renderMode: this.sSideNavigationMode
+            });
+            Config.on("/core/sideNavigation/mode").do((value) => {
+                this.sSideNavigationMode = value;
+                oViewConfiguration.setProperty("/renderMode", value);
+            });
+
+            this.setModel(oViewConfiguration, "viewConfiguration");
+        },
+
+        /**
+        * Prepares the side navigation model for the application.
+        *
+        * This method initializes the side navigation model and populates it with various items
+        * based on the configuration settings. These items include:
+        * - Recently Used items
+        * - My Spaces
+        * - App Finder
+        *
+        * @returns {undefined}
+        *
+        * @private
+        * @since 1.133.0
+        */
+        _prepapareSideNavigationModel: function () {
+            const oSideNavigationModel = new JSONModel({
+                items: [],
+                fixedItems: []
+            });
+            let menuTitle;
+            // Recent Activity
+            if (Config.last("/core/sideNavigation/configuration/recentActivity/enabled")) {
+                const aItems = oSideNavigationModel.getProperty("/items");
+                menuTitle = this.oResourceBundle.getText("ShellBar.SideNavigation.Recents.Menu.Title");
+                aItems.push({
+                    title: menuTitle,
+                    type: "item", // item | group
+                    items: {
+                        path: "recentActivity>/",
+                        template: new NavigationListItem({text: "{recentActivity>title}"})
+                    },
+                    icon: "sap-icon://create-entry-time"
+                });
+                oSideNavigationModel.setProperty("/items", aItems);
+                // this._prepareRecentActivityModel();
+            }
+
+            // My Spaces
+            if (Config.last("/core/sideNavigation/configuration/spaces/enabled")) {
+                const aItems = oSideNavigationModel.getProperty("/items");
+                menuTitle = this.oResourceBundle.getText("ShellBar.SideNavigation.Spaces.Menu.Title");
+                aItems.push({
+                    title: menuTitle,
+                    type: "group", // item | group
+                    items: {
+                        path: "spaces>/",
+                        factory: this.spacesModelItemFactory.bind(this)
+                    }
+                });
+                oSideNavigationModel.setProperty("/items", aItems);
+                this._prepareSpacesModel();
+            }
+
+            // fixed area
+            if (Config.last("/core/sideNavigation/configuration/allApps/enabled")) {
+                const aItems = oSideNavigationModel.getProperty("/fixedItems");
+                menuTitle = this.oResourceBundle.getText("ShellBar.SideNavigation.AppFinder.Menu.Title");
+                aItems.push({
+                    title: menuTitle,
+                    href: "#Shell-appfinder",
+                    type: "item", // item | group
+                    icon: "sap-icon://display"
+                });
+                oSideNavigationModel.setProperty("/fixedItems", aItems);
+            }
+
+            this.setModel(oSideNavigationModel);
+        },
+
+        /**
+        * Prepares the spaces model by fetching data from the menu service.
+        *
+        * This method retrieves spaces data from the menu service and sets it as the model spaces.
+        * After setting the model, it calls the `fnResolveSideNavigationModel` to finalize the side navigation model preparation.
+        *
+        * @async
+        * @returns {Promise<undefined>}
+        *
+        * @private
+        * @since 1.133.0
+        */
+
+        _prepareSpacesModel: async function () {
+            // fetch spaces data from menu service
+            const oMenuService = await Container.getServiceAsync("Menu");
+            const oSpacesModel = await oMenuService.getMenuModel();
+            this.setModel(oSpacesModel, "spaces");
+            this.fnResolveSideNavigationModel();
+        },
+
+        /**
+        * Factory function to create NavigationListItem for the spaces model.
+        *
+        * This method creates a new `NavigationListItem` instance for the given item ID, applying the spaces model data to it.
+        * The created item includes properties like key, text, enabled state, custom data, icon, selection handler, and nested items.
+        *
+        * @param {string} sId - The ID of the item to be created.
+        * @returns {NavigationListItem} The created `NavigationListItem` instance.
+        *
+        * @private
+        * @since 1.133.0
+        */
+        spacesModelItemFactory: function (sId) {
+            return new NavigationListItem(sId, {
+                    key: "{spaces>uid}", // is not unique if used multiple times in a hierarchy
+                    text: "{spaces>title}",
+                    enabled: "{viewConfiguration>/enableSideNavigation}",
+                    customData: [new CustomData({
+                        key: "help-id",
+                        value: "{= 'MenuEntry-' + ${spaces>help-id}}",
+                        writeToDom: "{= !!${spaces>help-id}}"
+                    })],
+                    icon: { path: "spaces>icon", formatter: (sIcon) => sIcon || this.sSideNavigationListItemIcon },
+                    select: this.onSideNavigationItemSelection.bind(this),
+                    items: {
+                        path: "spaces>menuEntries",
+                        template: new NavigationListItem({
+                            key: "{spaces>uid}", // is not unique if used multiple times in a hierarchy
+                            text: "{spaces>title}",
+                            enabled: "{viewConfiguration>/enableSideNavigation}",
+                            customData: [new CustomData({
+                                key: "help-id",
+                                value: "{= 'MenuEntry-' + ${spaces>help-id}}",
+                                writeToDom: "{= !!${spaces>help-id}}"
+                            })],
+                            select: this.onSideNavigationItemSelection.bind(this),
+                            icon: "{spaces>icon}"
+                        })
                     }
+                });
+        },
+
+        /**
+         * Triggered whenever a user selects a side navigation item.
+         *
+         * @param {sap.base.Event} oEvent The 'itemSelect' event.
+         *
+         * @private
+         * @since 1.132.0
+         */
+        onSideNavigationItemSelection: function (oEvent) {
+            const oDestinationIntent = oEvent.getParameter("item").getBindingContext("spaces").getProperty();
+
+            if (oDestinationIntent.type === "IBN") {
+                this._performNavigation(oDestinationIntent.target);
+            } else if (oDestinationIntent.type === "URL") {
+                this._openURL(oDestinationIntent.target);
+            }
+
+            if (this.sSideNavigationMode === "Popover") {
+                this.oPopover.close();
+            }
+        },
+
+        /**
+        * Performs navigation to the specified destination target using the Navigation service.
+        *
+        * @param {object} oDestinationTarget The destination target object containing the navigation details.
+        * @returns {Promise} A promise that resolves when the navigation is completed.
+        *
+        * @private
+        * @since 1.132.0
+        */
+        _performNavigation: async function (oDestinationTarget) {
+            return Container.getServiceAsync("Navigation").then(function (oNavigationService) {
+                const oParams = {};
+                oDestinationTarget.parameters.forEach(function (oParameter) {
+                    if (oParameter.name && oParameter.value) {
+                        oParams[oParameter.name] = [oParameter.value];
+                    }
+                });
+
+                oNavigationService.navigate({
+                    target: {
+                        semanticObject: oDestinationTarget.semanticObject,
+                        action: oDestinationTarget.action
+                    },
+                    params: oParams
+                });
             });
         },
 
-        getMenuModelPromise: function () {
-            return this.oMenuModelPromise;
+        /**
+         * Opens the provided URL in a new browser tab.
+         *
+         * @param {object} destinationTarget
+         *  The destination target which is used to determine the URL which should be
+         *  opened in a new browser tab
+         *
+         * @private
+         * @since 1.132.0
+         */
+        _openURL: function (destinationTarget) {
+            WindowUtils.openURL(destinationTarget.url, "_blank");
         },
 
         createContent: function () {
-            this.oViewPromise = XMLView.create({
-                viewName: "sap.ushell.components.shell.SideNavigation.view.SideNavigation"
-            });
+            return this.oMainViewPromise;
+        },
 
-            return this.oViewPromise;
+        /**
+         * Adds (attach) the hamburger button to the shell bar.
+         * Shows the button on the home page and for all apps.
+         *
+         * @since 1.132.0
+         * @private
+         * @async
+         */
+        _addHamburgerButton: async function () {
+            this.headerHamburgerButtonItemStart = await this._hamburgerButtonFatory();
+            this.headerHamburgerButtonItemStart.showOnHome();
+            this.headerHamburgerButtonItemStart.showForAllApps();
+        },
+
+        /**
+         * Handles the press event of the side navigation button (hamburger button) in the shell bar.
+         * Expands or collapses the side navigation based on its current state.
+         * @param {object} oEvent The press event object.
+         * @since 1.133.0
+         */
+        onCollapseSideNavigationPress: async function (oEvent) {
+            switch (this.sSideNavigationMode) {
+                case "Docked":
+                    const oViewConfigModel = this.getModel("viewConfiguration");
+                    oViewConfigModel.setProperty("/expanded", !oViewConfigModel.getProperty("/expanded"));
+                    break;
+                case "Popover":
+                    const oButton = oEvent.getSource();
+                    const oView = this.getRootControl();
+                    if (!this._pPopover) {
+                        this._pPopover = Fragment.load({
+                            id: oView.createId("popoverMenuContainer"),
+                            name: "sap.ushell.components.shell.SideNavigation.fragment.Popover",
+                            controller: oView.getController()
+                        }).then((oPopover) => {
+                            this.oMainViewPromise.then(function (oMainView) {
+                                oMainView.addDependent(oPopover);
+                            });
+                            this.oSideNavigationViewPromise.then(function (oRootView) {
+                                oPopover.addContent(oRootView);
+                            });
+                            this.oPopover = oPopover;
+                            return oPopover;
+                        });
+                    }
+
+                    this._pPopover.then(function (oPopover) {
+                        oPopover.openBy(oButton);
+                    });
+                    break;
+                default:
+                    throw new Error(`Unhandled side navigation mode: ${this.sSideNavigationMode}`);
+            }
+        },
+
+        /**
+        * Creates a header item for the side navigation button (hamburger button) in the shell bar.
+        * The button is used to expand or collapse the side navigation.
+        * @returns {Promise<sap.ushell.services.FrameBoundExtension.Item>} A promise that resolves to the newly created header item.
+        *
+        * @see sap.ushell.services.FrameBoundExtension.Item
+        * @async
+        * @since 1.132.0
+        * @private
+        */
+        _hamburgerButtonFatory: async function () {
+            const ExtensionService = await Container.getServiceAsync("FrameBoundExtension");
+            const oHeaderItem = await ExtensionService.createHeaderItem({
+                id: "sideMenuExpandCollapseBtn",
+                ariaHaspopup: "dialog",
+                icon: "sap-icon://menu2",
+                press: this.onCollapseSideNavigationPress.bind(this),
+                tooltip: "{= ${viewConfiguration>/renderMode} === 'Popover' ? ${i18n>ShellBar.SideNavigation.Button.Open.Tooltip}" +
+                    " : (${viewConfiguration>/expanded} ? ${i18n>ShellBar.SideNavigation.Button.Collapse.Tooltip} : ${i18n>ShellBar.SideNavigation.Button.Expand.Tooltip})}"
+            }, {
+                position: "begin"
+            });
+            const oHeaderItemControl = await oHeaderItem.getControl();
+            oHeaderItemControl.setModel(this.getModel("i18n"), "i18n");
+            oHeaderItemControl.setModel(this.getModel("viewConfiguration"), "viewConfiguration");
+            return oHeaderItem;
         }
     });
 });

package/src/main/js/sap/ushell/components/shell/SideNavigation/controller/SideNavigation.controller.js

@@ -1,28 +1,24 @@
-// Copyright (c) 2009-2023 SAP SE, All Rights Reserved
+// Copyright (c) 2009-2024 SAP SE, All Rights Reserved
 sap.ui.define([
     "sap/base/util/ObjectPath",
     "sap/tnt/NavigationListItem",
-    "sap/ui/core/CustomData",
+    "sap/tnt/NavigationListGroup",
     "sap/ui/core/EventBus",
     "sap/ui/core/mvc/Controller",
     "sap/ui/Device",
-    "sap/ui/model/json/JSONModel",
     "sap/ushell/Container",
     "sap/ushell/EventHub",
-    "sap/ushell/utils/UrlParsing",
-    "sap/ushell/utils/WindowUtils"
+    "sap/ushell/utils/UrlParsing"
 ], function (
     ObjectPath,
     NavigationListItem,
-    CustomData,
+    NavigationListGroup,
     EventBus,
     Controller,
     Device,
-    JSONModel,
     Container,
     EventHub,
-    UrlParsing,
-    WindowUtils
+    UrlParsing
 ) {
     "use strict";
 
@@ -50,6 +46,7 @@ sap.ui.define([
          * @since 1.132.0
          */
         onInit: function () {
+            this.sNoneSelectedKey = "NONE";
             const oSideNavigation = this.byId("sideNavigation");
 
             if (Device.support.touch) {
@@ -58,26 +55,23 @@ sap.ui.define([
                 oSideNavigation.addStyleClass("sapUiSizeCompact");
             }
 
+            if (this.getOwnerComponent().getModel().getProperty("/items").length > 1) {
+                oSideNavigation.getItem().bindAggregation("items",
+                    { path: "/items", factory: this._sideNavigationFactory });
+            } else {
+                oSideNavigation.getItem().bindAggregation("items",
+                    { path: "spaces>/", factory: this.getOwnerComponent().spacesModelItemFactory.bind(this.getOwnerComponent()) });
+            }
+
             this.oContainerRouter = Container.getRendererInternal().getRouter();
 
             this.oContainerRouter.getRoute("home").attachMatched(this._selectIndexAfterRouteChange, this);
             this.oContainerRouter.getRoute("openFLPPage").attachMatched(this._selectIndexAfterRouteChange, this);
             this.oContainerRouter.getRoute("openWorkPage").attachMatched(this._selectIndexAfterRouteChange, this);
 
-            this._addHamburgerButton();
-
             this.oEnableMenuBarNavigationListener = EventHub.on("enableMenuBarNavigation").do((bEnableSideNavigation) => this.onEnableSideNavigation(bEnableSideNavigation));
             EventBus.getInstance().subscribe("sap.ushell", "appOpened", this.deselectSideNavigationEntryOnAppOpened, this);
 
-            this.sNoneSelectedKey = "NONE";
-            const oViewConfiguration = new JSONModel({
-                //We need to initialize with a non-empty key to avoid flickering of the selection.
-                selectedKey: this.sNoneSelectedKey,
-                enableSideNavigation: true
-            });
-
-            this.getView().setModel(oViewConfiguration, "viewConfiguration");
-
             this.oGetDefaultSpacePromise = Container.getServiceAsync("Menu")
                 .then(function (oMenuService) {
                     return oMenuService.getDefaultSpace();
@@ -113,27 +107,6 @@ sap.ui.define([
             this.getView().getModel("viewConfiguration").setProperty("/enableSideNavigation", bEnableSideNavigation);
         },
 
-        /**
-         * Triggered whenever a user selects a side navigation item.
-         *
-         * @param {sap.base.Event} oEvent The 'itemSelect' event.
-         *
-         * @private
-         * @since 1.132.0
-         */
-        onSideNavigationItemSelection: function (oEvent) {
-            const sSelectedNavigationEntryKey = oEvent.getParameter("item").getProperty("key");
-            const oSideNavigationModel = this.getView().getModel("sideNavigation");
-            let aSideNavigationEntries = oSideNavigationModel.getProperty("/");
-            const oDestinationIntent = this._getNestedSideNavigationEntryByUid(aSideNavigationEntries, sSelectedNavigationEntryKey);
-
-            if (oDestinationIntent.type === "IBN") {
-                this._performNavigation(oDestinationIntent.target);
-            } else if (oDestinationIntent.type === "URL") {
-                this._openURL(oDestinationIntent.target);
-            }
-        },
-
         /**
         * Recursively searches for a nested side navigation entry that satisfies the provided check function.
         *
@@ -193,84 +166,25 @@ sap.ui.define([
         * @since 1.132.0
         */
         _sideNavigationFactory: function (sId, oContext) {
-            let sIcon = oContext.getProperty("icon");
-            // Provide icon fallback only for Top Level Menu Entries
-            if (!sIcon && this._isTopLevelEntry(oContext)) {
-                sIcon = "sap-icon://document-text";
-            }
-
-            const oNewItem = new NavigationListItem(sId, {
-                key: "{sideNavigation>uid}", // is not unique if used multiple times in a hierarchy
-                icon: sIcon,
-                text: "{sideNavigation>title}",
-                enabled: "{viewConfiguration>/enableSideNavigation}",
-                items: {
-                    path: "sideNavigation>menuEntries",
-                    factory: this._sideNavigationFactory.bind(this)
-                },
-                customData: [new CustomData({
-                    key: "help-id",
-                    value: "{= 'MenuEntry-' + ${sideNavigation>help-id}}",
-                    writeToDom: "{= !!${sideNavigation>help-id}}"
-                })]
-            });
-
-            return oNewItem;
-        },
-
-        /**
-        * Checks for top level menu entries.
-        *
-        * @param {oContext} oContext The context containing the menu entry path.
-        * @returns {boolean} True if top level menu entry.
-        *
-        * @private
-        * @since 1.132.0
-        */
-        _isTopLevelEntry: function (oContext) {
-            return oContext.getPath().split("/").length === 2;
-        },
+            let oNewItem;
 
-        /**
-        * Performs navigation to the specified destination target using the Navigation service.
-        *
-        * @param {object} oDestinationTarget The destination target object containing the navigation details.
-        * @returns {Promise} A promise that resolves when the navigation is completed.
-        *
-        * @private
-        * @since 1.132.0
-        */
-        _performNavigation: function (oDestinationTarget) {
-            return Container.getServiceAsync("Navigation").then(function (oNavigationService) {
-                const oParams = {};
-                oDestinationTarget.parameters.forEach(function (oParameter) {
-                    if (oParameter.name && oParameter.value) {
-                        oParams[oParameter.name] = [oParameter.value];
-                    }
-                });
-
-                oNavigationService.navigate({
-                    target: {
-                        semanticObject: oDestinationTarget.semanticObject,
-                        action: oDestinationTarget.action
-                    },
-                    params: oParams
+            if (oContext.getProperty("type") === "group") {
+                oNewItem = new NavigationListGroup(sId, {
+                    text: "{title}"
                 });
+            } else {
+                oNewItem = new NavigationListItem(sId, {
+                text: "{title}",
+                href: "{href}",
+                icon: "{icon}"
             });
-        },
+            }
 
-        /**
-         * Opens the provided URL in a new browser tab.
-         *
-         * @param {object} destinationTarget
-         *  The destination target which is used to determine the URL which should be
-         *  opened in a new browser tab
-         *
-         * @private
-         * @since 1.132.0
-         */
-        _openURL: function (destinationTarget) {
-            WindowUtils.openURL(destinationTarget.url, "_blank");
+            if (oContext.getProperty("items")) {
+                oNewItem.bindAggregation("items", oContext.getProperty("items"));
+            }
+
+            return oNewItem;
         },
 
         /**
@@ -287,18 +201,18 @@ sap.ui.define([
         * @since 1.132.0
         */
         _selectIndexAfterRouteChange: function () {
-            const oViewConfigModel = this.getView().getModel("viewConfiguration");
+            const oViewConfigModel = this.getOwnerComponent().getModel("viewConfiguration");
 
             return Promise.all([
                 this.oGetDefaultSpacePromise,
-                this.getOwnerComponent().oMenuModelPromise
+                this.getOwnerComponent().oSideNavigationModelPrepared
             ]).then((aResults) => {
                 const oDefaultSpace = aResults[0];
 
                 let sSelectedMenuKey;
                 const sHash = window.hasher.getHash();
                 const oHashParts = UrlParsing.parseShellHash(sHash);
-                const aSideNavigationEntries = this.getView().getModel("sideNavigation").getProperty("/");
+                const aSideNavigationEntries = this.getOwnerComponent().getModel("spaces").getProperty("/");
 
                 if (oHashParts.semanticObject === "Shell" && oHashParts.action === "home") {
                     // Determine the user's default page and initiate loading
@@ -369,54 +283,6 @@ sap.ui.define([
             return oSpaceIdParam !== false && oPageIdParam !== false;
         },
 
-        onCollapseSideNavigationPress: function () {
-            const oSideNavigation = this.getView().byId("sideNavigation");
-            oSideNavigation.setExpanded(!oSideNavigation.getExpanded());
-        },
-
-        /**
-        * Creates a header item for the side navigation button (hamburger button) in the shell bar.
-        * The button is used to expand or collapse the side navigation.
-        * @returns {Promise<sap.ushell.services.Extension.Item>} A promise that resolves to the newly created header item.
-        *
-        * @see sap.ushell.services.Extension#createHeaderItem
-        * @async
-        * @since 1.132.0
-        * @private
-        */
-        _hamburgerButtonFatory: async function () {
-            const oResourceBundle = this.getOwnerComponent().getModel("i18n").getResourceBundle();
-            const sTooltipSideMenu = oResourceBundle.getText("ShellBar.SideNavigation.Button.Tooltip");
-            const sTitle = oResourceBundle.getText("ShellBar.SideNavigation.Button.Text");
-            const Extension = await Container.getServiceAsync("Extension");
-
-            return await Extension.createHeaderItem({
-                id: "sideMenuExpandCollapseBtn",
-                ariaLabel: sTooltipSideMenu,
-                ariaHaspopup: "dialog",
-                icon: "sap-icon://menu2",
-                tooltip: sTooltipSideMenu,
-                text: sTitle,
-                press: this.onCollapseSideNavigationPress.bind(this)
-            }, {
-                position: "begin"
-            });
-        },
-
-         /**
-         * Adds (attach) the hamburger button to the shell bar.
-         * Shows the button on the home page and for all apps.
-         *
-         * @since 1.132.0
-         * @private
-         * @async
-         */
-        _addHamburgerButton: async function () {
-            this.headerHamburgerButtonItemStart = await this._hamburgerButtonFatory();
-            this.headerHamburgerButtonItemStart.showOnHome();
-            this.headerHamburgerButtonItemStart.showForAllApps();
-        },
-
         /**
          * UI5 lifecycle method which is called upon controller destruction.
          * It detaches the router events and config listeners.

package/src/main/js/sap/ushell/components/shell/SideNavigation/fragment/Popover.fragment.xml

@@ -0,0 +1,13 @@
+<core:FragmentDefinition
+    xmlns="sap.m"
+    xmlns:core="sap.ui.core"
+    xmlns:mvc="sap.ui.core.mvc"
+    xmlns:tnt="sap.tnt"
+    core:require="{
+        mLibrary: 'sap/m/library'
+    }">
+    <Popover
+        showHeader="false"
+        placement="Bottom" />
+
+</core:FragmentDefinition>