Log Viewer: Improve layout on narrow viewports

src/Umbraco.Web.UI.Client/src/apps/app/app.element.ts

@@ -448,7 +448,6 @@ export class UmbAppElement extends UmbLitElement {
 	static override styles = css`
 		:host {
 			overflow: hidden;
-			min-width: 920px;
 		}
 
 		:host,

src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.context.ts

@@ -1,7 +1,7 @@
 import { tryExecute } from '@umbraco-cms/backoffice/resources';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { ServerService } from '@umbraco-cms/backoffice/external/backend-api';
-import { UmbBasicState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbBasicState, UmbBooleanState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbExtensionsManifestInitializer } from '@umbraco-cms/backoffice/extension-api';
@@ -22,6 +22,9 @@ export class UmbBackofficeContext extends UmbContextBase {
 	readonly #version = new UmbStringState(undefined);
 	public readonly version = this.#version.asObservable();
 
+	readonly #mobileSidebarOpen = new UmbBooleanState(false);
+	public readonly mobileSidebarOpen = this.#mobileSidebarOpen.asObservable();
+
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_BACKOFFICE_CONTEXT);
 
@@ -69,6 +72,22 @@ export class UmbBackofficeContext extends UmbContextBase {
 		this.#activeSectionAlias.setValue(alias);
 	}
 
+	/**
+	 * Toggles the mobile sidebar between open and closed.
+	 * Call this when the user taps the burger button in the header.
+	 */
+	public toggleMobileSidebar(): void {
+		this.#mobileSidebarOpen.setValue(!this.#mobileSidebarOpen.getValue());
+	}
+
+	/**
+	 * Explicitly sets the mobile sidebar open state.
+	 * Use this to close the sidebar on navigation or viewport changes.
+	 */
+	public setMobileSidebarOpen(open: boolean): void {
+		this.#mobileSidebarOpen.setValue(open);
+	}
+
 	public async serverUpgradeCheck() {
 		const version = await this.observe(this.version)
 			.asPromise()

src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header.element.ts

@@ -1,12 +1,43 @@
-import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UMB_BACKOFFICE_CONTEXT } from '../backoffice.context.js';
+import type { UmbBackofficeContext } from '../backoffice.context.js';
+import { UMB_MOBILE_BREAKPOINT } from '@umbraco-cms/backoffice/const';
 
 @customElement('umb-backoffice-header')
 export class UmbBackofficeHeaderElement extends UmbLitElement {
+	#backofficeContext?: UmbBackofficeContext;
+
+	@state()
+	private _sidebarOpen = false;
+
+	constructor() {
+		super();
+		this.consumeContext(UMB_BACKOFFICE_CONTEXT, (ctx) => {
+			this.#backofficeContext = ctx;
+			this.observe(
+				ctx?.mobileSidebarOpen,
+				(open) => {
+					this._sidebarOpen = open === true;
+				},
+				'_observeMobileSidebarOpen',
+			);
+		});
+	}
+	#onBurgerClick() {
+		this.#backofficeContext?.toggleMobileSidebar();
+	}
 	override render() {
 		return html`
 			<div id="appHeader">
 				<umb-backoffice-header-logo></umb-backoffice-header-logo>
+				<button
+					id="burger-button"
+					@click=${this.#onBurgerClick}
+					aria-label="Toggle navigation"
+					aria-expanded=${this._sidebarOpen}>
+					<uui-icon name="icon-list"></uui-icon>
+				</button>
 				<umb-backoffice-header-sections></umb-backoffice-header-sections>
 				<umb-backoffice-header-apps></umb-backoffice-header-apps>
 			</div>
@@ -31,6 +62,24 @@ export class UmbBackofficeHeaderElement extends UmbLitElement {
 			umb-backoffice-header-sections {
 				flex: 1 1 auto;
 			}
+
+			#burger-button {
+				display: none;
+				background: transparent;
+				border: none;
+				color: var(--uui-color-header-contrast);
+				cursor: pointer;
+				padding: var(--uui-size-space-2);
+				font-size: 20px;
+				align-items: center;
+				justify-content: center;
+			}
+
+			@media (max-width: ${UMB_MOBILE_BREAKPOINT}px) {
+				#burger-button {
+					display: flex;
+				}
+			}
 		`,
 	];
 }

src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts

@@ -9,6 +9,7 @@ import {
 	state,
 } from '@umbraco-cms/backoffice/external/lit';
 import { clamp } from '@umbraco-cms/backoffice/utils';
+import { UMB_MOBILE_BREAKPOINT } from '@umbraco-cms/backoffice/const';
 
 /**
  * Custom element for a split panel with adjustable divider.
@@ -49,6 +50,8 @@ export class UmbSplitPanelElement extends UmbLitElement {
 	@property({ type: String, reflect: true }) position = 'var(--umb-split-panel-initial-position)';
 	//TODO: Add support for negative values (relative to end of container) similar to snap points.
 
+	@property({ type: Boolean, reflect: true, attribute: 'sidebar-open' }) sidebarOpen = false;
+
 	/** Width of the locked panel when in "start" or "end" lock mode */
 	#lockedPanelWidth: number = 0;
 	/** Pixel value for the snap threshold. Determines how close the divider needs to be to a snap point to snap to it. */
@@ -117,11 +120,14 @@ export class UmbSplitPanelElement extends UmbLitElement {
 			maxEndWidth = this.#lockedPanelWidth + 'px';
 		}
 
-		this.mainElement.style.gridTemplateColumns = `
-      minmax(var(--umb-split-panel-start-min-width), ${maxStartWidth})
-      0px
-      minmax(var(--umb-split-panel-end-min-width), ${maxEndWidth})
-    `;
+		this.style.setProperty(
+			'--_columns',
+			`
+    minmax(var(--umb-split-panel-start-min-width), ${maxStartWidth})
+    0px
+    minmax(var(--umb-split-panel-end-min-width), ${maxEndWidth})
+  `,
+		);
 	}
 
 	#onDragStart = (event: PointerEvent | TouchEvent) => {
@@ -180,16 +186,17 @@ export class UmbSplitPanelElement extends UmbLitElement {
 	#disconnect() {
 		this.dividerTouchAreaElement.removeEventListener('pointerdown', this.#onDragStart);
 		this.dividerTouchAreaElement.removeEventListener('touchstart', this.#onDragStart);
+		this.removeAttribute('connected');
+		this.style.removeProperty('--_columns');
 		this.dividerElement.style.display = 'none';
-		this.mainElement.style.display = 'flex';
 		this.#hasInitialized = false;
 	}
 
 	async #connect() {
 		this.#hasInitialized = true;
 
-		this.mainElement.style.display = 'grid';
-		this.mainElement.style.gridTemplateColumns = `${this.position} 0px 1fr`;
+		this.toggleAttribute('connected', true);
+		this.style.setProperty('--_columns', `${this.position} 0px 1fr`);
 		this.dividerElement.style.display = 'unset';
 
 		this.dividerTouchAreaElement.addEventListener('pointerdown', this.#onDragStart);
@@ -253,14 +260,11 @@ export class UmbSplitPanelElement extends UmbLitElement {
 	override render() {
 		return html`
 			<div id="main">
-				<slot
-					name="start"
-					@slotchange=${this.#onSlotChanged}
-					style="width: ${this._hasStartPanel ? '100%' : '0'}"></slot>
+				<slot name="start" @slotchange=${this.#onSlotChanged}></slot>
 				<div id="divider">
 					<div id="divider-touch-area" tabindex="0" @keydown=${this.#onKeydown}></div>
 				</div>
-				<slot name="end" @slotchange=${this.#onSlotChanged} style="width: ${this._hasEndPanel ? '100%' : '0'}"></slot>
+				<slot name="end" @slotchange=${this.#onSlotChanged}></slot>
 			</div>
 		`;
 	}
@@ -314,6 +318,41 @@ export class UmbSplitPanelElement extends UmbLitElement {
 			background-color: var(--umb-split-panel-divider-color);
 			z-index: -1;
 		}
+
+		:host([connected]) #main {
+			display: grid;
+			grid-template-columns: var(--_columns);
+		}
+
+		slot[name='end'] {
+			flex: 1 1 auto;
+			min-width: 0;
+		}
+
+		@media (max-width: ${UMB_MOBILE_BREAKPOINT}px) {
+			:host([connected]) #main {
+				display: flex;
+				position: relative;
+			}
+			:host([connected]) slot[name='start'] {
+				position: absolute;
+				inset: 0;
+				width: 100%;
+				height: 100%;
+				z-index: 100;
+				display: none;
+			}
+			:host([connected][sidebar-open]) slot[name='start'] {
+				display: block;
+			}
+			:host([connected]) slot[name='end'] {
+				flex: 1 1 auto;
+				min-width: 0;
+			}
+			:host([connected]) #divider {
+				display: none;
+			}
+		}
 	`;
 }
 

src/Umbraco.Web.UI.Client/src/packages/core/const/index.ts

@@ -1 +1,2 @@
 export const UMB_MARK_ATTRIBUTE_NAME = 'data-mark';
+export const UMB_MOBILE_BREAKPOINT = 920;

src/Umbraco.Web.UI.Client/src/packages/core/section/default/default-section.element.ts

@@ -12,9 +12,11 @@ import {
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { UMB_MARK_ATTRIBUTE_NAME } from '@umbraco-cms/backoffice/const';
+import { UMB_MARK_ATTRIBUTE_NAME, UMB_MOBILE_BREAKPOINT } from '@umbraco-cms/backoffice/const';
 import type { IRoute, IRoutingInfo, PageComponent, UmbRoute } from '@umbraco-cms/backoffice/router';
 import type { UmbExtensionElementInitializer } from '@umbraco-cms/backoffice/extension-api';
+import { UMB_BACKOFFICE_CONTEXT } from '../../../../apps/backoffice/backoffice.context.js';
+import type { UmbBackofficeContext } from '../../../../apps/backoffice/backoffice.context.js';
 
 /**
  * @class UmbBaseSectionElement
@@ -33,6 +35,11 @@ export class UmbDefaultSectionElement extends UmbLitElement implements UmbSectio
 	@state()
 	private _splitPanelPosition = '300px';
 
+	@state()
+	private _sidebarOpen = false;
+	readonly #mobileQuery = window.matchMedia(`(max-width: ${UMB_MOBILE_BREAKPOINT}px)`);
+	#backofficeContext?: UmbBackofficeContext;
+
 	constructor() {
 		super();
 
@@ -45,6 +52,17 @@ export class UmbDefaultSectionElement extends UmbLitElement implements UmbSectio
 			this.requestUpdate('_sidebarApps', oldValue);
 		});
 
+		this.consumeContext(UMB_BACKOFFICE_CONTEXT, (ctx) => {
+			this.#backofficeContext = ctx;
+			this.observe(
+				ctx?.mobileSidebarOpen,
+				(open) => {
+					this._sidebarOpen = open === true;
+				},
+				'_observeMobileSidebarOpen',
+			);
+		});
+
 		this.#observeRoutes();
 
 		const splitPanelPosition = localStorage.getItem('umb-split-panel-position');
@@ -53,6 +71,30 @@ export class UmbDefaultSectionElement extends UmbLitElement implements UmbSectio
 		}
 	}
 
+	override connectedCallback() {
+		super.connectedCallback();
+		window.addEventListener('changestate', this.#onNavigation);
+		this.#mobileQuery.addEventListener('change', this.#onMobileChange);
+	}
+
+	override disconnectedCallback() {
+		super.disconnectedCallback();
+		window.removeEventListener('changestate', this.#onNavigation);
+		this.#mobileQuery.removeEventListener('change', this.#onMobileChange);
+	}
+
+	#onNavigation = () => {
+		if (this.#mobileQuery.matches) {
+			this.#backofficeContext?.setMobileSidebarOpen(false);
+		}
+	};
+
+	#onMobileChange = (e: MediaQueryListEvent) => {
+		if (!e.matches) {
+			this.#backofficeContext?.setMobileSidebarOpen(false);
+		}
+	};
+
 	#observeRoutes(): void {
 		new UmbExtensionsManifestInitializer<ManifestSectionRoute, 'sectionRoute', ManifestSectionRoute>(
 			this,
@@ -117,6 +159,7 @@ export class UmbDefaultSectionElement extends UmbLitElement implements UmbSectio
 			<umb-split-panel
 				lock="start"
 				snap="300px"
+				?sidebar-open=${this._sidebarOpen}
 				@position-changed=${this.#onSplitPanelChange}
 				.position=${this._splitPanelPosition}>
 				${this._sidebarApps && this._sidebarApps.length > 0

src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/overview/log-overview-view.element.ts

@@ -2,6 +2,7 @@ import { UMB_APP_LOG_VIEWER_CONTEXT } from '../../logviewer-workspace.context-to
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { consumeContext } from '@umbraco-cms/backoffice/context-api';
+import { UMB_MOBILE_BREAKPOINT } from '@umbraco-cms/backoffice/const';
 
 //TODO: add a disabled attribute to the show more button when the total number of items is correctly returned from the endpoint
 @customElement('umb-log-viewer-overview-view')
@@ -160,6 +161,27 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
 				color: var(--uui-color-danger);
 				margin: 0;
 			}
+
+			@media (max-width: ${UMB_MOBILE_BREAKPOINT}px) {
+				:host {
+					margin: var(--uui-size-space-4);
+				}
+
+				#logviewer-layout {
+					display: flex;
+					flex-direction: column;
+				}
+
+				#info {
+					align-self: stretch;
+				}
+
+				#common-messages-container {
+					grid-area: common-messages;
+					--uui-box-default-padding: 0 var(--uui-size-space-3, 18px) var(--uui-size-space-3, 18px)
+						var(--uui-size-space-3, 18px);
+				}
+			}
 		`,
 	];
 }