From cf174a925ea87b2e6c5f3de2ba0697f22f4ab908 Mon Sep 17 00:00:00 2001
From: JesmoDev <26099018+JesmoDev@users.noreply.github.com>
Date: Tue, 7 May 2024 15:19:54 +0200
Subject: [PATCH] add split panel to sidebar nav

---
 .../split-panel/split-panel.element.ts        |  2 +-
 .../core/section/section-default.element.ts   | 48 ++++++++++++-------
 .../section-sidebar-context-menu.element.ts   |  2 +-
 .../section-sidebar.element.ts                |  1 +
 4 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts
index d7368784e0..8963e035a6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts
@@ -263,7 +263,7 @@ export class UmbSplitPanelElement extends LitElement {
 			--umb-split-panel-divider-color: transparent;
 		}
 		slot {
-			overflow: hidden;
+			overflow: visible;
 			display: block;
 		}
 		#main {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-default.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-default.element.ts
index b30d7ac991..3a8961fe60 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-default.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-default.element.ts
@@ -77,24 +77,26 @@ export class UmbSectionDefaultElement extends UmbLitElement implements UmbSectio
 
 	render() {
 		return html`
-			${this._sidebarApps && this._sidebarApps.length > 0
-				? html`
-						<!-- TODO: these extensions should be combined into one type: sectionSidebarApp with a "subtype" -->
-						<umb-section-sidebar>
-							${repeat(
-								this._sidebarApps,
-								(app) => app.alias,
-								(app) => app.component,
-							)}
-						</umb-section-sidebar>
-					`
-				: nothing}
-			<umb-section-main>
-				${this._routes && this._routes.length > 0
-					? html`<umb-router-slot id="router-slot" .routes=${this._routes}></umb-router-slot>`
+			<umb-split-panel lock="start" snap="300px">
+				${this._sidebarApps && this._sidebarApps.length > 0
+					? html`
+							<!-- TODO: these extensions should be combined into one type: sectionSidebarApp with a "subtype" -->
+							<umb-section-sidebar slot="start">
+								${repeat(
+									this._sidebarApps,
+									(app) => app.alias,
+									(app) => app.component,
+								)}
+							</umb-section-sidebar>
+						`
 					: nothing}
-				<slot></slot>
-			</umb-section-main>
+				<umb-section-main slot="end">
+					${this._routes && this._routes.length > 0
+						? html`<umb-router-slot id="router-slot" .routes=${this._routes}></umb-router-slot>`
+						: nothing}
+					<slot></slot>
+				</umb-section-main>
+			</umb-split-panel>
 		`;
 	}
 
@@ -106,6 +108,18 @@ export class UmbSectionDefaultElement extends UmbLitElement implements UmbSectio
 				height: 100%;
 				display: flex;
 			}
+
+			umb-split-panel {
+				--umb-split-panel-initial-position: 200px;
+				--umb-split-panel-start-min-width: 200px;
+				--umb-split-panel-start-max-width: 400px;
+				--umb-split-panel-end-min-width: 600px;
+			}
+			@media only screen and (min-width: 800px) {
+				umb-split-panel {
+					--umb-split-panel-initial-position: 300px;
+				}
+			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts
index c1cdbe7762..6757c34d29 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts
@@ -136,10 +136,10 @@ export class UmbSectionSidebarContextMenuElement extends UmbLitElement {
 			}
 			#action-modal {
 				position: absolute;
-				left: var(--umb-section-sidebar-width);
 				height: 100%;
 				z-index: 1;
 				top: 0;
+				right: calc(var(--umb-section-sidebar-width) * -1);
 				width: var(--umb-section-sidebar-width);
 				border: none;
 				border-left: 1px solid var(--uui-color-border);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.element.ts
index 65da98a094..5c86779064 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar/section-sidebar.element.ts
@@ -29,6 +29,7 @@ export class UmbSectionSidebarElement extends UmbLitElement {
 				display: flex;
 				flex-direction: column;
 				z-index: 10;
+				position: relative;
 			}
 
 			#scroll-container {