From 4bf626792ca5a15fa4870fbdf42ee19a4b88ae8b Mon Sep 17 00:00:00 2001
From: Dawood <dawoodkhan82@gmail.com>
Date: Tue, 28 Jan 2025 20:46:27 -0500
Subject: [PATCH] responsive

---
 js/sidebar/shared/Sidebar.svelte | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/js/sidebar/shared/Sidebar.svelte b/js/sidebar/shared/Sidebar.svelte
index ea0f739fe60bd..988afd947e747 100644
--- a/js/sidebar/shared/Sidebar.svelte
+++ b/js/sidebar/shared/Sidebar.svelte
@@ -1,14 +1,19 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
+	import { createEventDispatcher, onMount } from "svelte";
 	const dispatch = createEventDispatcher<{
 		expand: void;
 		collapse: void;
 	}>();
 
 	export let open = true;
+	let sidebar_div: HTMLElement;
+
+	onMount(() => {
+		sidebar_div.parentElement?.classList.add('sidebar-parent');
+	});
 </script>
 
-<div class="sidebar" class:open>
+<div class="sidebar" class:open bind:this={sidebar_div}>
 	<button
 		on:click={() => {
 			open = !open;
@@ -31,6 +36,17 @@
 </div>
 
 <style>
+	:global(.sidebar-parent) {
+		display: flex !important;
+		min-height: 100vh;
+		padding-left: 0;
+		transition: padding-left 0.3s ease-in-out;
+	}
+
+	:global(.sidebar-parent:has(.sidebar.open)) {
+		padding-left: var(--size-32);
+	}
+
 	.sidebar {
 		display: flex;
 		flex-direction: column;