Backoffice: Make section sidebar collapsible on mobile

[engijlr]

Summary

On mobile, the section sidebar now collapses so the main content can use the full screen width. A burger button in the header lets the user open and close the sidebar.

NOTE: there is a circular dependency that I am not sure how to solve, if the reviewer can help me look at it,that would be nice

How it works

• app.element.ts — removed the 920px minimum width restriction that was blocking the backoffice from loading on mobile screens

• A burger button (☰) appears in the header on mobile. Tapping it opens or closes the sidebar.

• The open/closed state lives in the backoffice context.

• The split panel shows the sidebar as an overlay on mobile, and returns to the normal side-by-side layout on desktop.

• Navigating to a new page automatically closes the sidebar.

• Switching back to desktop resets the sidebar state.

  What changed

• backoffice.context.ts — added sidebar open/close state and methods

• backoffice-header.element.ts — added burger button (mobile only)

• default-section.element.ts — reads the context state and passes it to the split panel

• split-panel.element.ts — replaced inline style layout with CSS attributes and custom properties, removing the need for !important

• packages/core/const/index.ts — added UMB_MOBILE_BREAKPOINT constant

[claude]

Claude finished @engijlr's task in 5m 40s —— View job

---

PR Review

Target: origin/v17/dev · Based on commit: 4d45a96b

Adds a collapsible section sidebar on mobile: removes the 920 px minimum-width floor, puts open/closed state in UmbBackofficeContext, wires a burger button into the header, and switches umb-split-panel to an absolute-overlay layout below the mobile breakpoint.

• Modified public API: UmbSplitPanelElement — new reflected @property sidebarOpen; UmbBackofficeContext — new observable mobileSidebarOpen and methods toggleMobileSidebar / setMobileSidebarOpen
• Other changes: UMB_MOBILE_BREAKPOINT constant exported from @umbraco-cms/backoffice/const; 920px hard floor on the app host element removed

---

Important

• backoffice-header.element.ts:24: Burger button has no aria-expanded, so screen readers cannot communicate whether the sidebar is open or closed. The component also never observes mobileSidebarOpen — the context reference is stored only to dispatch the toggle — so the icon and ARIA state are permanently stuck at the initial (closed) value. → Observe ctx.mobileSidebarOpen in the consumeContext callback (with an explicit alias) and bind aria-expanded + conditionally swap the icon in the template. (see inline comment)

• default-section.element.ts:57: this.observe(ctx?.mobileSidebarOpen, ...) inside consumeContext has no explicit alias. The consumeContext callback re-fires when the context provider is replaced; each invocation creates a new anonymous closure, generating a unique auto-hash, so duplicate subscriptions accumulate instead of replacing each other. → Pass a string alias as the third argument: '_observeMobileSidebarOpen'. (see inline comment)

Suggestions

• app.element.ts:451: /* min-width: 920px; */ is commented-out dead CSS rather than removed. (see inline comment)

• backoffice.context.ts:75–79: toggleMobileSidebar() and setMobileSidebarOpen() are new public methods with no JSDoc. Per the project documentation standard, all public APIs should have JSDoc. (see inline comment)

• split-panel.element.ts:53: The property is named sidebarOpen on a generic reusable component. Consider a more neutral name (startPanelVisible / showStart) to avoid encoding section-sidebar semantics into a core primitive. (see inline comment)

---

Request Changes

The two Important items should be addressed before merge: the missing aria-expanded binding is an accessibility regression, and the unaliased observe inside consumeContext can produce a memory leak on context replacement. The rest are suggestions.

[claude]

[Suggestion] The property name sidebarOpen encodes a domain-specific concept ("sidebar") into a generic reusable component. umb-split-panel is used in many contexts beyond section navigation. A more neutral name like startPanelVisible or showStart would keep the component semantics generic and avoid coupling the core primitive to one use case.