Method _updateOverflowItems

packages/fiori/src/SideNavigation.ts:517–587

()

	}

	_updateOverflowItems() {
		const domRef = this.getDomRef();
		if (!this.collapsed || !domRef) {
			return null;
		}

		const overflowItem = this._overflowItem!;
		const flexibleContentDomRef: HTMLElement = domRef.querySelector(".ui5-sn-flexible")!;
		if (!overflowItem) {
			return null;
		}

		overflowItem.classList.add("ui5-sn-item-hidden");

		const overflowItems = this.overflowItems;

		let itemsHeight = overflowItems.reduce<number>((sum, itemRef) => {
			if (!itemRef) {
				return sum;
			}
			itemRef.classList.remove("ui5-sn-item-hidden");
			return sum + itemRef.offsetHeight;
		}, 0);

		const { paddingTop, paddingBottom } = window.getComputedStyle(flexibleContentDomRef);
		const listHeight = flexibleContentDomRef?.offsetHeight - parseInt(paddingTop) - parseInt(paddingBottom);

		if (itemsHeight <= listHeight) {
			return;
		}

		overflowItem.classList.remove("ui5-sn-item-hidden");

		itemsHeight = overflowItem.offsetHeight;

		const selectedItem = overflowItems.filter(isInstanceOfSideNavigationSelectableItemBase).find(item => item._selected);

		if (selectedItem) {
			const selectedItemDomRef = selectedItem.getDomRef();

			if (selectedItemDomRef) {
				const { marginTop, marginBottom } = window.getComputedStyle(selectedItemDomRef);
				itemsHeight += selectedItemDomRef.offsetHeight + parseFloat(marginTop) + parseFloat(marginBottom);
			}
		}

		overflowItems.forEach(item => {
			if (!item || item === selectedItem) {
				return;
			}

			let itemDomRef;

			if (isInstanceOfSideNavigationItemBase(item) && item.getDomRef()) {
				itemDomRef = item.getDomRef();
			} else {
				itemDomRef = item;
			}