feat(ui5-navigation-layout): add ui5-navigation-layout component

packages/fiori/src/NavigationLayout.hbs

@@ -0,0 +1,14 @@
+<div class="ui5-nl-root">
+	<header
+		class="ui5-nl-header">
+		<slot name="header"></slot>
+	</header>
+	<section class="ui5-nl-section">
+		<aside class="ui5-nl-aside">
+			<slot name="sideContent"></slot>
+		</aside>
+		<div class="ui5-nl-content">
+			<slot></slot>
+		</div>
+	</section>
+</div>

packages/fiori/src/NavigationLayout.ts

@@ -0,0 +1,106 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import browserScrollbarCSS from "@ui5/webcomponents/dist/generated/themes/BrowserScrollbar.css.js";
+import {
+	isPhone,
+	isTablet,
+	isCombi,
+} from "@ui5/webcomponents-base/dist/Device.js";
+import type SideNavigation from "./SideNavigation.js";
+
+// Template
+import NavigationLayoutTemplate from "./generated/templates/NavigationLayoutTemplate.lit.js";
+
+// Styles
+import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
+
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-tool-page` is a container ...
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/NavigationLayout.js";`
+ * @constructor
+ * @extends UI5Element
+ * @since 2.1.0
+ * @public
+ */
+@customElement({
+	tag: "ui5-navigation-layout",
+	languageAware: true,
+	renderer: litRender,
+	styles: [
+		browserScrollbarCSS,
+		NavigationLayoutCss,
+	],
+	template: NavigationLayoutTemplate,
+})
+class NavigationLayout extends UI5Element {
+	_sideCollapsed = isPhone() || (isTablet() && !isCombi());
+
+	/**
+	 * @private
+	 */
+	@property({ type: Boolean })
+	isPhone = isPhone();
+
+	/**
+	 * @private
+	 */
+	@property({ type: Boolean })
+	isTablet = isTablet() && !isCombi();
+
+	/**
+	 * Indicates whether if the side menu is collapsed.
+	 * @public
+	 */
+	@property({ type: Boolean })
+	set sideCollapsed(value: boolean) {
+		this._sideCollapsed = value;
+
+		if (isPhone()) {
+			return;
+		}
+
+		const sideNavigation = this.querySelector("[ui5-side-navigation]") as SideNavigation;
+
+		if (sideNavigation) {
+			sideNavigation.collapsed = value;
+		}
+	}
+
+	get sideCollapsed() {
+		return this._sideCollapsed;
+	}
+
+	/**
+	 * Defines the header HTML Element.
+	 * @public
+	 */
+	@slot()
+	header!: Array<HTMLElement>;
+
+	/**
+	 * Defines the side content HTML Element.
+	 * @public
+	 */
+	@slot()
+	sideContent!: Array<HTMLElement>;
+
+	/**
+	 * Defines the content HTML Element.
+	 * @public
+	 */
+	@slot({ type: HTMLElement, "default": true })
+	content!: Array<HTMLElement>;
+}
+
+NavigationLayout.define();
+
+export default NavigationLayout;

packages/fiori/src/SideNavigation.ts

