hide show bar

mehmetcanakbay · Dec 22, 2024 · 50b12b9 · 50b12b9
1 parent 8e79d02
commit 50b12b9
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 15 deletions.
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
@@ -5,6 +5,7 @@
 	import Slider from "./sidebars/Slider.svelte";
     import globals from "../core/globals";
 	import MandelboxSidebar from "./sidebars/MandelboxSidebar.svelte";
+	import gsap from "gsap";
 
     export let renderer : Renderer;
     export let params: (Parameters | null)[];
@@ -24,24 +25,55 @@
         currentShader = ind;
     })
 
+    let isOpen = true;
+    let animHandler = null;
+    function closeOpenSidebar() {
+        animHandler && animHandler.progress(1)
+        animHandler && animHandler.kill()
+        if (isOpen) {
+            animHandler = gsap.to(
+                "#sidebar",
+                {
+                    x: "+=300",
+                    alpha: 0
+                }
+            )
+        } else {
+            animHandler = gsap.to(
+                "#sidebar",
+                {
+                    x: "-=300",
+                    alpha: 1
+                }
+            )
+        }
 
+        isOpen = !isOpen
+    }
 </script>
 
-<div class="relative h-full w-full">
-    <div class="fixed top-0 right-0 h-full w-96 text-white">
-        <div class="fixed z-0 w-full h-full shadow-2xl bg-oben-main/20 backdrop-blur-2xl"></div>
-        <div class="fixed w-96 h-full flex flex-col z-10 items-center ">
-            <div class="flex flex-col items-center  w-80 ">
-                <h1 class="text-2xl py-4 font-bold text-oben-special2">Camera Parameters</h1>
-                <Slider name="Camera Movement Speed" bind:number={cameraSensSlider} min=0.00001 max=0.0001 step=0.00001/>
-                <Slider name="Camera Zoom Amount" bind:number={cameraZoomAmount} min=0.01 max=1 step=0.01/>
-                {#if currentShader === 0}
-                    <MandelboxSidebar renderer={renderer} param={params[0]}/>
-                {/if}
-                {#if currentShader === 1}
-                    <MandelbulbSidebar renderer={renderer} param={params[1]}/>
-                {/if}
-            </div>
+<div class="fixed top-0 right-0 bottom-0 h-full w-96 text-white transform" id="sidebar">
+    <div class="fixed z-0 w-full h-full shadow-2xl bg-oben-main/20 backdrop-blur-2xl"></div>
+    <div class="fixed w-96 h-full flex flex-col z-10 items-center py-4">
+        <div class="flex flex-col items-center w-[22rem] overflow-y-auto overflow-x-hidden">
+            <button class="my-2 text-xl bg-oben-secondary px-4 py-1 rounded-lg" onclick={closeOpenSidebar()}>Hide Bar</button>
+            <h1 class="text-2xl py-4 font-bold text-oben-special2">Camera Parameters</h1>
+            <Slider name="Camera Movement Speed" bind:number={cameraSensSlider} min=0.00001 max=0.0001 step=0.00001/>
+            <Slider name="Camera Zoom Amount" bind:number={cameraZoomAmount} min=0.01 max=1 step=0.01/>
+            {#if currentShader === 0}
+                <MandelboxSidebar renderer={renderer} param={params[0]}/>
+            {/if}
+            {#if currentShader === 1}
+                <MandelbulbSidebar renderer={renderer} param={params[1]}/>
+            {/if}
         </div>
     </div>
 </div>
+
+{#if !isOpen}
+<div class="fixed top-0 right-0 bottom-0 h-full w-96 text-white transform">
+    <div class="fixed w-96 h-full flex flex-col z-10 items-center py-4">
+        <button class="my-2 text-xl bg-oben-secondary px-4 py-1 rounded-lg" onclick={closeOpenSidebar()}>Reopen</button>
+    </div>
+</div>
+{/if}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -29,6 +29,7 @@
 		renderer.start();
 
 		const resizeCanvas = ()=> {
+			console.log(canvas?.width, canvas?.height)
 			if (canvas) {
 				canvas.width = window.innerWidth;
 				canvas.height = window.innerHeight;