move connection list into header

jdeniau · Feb 24, 2024 · 7a4d0c8 · 7a4d0c8
1 parent a6e1e06
commit 7a4d0c8
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 27 deletions.
diff --git a/src/component/Connection/Nav.stories.tsx b/src/component/Connection/Nav.stories.tsx
@@ -2,6 +2,16 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { ConnectionContext } from '../../Contexts';
 import Nav from './Nav';
+import styled from 'styled-components';
+import { Layout } from 'antd';
+import { getSetting } from '../../theme';
+
+const Header = styled(Layout.Header)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: ${({ theme }) => getSetting(theme, 'selection')};
+`;
 
 const meta: Meta<typeof Nav> = {
   component: Nav,
@@ -21,6 +31,11 @@ const meta: Meta<typeof Nav> = {
         <Story />
       </ConnectionContext.Provider>
     ),
+    (Story) => (
+      <Header>
+        <Story />
+      </Header>
+    ),
   ],
 };
 

diff --git a/src/component/Connection/Nav.tsx b/src/component/Connection/Nav.tsx
@@ -1,7 +1,15 @@
 import { Link } from 'react-router-dom';
 import { ReactElement, useContext } from 'react';
-import { Button } from 'antd';
+import { Button, Menu } from 'antd';
 import { ConnectionContext } from '../../Contexts';
+import { getSetting } from '../../theme';
+import { styled } from 'styled-components';
+
+const StyledMenu = styled(Menu)`
+  flex: 1;
+  min-width: 0;
+  background-color: ${({ theme }) => getSetting(theme, 'selection')};
+`;
 
 export default function Nav(): ReactElement {
   const {
@@ -10,30 +18,35 @@ export default function Nav(): ReactElement {
     currentConnectionName,
   } = useContext(ConnectionContext);
 
-  return (
-    <nav className="nav nav-pills flex-column">
-      {connectionNameList.map((connection, i) => (
-        <Button
-          block
-          type={connection === currentConnectionName ? 'primary' : 'link'}
-        >
-          <Link
-            key={i}
-            onClick={() => {
-              setCurrentConnectionName(connection);
-            }}
-            to="/tables"
-          >
-            {/* {connection.config.host &&
-            connection.config.host.substr(0, 1).toUpperCase()} */}
+  if (!connectionNameList.length) {
+    return null;
+  }
+
+  const items = connectionNameList.map((connection) => ({
+    key: connection,
+    label: (
+      <Link
+        onClick={() => {
+          setCurrentConnectionName(connection);
+        }}
+        to="/tables"
+      >
+        {connection}
+      </Link>
+    ),
+  }));
 
-            {connection}
-          </Link>
-        </Button>
-      ))}
-      <Button type="link" block>
+  return (
+    <>
+      <Button style={{ margin: '0 10px' }}>
         <Link to="/connect">new…</Link>
       </Button>
-    </nav>
+
+      <StyledMenu
+        mode="horizontal"
+        selectedKeys={[currentConnectionName]}
+        items={items}
+      />
+    </>
   );
 }
diff --git a/src/routes/root.tsx b/src/routes/root.tsx
@@ -9,18 +9,20 @@ import Debug from '../component/Debug';
 import ThemeSelector from '../component/ThemeSelector';
 import { Layout } from 'antd';
 import { getSetting } from '../theme';
+import ConnectionNav from '../component/Connection/Nav';
 
 const Header = styled(Layout.Header)`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: ${({ theme }) => getSetting(theme, 'background')};
+  background-color: ${({ theme }) => getSetting(theme, 'selection')};
 `;
 
 const Content = styled(Layout.Content)`
   padding: 16px;
   display: flex;
   flex-direction: column;
+  background-color: ${({ theme }) => getSetting(theme, 'background')};
 `;
 
 export default function Root() {
@@ -32,6 +34,9 @@ export default function Root() {
             <Debug />
             <Header>
               <h2>Tiana Tables</h2>
+
+              <ConnectionNav />
+
               <div>
                 Theme: <ThemeSelector />
               </div>

diff --git a/src/routes/tables.tsx b/src/routes/tables.tsx
@@ -3,7 +3,6 @@ import { styled } from 'styled-components';
 import { getSetting } from '../theme';
 import DatabaseSelector from '../component/DatabaseSelector';
 import TableList from '../component/TableList';
-import ConnectionNav from '../component/Connection/Nav';
 
 const ContentDiv = styled.div`
   display: flex;
@@ -14,7 +13,6 @@ const LeftPanelDiv = styled.div`
   min-width: 200px;
   overflow: auto;
   padding: 0 10px;
-  border-left: 1px solid ${(props) => getSetting(props.theme, 'foreground')};
   border-right: 1px solid ${(props) => getSetting(props.theme, 'foreground')};
 `;
 
@@ -27,7 +25,6 @@ const RightPanelDiv = styled.div`
 export function Tables() {
   return (
     <ContentDiv>
-      <ConnectionNav />
       <LeftPanelDiv>
         <DatabaseSelector />
         <TableList />