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
UNDP-Data · Jan 2, 2024 · 0a8a202 · 0a8a202
1 parent 931d4f2
commit 0a8a202
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 11 deletions.
diff --git a/.changeset/metal-dodos-hang.md 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
@@ -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
@@ -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
@@ -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
@@ -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 />