feat: make popover animation work

hms-dbmi · Jul 23, 2024 · ae74d62 · ae74d62
1 parent 51ec420
commit ae74d62
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
     /* #deckgl-overlay { border: 1px solid red; } */
   </style>
   </head>
-  <body class="bg-black">
+  <body class="bg-black overflow-hidden 100-vh 100-wh">
     <div id="root"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <script type="module" src="/main.ts"></script>

diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
@@ -4,28 +4,31 @@ import React, { useReducer } from "react";
 import { sourceInfoAtomAtoms } from "../state";
 import LayerController from "./LayerController";
 
-import { Button } from "@/components/ui/button";
 import { LayerContext } from "@/hooks";
+import { cn } from "@/lib/utils";
 import { MinusIcon, PlusIcon } from "@radix-ui/react-icons";
-import clsx from "clsx";
-import { Card } from "./ui/card";
 
 function Menu({ open = true }: { open?: boolean }) {
   const atoms = useAtomValue(sourceInfoAtomAtoms);
   const [hidden, toggle] = useReducer((v) => !v, !open);
   return (
-    <Card className={clsx("relative left-2 top-2 z-20 w-fit border-border rounded-lg", hidden && "rounded-full")}>
-      <Button onClick={toggle} variant="ghost" className="m-1 p-0 w-4 h-4 bg-none bg:hover-none cursor-pointer">
+    <div
+      className={cn(
+        "relative left-2 top-2 z-20 w-fit h-fit bg-card text-card-foreground rounded-lg",
+        hidden && "rounded-full p-0 m-0 w-5 h-5 flex items-center justify-center",
+      )}
+    >
+      <button type="button" onClick={toggle} className={cn("bg-card hover:bg-card cursor-pointer", !hidden && "ml-1")}>
         {hidden ? <PlusIcon /> : <MinusIcon />}
-      </Button>
-      <div className={clsx("max-h-[500px] m-1 bg-card no-scrollbar mb-1", hidden && "hidden")}>
+      </button>
+      <div className={cn("max-h-[500px] m-1 bg-card no-scrollbar pb-1")} hidden={hidden}>
         {atoms.map((sourceAtom) => (
           <LayerContext.Provider value={sourceAtom} key={`${sourceAtom}`}>
             <LayerController />
           </LayerContext.Provider>
         ))}
       </div>
-    </Card>
+    </div>
   );
 }