sidebar tabs

frontend/src/components/sidebar/Sidebar.tsx

@@ -5,31 +5,46 @@ import { combineClasses, inPx } from "../../util/helpers";
 import AddServer from "../create/Server";
 import { TOPBAR_HEIGHT } from "../topbar/Topbar";
 import Grid from "../util/layout/Grid";
+import Tabs from "../util/tabs/Tabs";
 import Builds from "./builds/Builds";
 import Server from "./server/Server";
 import s from "./sidebar.module.css";
 
 const SIDEBAR_WIDTH = 350;
 
-const Sidebar: Component<{}> = (p) => {
+const Sidebar: Component<{}> = () => {
   const { sidebar, servers } = useAppState();
   const { height } = useAppDimensions();
   return (
     <Show when={servers.loaded() && sidebar.open()}>
-      <Grid
-        class={combineClasses(s.Sidebar, "shadow", "scroller")}
-        style={{
+      <Tabs
+        containerClass={combineClasses(s.Sidebar, "shadow")}
+        containerStyle={{
           width: inPx(SIDEBAR_WIDTH),
           height: inPx(height() - TOPBAR_HEIGHT),
         }}
-      >
-        <Grid style={{ height: "fit-content", padding: "1rem" }}>
-          <For each={servers.ids()}>{(id) => <Server id={id} />}</For>
-          <AddServer />
-          <div class={s.Divider} />
-          <Builds />
-        </Grid>
-      </Grid>
+        tabsGap="0rem"
+        tabs={[
+          {
+            title: "deployments",
+            element: (
+              <Grid  style={{ height: "fit-content", padding: "0rem 1rem" }}>
+                <For each={servers.ids()}>{(id) => <Server id={id} />}</For>
+                <AddServer />
+              </Grid>
+            ),
+          },
+          {
+            title: "builds",
+            element: (
+              <Grid style={{ height: "fit-content", padding: "0rem 1rem" }}>
+                <Builds />
+              </Grid>
+            ),
+          },
+        ]}
+        localStorageKey="sidebar-tab"
+      />
     </Show>
   );
 };

frontend/src/components/sidebar/builds/Builds.tsx

@@ -34,6 +34,15 @@ const Builds: Component<{}> = (p) => {
       </Show>
     </div>
   );
+  // return (
+  //   <Grid
+  //     gap=".5rem"
+  //     class={combineClasses(s.Deployments)}
+  //   >
+  //     <For each={builds.ids()}>{(id) => <Build id={id} />}</For>
+  //     <CreateBuild />
+  //   </Grid>
+  // );
 };
 
 export default Builds;

frontend/src/components/util/tabs/Tabs.module.css

@@ -4,13 +4,6 @@
   gap: 1rem;
 }
 
-.TabTitles {
-  display: flex;
-  align-items: center;
-  justify-content: space-evenly;
-  gap: 1rem;
-}
-
 .Tab {
   display: grid;
   place-items: center;
@@ -19,7 +12,6 @@
   cursor: pointer;
   font-size: 1rem;
   width: 100%;
-
   background-color: rgba(2, 107, 121, 0);
   border-bottom: solid 2px rgba(2, 107, 121, 0.5);
   transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out;

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

@@ -1,6 +1,7 @@
 import { Component, createSignal, For, JSX, JSXElement } from "solid-js";
 import { combineClasses } from "../../../util/helpers";
 import { useLocalStorage } from "../../../util/hooks";
+import Flex from "../layout/Flex";
 import s from "./Tabs.module.css";
 
 export type Tab = {
@@ -13,8 +14,8 @@ const Tabs: Component<{
   tabs: Tab[];
   defaultSelected?: string;
   localStorageKey?: string;
+  tabsGap?: string;
   tabStyle?: JSX.CSSProperties;
-  titleElement?: JSXElement;
   titleStyle?: JSX.CSSProperties;
   containerClass?: string;
   containerStyle?: JSX.CSSProperties;
@@ -29,7 +30,7 @@ const Tabs: Component<{
     selected() === title ? combineClasses(s.Tab, s.Active) : s.Tab;
   return (
     <div class={combineClasses(s.Tabs, p.containerClass)} style={p.containerStyle}>
-      <div class={s.TabTitles}>
+      <Flex gap={p.tabsGap} alignItems="center" justifyContent="space-evenly">
         <For each={p.tabs}>
           {(tab) => (
             <button
@@ -41,8 +42,7 @@ const Tabs: Component<{
             </button>
           )}
         </For>
-        {p.titleElement}
-      </div>
+      </Flex>
       {current().element}
     </div>
   );