From 0a8a202f2995a8f70ebea5a691d7e53a58279369 Mon Sep 17 00:00:00 2001
From: Jin Igarashi <jin.igarashi@undp.org>
Date: Tue, 2 Jan 2024 10:29:01 +0000
Subject: [PATCH] Fix/2603 sidebar border (#2606)

* feat: add new option 'border' to enable customising border style (color, width, etc) for sidebar

* fix: set sidebar border to none
---
 .changeset/metal-dodos-hang.md                  |  5 +++++
 .changeset/tricky-hotels-tap.md                 |  5 +++++
 packages/svelte-sidebar/src/lib/Sidebar.svelte  | 17 +++++++----------
 packages/svelte-sidebar/src/routes/+page.svelte | 15 ++++++++++++++-
 .../geohub/src/routes/(map)/maps/+layout.svelte |  2 ++
 5 files changed, 33 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/metal-dodos-hang.md
 create mode 100644 .changeset/tricky-hotels-tap.md

diff --git a/.changeset/metal-dodos-hang.md b/.changeset/metal-dodos-hang.md
new file mode 100644
index 0000000000..b5034d96b2
--- /dev/null
+++ b/.changeset/metal-dodos-hang.md
@@ -0,0 +1,5 @@
+---
+"geohub": patch
+---
+
+fix: set sidebar border to none
diff --git a/.changeset/tricky-hotels-tap.md b/.changeset/tricky-hotels-tap.md
new file mode 100644
index 0000000000..446f51475b
--- /dev/null
+++ b/.changeset/tricky-hotels-tap.md
@@ -0,0 +1,5 @@
+---
+"@undp-data/svelte-sidebar": minor
+---
+
+feat: add new option 'border' to enable customising border style (color, width, etc) for sidebar
diff --git a/packages/svelte-sidebar/src/lib/Sidebar.svelte b/packages/svelte-sidebar/src/lib/Sidebar.svelte
index 02def4956e..0d192071c5 100644
--- a/packages/svelte-sidebar/src/lib/Sidebar.svelte
+++ b/packages/svelte-sidebar/src/lib/Sidebar.svelte
@@ -32,6 +32,11 @@
 	 */
 	export let height: number = undefined;
 
+	/**
+	 * Default sidebar border style
+	 */
+	export let border = '1px solid #1c1c1c';
+
 	let innerWidth: number;
 	let innerHeight: number;
 	$: isMobile = innerWidth < 768 ? true : false;
@@ -52,7 +57,7 @@
 		{#if show}
 			<div
 				class="sidebar-content left"
-				style="min-width: {defaultMinSidebarWidth};max-width: {defaultMinSidebarWidth};"
+				style="min-width: {defaultMinSidebarWidth};max-width: {defaultMinSidebarWidth}; border-right: {border};"
 				transition:slide={{ axis: 'x' }}
 				data-testid="sidebar-content"
 			>
@@ -143,7 +148,7 @@
 		{#if show}
 			<div
 				class="sidebar-content right"
-				style="min-width: {defaultMinSidebarWidth};max-width: {defaultMinSidebarWidth};"
+				style="min-width: {defaultMinSidebarWidth};max-width: {defaultMinSidebarWidth}; border-left: {border};"
 				transition:slide={{ axis: 'x' }}
 				data-testid="sidebar-content"
 			>
@@ -157,14 +162,6 @@
 	.sidebar-content {
 		position: relative;
 		height: 100%;
-
-		&.left {
-			border-right: 1px solid #1c1c1c;
-		}
-
-		&.right {
-			border-left: 1px solid #1c1c1c;
-		}
 	}
 
 	.main-content {
diff --git a/packages/svelte-sidebar/src/routes/+page.svelte b/packages/svelte-sidebar/src/routes/+page.svelte
index f54852e4b8..c99e85c5be 100644
--- a/packages/svelte-sidebar/src/routes/+page.svelte
+++ b/packages/svelte-sidebar/src/routes/+page.svelte
@@ -2,6 +2,7 @@
 	import { Sidebar, type SidebarPosition } from '$lib';
 
 	let sidebarPosition: SidebarPosition = 'left';
+	let sidebarBorderStyle = '1px solid #1c1c1c';
 </script>
 
 <svelte:head>
@@ -15,7 +16,7 @@
 	/>
 </svelte:head>
 
-<Sidebar show={true} bind:position={sidebarPosition}>
+<Sidebar show={true} bind:position={sidebarPosition} bind:border={sidebarBorderStyle}>
 	<div slot="content" class="p-4">
 		Sidebar content
 
@@ -33,6 +34,18 @@
 				}}>Right</button
 			>
 		</div>
+
+		<div class="field">
+			<label class="label" for="border-style-input">Border style</label>
+			<div class="control" id="border-style-input">
+				<input
+					class="input"
+					type="text"
+					placeholder="Sidebar border style"
+					bind:value={sidebarBorderStyle}
+				/>
+			</div>
+		</div>
 	</div>
 	<div slot="main">
 		<h1>Welcome to your library project</h1>
diff --git a/sites/geohub/src/routes/(map)/maps/+layout.svelte b/sites/geohub/src/routes/(map)/maps/+layout.svelte
index 2812f39ec5..83049cd501 100644
--- a/sites/geohub/src/routes/(map)/maps/+layout.svelte
+++ b/sites/geohub/src/routes/(map)/maps/+layout.svelte
@@ -175,6 +175,7 @@
 	bind:show={isMenuShown}
 	bind:position={sideBarPosition}
 	bind:marginTop={$headerHeightStore}
+	border="none"
 >
 	<div slot="content">
 		<Content bind:splitterHeight={splitHeight} />
@@ -185,6 +186,7 @@
 			bind:showToggleButton={$editingMenuShownStore}
 			position={sideBarPosition === 'left' ? 'right' : 'left'}
 			bind:height={splitHeight}
+			border="none"
 		>
 			<div slot="content">
 				<LayerEdit />