@@ -196,7 +196,7 @@ class SideNavigation extends UI5Element {
 	 * @private
 	 */
 	@property({ type: Boolean })
-	isTouchDevice = false;;
+	isTouchDevice = false;
 
 	static i18nBundle: I18nBundle;
 

packages/fiori/src/bundle.esm.ts

@@ -34,6 +34,7 @@ import SideNavigationItem from "./SideNavigationItem.js";
 import SideNavigationSubItem from "./SideNavigationSubItem.js";
 import SortItem from "./SortItem.js";
 import Timeline from "./Timeline.js";
+import NavigationLayout from "./NavigationLayout.js";
 import UploadCollection from "./UploadCollection.js";
 import UploadCollectionItem from "./UploadCollectionItem.js";
 import ViewSettingsDialog from "./ViewSettingsDialog.js";

packages/fiori/src/themes/NavigationLayout.css

@@ -0,0 +1,90 @@
+
+:host(:not([hidden])) {
+	width: 100%;
+	height: 100%;
+	display: block;
+	padding: 0.5rem 0.5rem 0 0.5rem;
+	background: var(--sapBackgroundColor);
+	box-sizing: border-box;
+	overflow: hidden;
+}
+
+:host(:not([hidden][is-tablet])) {
+	padding: 0.5rem;
+}
+
+:host(:not([hidden][is-phone])) {
+	padding: 0.25rem;
+}
+
+.ui5-nl-root {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	box-sizing: border-box;
+}
+
+.ui5-nl-header {
+
+}
+
+.ui5-nl-section {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+	position: relative;
+}
+
+.ui5-nl-aside {
+	margin: 0.5rem 0.5rem 0 0;
+	transition: transform 0.3s;
+	z-index: 1;
+}
+
+:host([is-phone]) .ui5-nl-aside,
+:host([side-collapsed]) .ui5-nl-aside {
+	z-index: 3;
+}
+
+:host([is-phone]) .ui5-nl-aside {
+	margin: 0.25rem 0.25rem 0 0;
+}
+
+:host([is-phone]) .ui5-nl-aside {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+}
+
+.ui5-nl-content {
+	flex: 1;
+	min-width: 0;
+	margin: 0.5rem 0 0 0;
+	z-index: 2;
+
+	box-shadow: var(--_ui5_nl_box_shadow);
+	border-radius: 0.5rem 0.5rem 0 0;
+	background: var(--sapBackgroundColor);
+}
+
+:host([is-phone]) .ui5-nl-content {
+	margin: 0.25rem 0 0 0;
+}
+
+:host([is-phone]) .ui5-nl-content,
+:host([is-tablet]) .ui5-nl-content {
+	border-radius: 0.5rem;
+}
+
+:host([side-collapsed][is-phone]) .ui5-nl-aside {
+	transform: translateX(calc(-100% - 0.25rem));
+}
+
+::slotted([ui5-toolbar]),
+::slotted([ui5-shellbar]) {
+	box-shadow: var(--_ui5_nl_box_shadow);
+	border-radius: 0.5rem;
+}

packages/fiori/src/themes/ShellBar.css

@@ -25,6 +25,7 @@
 	font-size: var(--sapFontSize);
 	font-weight: normal;
 	box-sizing: border-box;
+	border-radius: inherit;
 }
 
 .ui5-shellbar-menu-button,

packages/fiori/src/themes/base/NavigationLayout-parameters.css

@@ -0,0 +1,5 @@
+:root {
+	--_ui5_nl_shadow_color1: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent);
+	--_ui5_nl_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent);
+	--_ui5_nl_box_shadow: 0 0 0.125rem 0 var(--_ui5_nl_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_nl_shadow_color2);
+}

packages/fiori/src/themes/sap_horizon/parameters-bundle.css

@@ -8,6 +8,7 @@
 @import "./ProductSwitchItem-parameters.css";
 @import "./ShellBar-parameters.css";
 @import "./TimelineItem-parameters.css";
+@import "../base/NavigationLayout-parameters.css";
 @import "./SideNavigation-parameters.css";
 @import "./UploadCollection-parameters.css";
 @import "./Wizard-parameters.css";

packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css

@@ -8,6 +8,7 @@
 @import "./ProductSwitchItem-parameters.css";
 @import "./ShellBar-parameters.css";
 @import "./TimelineItem-parameters.css";
+@import "../base/NavigationLayout-parameters.css";
 @import "./SideNavigation-parameters.css";
 @import "./UploadCollection-parameters.css";
 @import "./Wizard-parameters.css";

packages/fiori/src/themes/sap_horizon_hcb/NavigationLayout-parameters.css

@@ -0,0 +1,7 @@
+@import "../base/NavigationLayout-parameters.css";
+
+:root {
+	--_ui5_nl_shadow_color1: var(--sapContent_ShadowColor);
+	--_ui5_nl_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent);
+	--_ui5_nl_box_shadow: 0 0 0 0.0625rem var(--_ui5_nl_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_nl_shadow_color2);
+}

packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css

@@ -8,6 +8,7 @@
 @import "./ShellBar-parameters.css";
 @import "./SideNavigation-parameters.css";
 @import "./TimelineItem-parameters.css";
+@import "./NavigationLayout-parameters.css";
 @import "./UploadCollection-parameters.css";
 @import "../base/ViewSettingsDialog-parameters.css";
 @import "./Wizard-parameters.css";

packages/fiori/src/themes/sap_horizon_hcw/NavigationLayout-parameters.css

@@ -0,0 +1,7 @@
+@import "../base/NavigationLayout-parameters.css";
+
+:root {
+	--_ui5_nl_shadow_color1: var(--sapContent_ShadowColor);
+	--_ui5_nl_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent);
+	--_ui5_nl_box_shadow: 0 0 0 0.0625rem var(--_ui5_nl_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_nl_shadow_color2);
+}

packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css

@@ -8,6 +8,7 @@
 @import "../sap_horizon_hcb/ShellBar-parameters.css";
 @import "./SideNavigation-parameters.css";
 @import "./TimelineItem-parameters.css";
+@import "./NavigationLayout-parameters.css";
 @import "./UploadCollection-parameters.css";
 @import "../base/ViewSettingsDialog-parameters.css";
 @import "./Wizard-parameters.css";