toggle sections

mcnuttandrew · Jan 24, 2024 · 6d969f4 · 6d969f4
1 parent 0909446
commit 6d969f4
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 18 deletions.
diff --git a/src/content-modules/LeftPanel.svelte b/src/content-modules/LeftPanel.svelte
@@ -30,22 +30,33 @@
   </section>
 
   <section class="flex flex-col flex-1 overflow-auto p-2">
-    <Nav
-      tabs={["saved-pals", "controls"]}
-      isTabSelected={(x) => $configStore.leftRoute === x}
-      selectTab={(x) => {
-        // @ts-ignore
-        configStore.setLeftRoute(x);
-      }}
-      className="w-full"
-    />
-
-    {#if $configStore.leftRoute === "saved-pals"}
-      <SavedPals />
-    {/if}
-    {#if $configStore.leftRoute === "controls"}
+    <div class="flex justify-between">
+      <div class="font-bold">Controls</div>
+      <Nav
+        tabs={["open", "close"]}
+        isTabSelected={(x) =>
+          (x === "open" && $configStore.controlsOpen) ||
+          (x === "close" && !$configStore.controlsOpen)}
+        selectTab={(x) => configStore.setControlsOpen(x === "open")}
+      />
+    </div>
+    {#if $configStore.controlsOpen}
       <Controls />
     {/if}
+    <div class="w-full border-t-2 border-black my-6"></div>
+    <div class="flex justify-between">
+      <div class="font-bold">Saved Pals</div>
+      <Nav
+        tabs={["open", "close"]}
+        isTabSelected={(x) =>
+          (x === "open" && $configStore.savedPalsOpen) ||
+          (x === "close" && !$configStore.savedPalsOpen)}
+        selectTab={(x) => configStore.setSavedPalsOpen(x === "open")}
+      />
+    </div>
+    {#if $configStore.savedPalsOpen}
+      <SavedPals />
+    {/if}
   </section>
 </div>
 

diff --git a/src/stores/config-store.ts b/src/stores/config-store.ts
@@ -2,7 +2,8 @@ import { writable } from "svelte/store";
 
 interface StoreData {
   route: "examples" | "compare" | "eval";
-  leftRoute: "controls" | "saved-pals";
+  controlsOpen: boolean;
+  savedPalsOpen: boolean;
   comparePal: string | undefined;
   colorSim: "deuteranopia" | "protanopia" | "tritanopia" | "none";
   includeQuotes: boolean;
@@ -16,7 +17,8 @@ interface StoreData {
 
 const InitialStore: StoreData = {
   route: "examples",
-  leftRoute: "controls",
+  controlsOpen: false,
+  savedPalsOpen: true,
   comparePal: undefined,
   colorSim: "none",
   includeQuotes: false,
@@ -67,8 +69,10 @@ function createStore() {
       persist((old) => ({ ...old, showColorBackground: n })),
     setTooltipXY: (xy: StoreData["tooltipXY"]) =>
       persist((old) => ({ ...old, tooltipXY: xy })),
-    setLeftRoute: (route: StoreData["leftRoute"]) =>
-      persist((old) => ({ ...old, leftRoute: route })),
+    setControlsOpen: (n: StoreData["controlsOpen"]) =>
+      persist((old) => ({ ...old, controlsOpen: n })),
+    setSavedPalsOpen: (n: StoreData["savedPalsOpen"]) =>
+      persist((old) => ({ ...old, savedPalsOpen: n })),
   };
 }