From 8a48cd206e7bedce39475f3d64cdb59cf76abcfe Mon Sep 17 00:00:00 2001
From: Maciej Bodek <maciej.bodek@gmail.com>
Date: Fri, 15 Sep 2023 19:32:52 +0200
Subject: [PATCH] wip: new nav ux

---
 .../src/components/Sidebar/index.tsx          |  8 ++++
 .../web-console/src/scenes/Console/index.tsx  | 39 +++++++++++++++++--
 .../web-console/src/scenes/Layout/index.tsx   |  6 +--
 3 files changed, 46 insertions(+), 7 deletions(-)
 create mode 100644 packages/web-console/src/components/Sidebar/index.tsx

diff --git a/packages/web-console/src/components/Sidebar/index.tsx b/packages/web-console/src/components/Sidebar/index.tsx
new file mode 100644
index 000000000..68dd5669b
--- /dev/null
+++ b/packages/web-console/src/components/Sidebar/index.tsx
@@ -0,0 +1,8 @@
+import styled from "styled-components"
+import { Box } from "../Box"
+
+export const Sidebar = styled(Box).attrs({ flexDirection: "column" })`
+  width: 4rem;
+  height: 100%;
+  background: ${({ theme }) => theme.color.backgroundDarker};
+`
diff --git a/packages/web-console/src/scenes/Console/index.tsx b/packages/web-console/src/scenes/Console/index.tsx
index 6e4e6c700..01f59f5ce 100644
--- a/packages/web-console/src/scenes/Console/index.tsx
+++ b/packages/web-console/src/scenes/Console/index.tsx
@@ -10,8 +10,10 @@ import { useCallback } from "react"
 import { BusEvent } from "../../consts"
 import { useLocalStorage } from "../../providers/LocalStorageProvider"
 import { StoreKey } from "../../utils/localStorage/types"
-import { useSelector } from "react-redux"
-import { selectors } from "../../store"
+import { useSelector, useDispatch } from "react-redux"
+import { selectors, actions } from "../../store"
+import { Sidebar } from "../../components/Sidebar"
+import { color } from "../../utils"
 
 const Root = styled.div`
   display: flex;
@@ -25,11 +27,29 @@ const Top = styled.div`
   overflow: hidden;
 `
 
+const Bottom = styled.div`
+  display: flex;
+  flex: 1;
+`
+
+const Logo = styled.div`
+  position: relative;
+  display: flex;
+  width: 4rem;
+  height: 4rem;
+  background: ${color("black")};
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`
+
 const Console = () => {
   const { sm } = useScreenSize()
   const { editorSplitterBasis, resultsSplitterBasis, updateSettings } =
     useLocalStorage()
   const result = useSelector(selectors.query.getResult)
+  const dispatch = useDispatch()
 
   const handleEditorSplitterChange = useCallback((value) => {
     updateSettings(StoreKey.EDITOR_SPLITTER_BASIS, value)
@@ -55,6 +75,16 @@ const Console = () => {
           onChange={handleEditorSplitterChange}
         >
           <Top>
+            <Sidebar>
+              <Logo
+                onClick={() =>
+                  dispatch(actions.console.setActivePanel("console"))
+                }
+              >
+                <img alt="QuestDB Logo" height="26" src="/assets/favicon.svg" />
+              </Logo>
+              top
+            </Sidebar>
             <Splitter
               direction="horizontal"
               fallback={resultsSplitterBasis}
@@ -65,7 +95,10 @@ const Console = () => {
               <Editor />
             </Splitter>
           </Top>
-          {result ? <Result /> : <ZeroState />}
+          <Bottom>
+            <Sidebar>bottom</Sidebar>
+            {result ? <Result /> : <ZeroState />}
+          </Bottom>
         </Splitter>
       </EditorProvider>
     </Root>
diff --git a/packages/web-console/src/scenes/Layout/index.tsx b/packages/web-console/src/scenes/Layout/index.tsx
index 3032e8414..b6dca99bd 100644
--- a/packages/web-console/src/scenes/Layout/index.tsx
+++ b/packages/web-console/src/scenes/Layout/index.tsx
@@ -31,7 +31,6 @@ import Import from "../Import"
 import Settings from "../Settings"
 import News from "../News"
 import SideMenu from "../SideMenu"
-import Sidebar from "../Sidebar"
 import { QuestProvider } from "../../providers"
 import { useSelector } from "react-redux"
 import { selectors } from "../../store"
@@ -60,9 +59,6 @@ const Layout = () => {
 
   return (
     <QuestProvider>
-      <Sidebar />
-      <Footer />
-
       <Page style={{ display: activePanel === "console" ? "flex" : "none" }}>
         <Console />
       </Page>
@@ -80,6 +76,8 @@ const Layout = () => {
       </Page>
 
       <SideMenu />
+
+      <Footer />
     </QuestProvider>
   )
 }