add sidebar alignment option

questdb · Oct 10, 2023 · 326349c · 326349c
1 parent f5fa241
commit 326349c
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/packages/web-console/src/components/Sidebar/index.tsx b/packages/web-console/src/components/Sidebar/index.tsx
@@ -1,10 +1,11 @@
 import styled from "styled-components"
 import { Box } from "../Box"
 
-export const Sidebar = styled(Box).attrs({ flexDirection: "column" })`
+export const Sidebar = styled(Box).attrs({ flexDirection: "column" })<{align?: "top" | "bottom"}>`
   width: 4.5rem;
   height: 100%;
   background: ${({ theme }) => theme.color.backgroundDarker};
   gap: 0;
   flex-shrink: 0;
+  justify-content: ${({align}) => align === "top" ? "flex-start" : "flex-end"};
 `
diff --git a/packages/web-console/src/scenes/Console/index.tsx b/packages/web-console/src/scenes/Console/index.tsx
@@ -91,7 +91,7 @@ const Console = () => {
         onChange={handleEditorSplitterChange}
       >
         <Top>
-          <Sidebar>
+          <Sidebar align="top">
             <PopperHover
               delay={350}
               placement="bottom"

diff --git a/packages/web-console/src/scenes/Layout/index.tsx b/packages/web-console/src/scenes/Layout/index.tsx
@@ -149,7 +149,7 @@ const Layout = () => {
 
           <Drawer id="side-panel-right" />
 
-          <Sidebar>
+          <Sidebar align="top">
             <DropdownMenu.Root modal={false}>
               <DropdownMenu.Trigger asChild>
                 <PrimaryToggleButton>