nice tab animation

frontend/src/components/sidebar/sidebar.module.scss

@@ -28,6 +28,7 @@
 .Server {
   background-color: c.$lightgrey;
   height: fit-content;
+  cursor: pointer;
 }
 
 .DeploymentsTabContent {

frontend/src/components/util/tabs/Tabs.tsx

@@ -11,6 +11,7 @@ import {
 import { combineClasses } from "../../../util/helpers";
 import { LocalStorageSetter, useLocalStorage } from "../../../util/hooks";
 import Flex from "../layout/Flex";
+import Grid from "../layout/Grid";
 import s from "./tabs.module.scss";
 
 export type Tab = {
@@ -28,7 +29,7 @@ const Tabs: Component<{
   containerClass?: string;
   containerStyle?: JSX.CSSProperties;
 }> = (p) => {
-  const tabs = createMemo(() => p.tabs.filter(val => val) as Tab[])
+  const tabs = createMemo(() => p.tabs.filter((val) => val) as Tab[]);
   const def = p.defaultSelected ? p.defaultSelected : tabs()[0].title;
   const [selected, set] = p.localStorageKey
     ? useLocalStorage(def, p.localStorageKey)
@@ -37,7 +38,7 @@ const Tabs: Component<{
     if (tabs().filter((tab) => tab.title === selected())[0] === undefined) {
       set(tabs()[0].title);
     }
-  })
+  });
   return <ControlledTabs selected={selected} set={set} {...p} />;
 };
 
@@ -51,7 +52,7 @@ export const ControlledTabs: Component<{
   containerStyle?: JSX.CSSProperties;
 }> = (p) => {
   const tabs = createMemo(() => p.tabs.filter((val) => val) as Tab[]);
-  const current = () => tabs().findIndex((tab) => tab.title === p.selected())
+  const current = () => tabs().findIndex((tab) => tab.title === p.selected());
   const getClassName = (title: string) =>
     p.selected() === title ? combineClasses(s.Tab, s.Active) : s.Tab;
   return (
@@ -76,7 +77,30 @@ export const ControlledTabs: Component<{
           )}
         </For>
       </Flex>
-      {tabs()[current()].element}
+      <div style={{ overflow: "hidden" }}>
+        <Flex
+          style={{
+            width: `${tabs().length * 100}%`,
+            transform: `translateX(-${(current() / tabs().length) * 100}%)`,
+            transition: "transform 350ms ease",
+          }}
+        >
+          <For each={tabs()}>
+            {(tab, i) => (
+              <div
+                style={{
+                  width: "100%",
+                  // opacity: current() === i() ? 1 : 0,
+                  // transition: "opacity 150ms ease",
+                }}
+              >
+                {tab.element}
+              </div>
+            )}
+          </For>
+        </Flex>
+      </div>
+      {/* {tabs()[current()].element} */}
     </div>
   );
 };