feat(ui5-side-navigation): add "header" slot (#2520)

Provide API, header slot, displayed in the top-most area of the SideNavigation component to enable users adding additional information, usually profile/user data, avatar, etc.
Also includes a minor fix (min-width: 3rem;) that prevents the SideNavigation (when collapsed) from shrinking due to resize.

FIXES #2518

Author: ilhan007

packages/fiori/src/SideNavigation.hbs

@@ -37,7 +37,7 @@
 	<div class="ui5-sn-spacer"></div>
 
 	{{#if fixedItems.length}}
-	   <div>
+		<div>
 			<div class="ui5-sn-bottom-content-border">
 				<span></span>
 			</div>
@@ -70,12 +70,16 @@
 					</ui5-tree-item>
 				{{/each}}
 			</ui5-tree>
-	   </div>
+		</div>
 	{{/if}}
 
 	{{> footer }}
 </div>
 
-{{#*inline header}}{{/inline}}
+{{#*inline header}}
+	{{#if showHeader}}
+		<slot name="header"></slot>
+	{{/if}}
+{{/inline}}
 
 {{#*inline footer}}{{/inline}}

packages/fiori/src/SideNavigation.js

@@ -51,6 +51,20 @@ const metadata = {
 			type: HTMLElement,
 		},
 
+		/**
+		 * Defines the header of the <code>ui5-side-navigation</code>.
+		 *
+		 * <br><br>
+		 * <b>Note:</b> The header is displayed when the component is expanded - the property <code>collapsed</code> is false;
+		 *
+		 * @public
+		 * @since 1.0.0-rc.11
+		 * @slot
+		 */
+		header: {
+			type: HTMLElement,
+		},
+
 		/**
 		 * 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-sub-item</code> component to provide second-level items inside them.
@@ -87,10 +101,13 @@ const metadata = {
  * <h3 class="comment-api-title">Overview</h3>
  *
  * The <code>SideNavigation</code> is used as a standard menu in applications.
- * It consists of two containers: the main navigation section (top-aligned) and the secondary section (bottom-aligned).
- * Usually the main navigation section is related to the user’s current work context,
- * whereas the secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).
-
+ * It consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).
+ * <ul>
+ * <li>The header is meant for displaying user related information - profile data, avatar, etc.</li>
+ * <li>The main navigation section is related to the user’s current work context</li>
+ * <li>The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on). </li>
+ * </ul>
+ *
  * <h3>Usage</h3>
  *
  * Use the available <code>ui5-side-navigation-item</code> and <code>ui5-side-navigation-sub-item</code> components to build your menu.
@@ -227,6 +244,14 @@ class SideNavigation extends UI5Element {
 		responsivePopover.close();
 	}
 
+	get hasHeader() {
+		return !!this.header.length;
+	}
+
+	get showHeader() {
+		return this.hasHeader && !this.collapsed;
+	}
+
 	get _itemsTree() {
 		return this.getDomRef().querySelector("#ui5-sn-items-tree");
 	}

packages/fiori/src/themes/SideNavigation.css

@@ -9,6 +9,7 @@
 
 :host([collapsed]) {
     width: 3rem;
+    min-width: 3rem;
 }
 
 .ui5-sn-bottom-content-border {

packages/fiori/test/pages/SideNavigation.html

@@ -39,6 +39,13 @@
 		ui5-shellbar::part(root) {
 			padding-left: .5rem;
 		}
+
+		.header {
+			display: flex;
+			flex-direction: column;
+			padding: 1rem;
+			box-sizing: border-box;
+		}
 	</style>
 </head>
 
@@ -53,6 +60,16 @@
 
 	<div class="content">
 		<ui5-side-navigation id="sn1">
+
+			<!-- Header -->
+			<div slot="header" class="header">
+				<ui5-avatar size="L" image="./img/man_avatar_1.png"></ui5-avatar>
+				<br>
+				<ui5-title>Willam Brown</ui5-title>
+				<ui5-label>UX expert</ui5-label>
+			</div>
+
+			<!-- Items -->
 			<ui5-side-navigation-item text="Home" icon="home" ></ui5-side-navigation-item>
 			<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>
@@ -64,6 +81,7 @@
 				<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
 			</ui5-side-navigation-item>
 
+			<!-- Fixed Items -->
 			<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>

packages/fiori/test/specs/SideNavigation.spec.js

@@ -59,5 +59,27 @@ describe("Component Behavior", () => {
 			assert.strictEqual(input.getProperty("value"), "6", "Event is not fired");
 			assert.strictEqual(items[3].getAttribute("expanded"), "false", "Expanded is toggled");
 		});
+
+		it("Tests header visibility", () => {
+			let showHeader = null;
+
+			showHeader = browser.execute(() => {
+				const sideNavigation = document.querySelector("#sn1");
+				sideNavigation.collapsed = false;
+
+				return sideNavigation.showHeader;
+			});
+		
+			assert.strictEqual(showHeader, true, "Header is displayed");
+
+			showHeader = browser.execute( () => {
+				const sideNavigation = document.querySelector("#sn1");
+				sideNavigation.collapsed = true;
+
+				return sideNavigation.showHeader;
+			});
+	
+			assert.strictEqual(showHeader, false, "Header is not displayed");
+		});
 	});
 });