fix: close panel in direction of panelLocation (#147)

closes #146

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: Pascalmh

packages/devtools/src/components/main-panel.tsx

@@ -27,7 +27,11 @@ export const MainPanel = (props: {
           settings().panelLocation,
           Boolean(pip().pipWindow),
         ),
-        styles().devtoolsPanelContainerAnimation(props.isOpen(), height()),
+        styles().devtoolsPanelContainerAnimation(
+          props.isOpen(),
+          height(),
+          settings().panelLocation,
+        ),
         styles().devtoolsPanelContainerVisibility(props.isOpen()),
         styles().devtoolsPanelContainerResizing(props.isResizing),
       )}

packages/devtools/src/styles/use-styles.ts

@@ -166,7 +166,11 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
         transition: all 0.4s ease;
       `
     },
-    devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => {
+    devtoolsPanelContainerAnimation: (
+      isOpen: boolean,
+      height: number,
+      panelLocation: TanStackDevtoolsConfig['panelLocation'],
+    ) => {
       if (isOpen) {
         return css`
           pointer-events: auto;
@@ -175,7 +179,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       }
       return css`
         pointer-events: none;
-        transform: translateY(${height}px);
+        transform: translateY(${panelLocation === 'top' ? -height : height}px);
       `
     },
     devtoolsPanel: css`