added scroll shadow for body layout

src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts

@@ -1,4 +1,13 @@
-import { css, html, LitElement, nothing, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import {
+	css,
+	html,
+	LitElement,
+	nothing,
+	customElement,
+	property,
+	state,
+	query,
+} from '@umbraco-cms/backoffice/external/lit';
 import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
 
 /**
@@ -23,9 +32,15 @@ export class UmbBodyLayoutElement extends LitElement {
 	 * @attr {string} clear-header - renders the header without background and borders.
 	 * @default ''
 	 */
+
+	@query('#main') scrollContainer?: HTMLElement;
+
 	@property()
 	public headline = '';
 
+	@property({ type: Boolean, reflect: true, attribute: 'scroll-shadow' })
+	public scrollShadow = false;
+
 	@state()
 	private _headerSlotHasChildren = false;
 
@@ -45,6 +60,25 @@ export class UmbBodyLayoutElement extends LitElement {
 		return (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;
 	};
 
+	connectedCallback(): void {
+		super.connectedCallback();
+		if (this.scrollShadow) {
+			requestAnimationFrame(() => {
+				this.scrollContainer?.addEventListener('scroll', this.#onScroll);
+			});
+		}
+	}
+
+	disconnectedCallback(): void {
+		super.disconnectedCallback();
+		this.scrollContainer?.removeEventListener('scroll', this.#onScroll);
+	}
+
+	#onScroll = () => {
+		if (!this.scrollContainer) return;
+		this.toggleAttribute('scrolling', this.scrollContainer.scrollTop > 0);
+	};
+
 	render() {
 		return html`
 			<div
@@ -118,6 +152,9 @@ export class UmbBodyLayoutElement extends LitElement {
 				background-color: var(--uui-color-surface);
 				border-bottom: 1px solid var(--uui-color-border);
 				box-sizing: border-box;
+				z-index: 1;
+				transition: box-shadow 150ms ease-in-out;
+				box-shadow: 0 0px -5px 5px rgba(0, 0, 0, 0);
 			}
 
 			:host([clear-header]) #header {
@@ -125,6 +162,11 @@ export class UmbBodyLayoutElement extends LitElement {
 				border-color: transparent;
 			}
 
+			:host([scrolling]) #header {
+				/* This should be using the uui-shadows but for now they are too drastic for this use case */
+				box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.3);
+			}
+
 			#headline {
 				display: block;
 				margin: 0 var(--uui-size-layout-1);

src/Umbraco.Web.UI.Client/src/packages/users/users/collection/user-collection.element.ts

@@ -35,7 +35,7 @@ export class UmbUserCollectionElement extends UmbLitElement {
 
 	render() {
 		return html`
-			<umb-body-layout clear-header>
+			<umb-body-layout clear-header scroll-shadow>
 				<umb-user-collection-header slot="header"></umb-user-collection-header>
 				<umb-router-slot id="router-slot" .routes=${this._routes}></umb-router-slot>
 			</umb-body-layout>