From 4dba3c1de6e96b17692c621c08edfaf1abfa6ff2 Mon Sep 17 00:00:00 2001
From: Mahmoud Mabrouk <mahmoud.mabrouk@tu-berlin.de>
Date: Mon, 22 May 2023 14:14:35 +0200
Subject: [PATCH] Fix sidebar

Apparently Menu.Item should be the only children for Menu. I swapped the Tooltip and Menu.Item to fix the problem
---
 agenta-web/src/components/Sidebar/Sidebar.tsx | 102 +++++++++++-------
 1 file changed, 64 insertions(+), 38 deletions(-)

diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx
index 2676426eb3..51adee700a 100644
--- a/agenta-web/src/components/Sidebar/Sidebar.tsx
+++ b/agenta-web/src/components/Sidebar/Sidebar.tsx
@@ -16,51 +16,77 @@ const Sidebar: React.FC = () => {
   } = theme.useToken();
 
   return (
-    <Sider width={180} style={{ paddingTop: '40px', paddingLeft: '30px', paddingRight: '10px', background: colorBgContainer }}>
+    <Sider width={180} style={{ paddingTop: '40px', paddingLeft: '10px', paddingRight: '10px', background: colorBgContainer }}>
 
       <Menu
         mode="inline"
         defaultSelectedKeys={['1']}
-        defaultOpenKeys={['sub1']}
         style={{ borderRight: 0 }}
       >
-        <Tooltip placement="right" title="Experiment with real data and optimize your parameters including prompts, methods, and configuration settings.">
-          <Menu.Item key="1" icon={<RocketOutlined />} onClick={() => navigate('/playground')}>
-            Playground
-          </Menu.Item>
-        </Tooltip>
-        <Tooltip placement="right" title="Create and manage datasets for evaluation purposes.">
-          <Menu.Item key="2" icon={<DatabaseOutlined />} onClick={() => navigate('/datasets')}>
-            Datasets
-          </Menu.Item>
-        </Tooltip>
-
-        <Tooltip placement="right" title="Perform 1-to-1 variant comparisons on datasets to identify superior options.">
-          <Menu.Item key="3" icon={<LineChartOutlined />} onClick={() => navigate('/evaluations')}>
-            Evaluate
-          </Menu.Item>
-        </Tooltip>
-        <Tooltip placement="right" title="Analyze the evaluation outcomes to determine the most effective variants.">
-          <Menu.Item key="4" icon={<BarChartOutlined />} onClick={() => navigate('/results')}>
-            Results
-          </Menu.Item>
-        </Tooltip>
-        <Tooltip placement="right" title="Establish VectorDB Knowledge Bases and upload pertinent documents.">
-          <Menu.Item key="5" icon={<FileTextOutlined />} onClick={() => navigate('/vectordb')} disabled={true}>
-            VectorDB
-          </Menu.Item>
-        </Tooltip>
-
-        <Tooltip placement="right" title="Transition the optimal variant into the production environment.">
-          <Menu.Item key="6" icon={<CloudUploadOutlined />} onClick={() => navigate('/deployements')} disabled={true}>
+        <Menu.Item key="1" icon={<RocketOutlined />} onClick={() => navigate('/playground')}>
+          <Tooltip placement="right" title="Experiment with real data and optimize your parameters including prompts, methods, and configuration settings.">
+            <div style={{ width: '100%' }}>
+              Playground
+            </div>
+          </Tooltip>
+
+        </Menu.Item>
+        <Menu.Item key="2" icon={<DatabaseOutlined />} onClick={() => navigate('/datasets')}>
+          <Tooltip placement="right" title="Create and manage datasets for evaluation purposes.">
+            <div style={{ width: '100%' }}>
+
+              Datasets
+            </div>
+          </Tooltip>
+
+        </Menu.Item>
+        <Menu.Item key="3" icon={<LineChartOutlined />} onClick={() => navigate('/evaluations')}>
+
+          <Tooltip placement="right" title="Perform 1-to-1 variant comparisons on datasets to identify superior options.">
+            <div style={{ width: '100%' }}>
+
+              Evaluate
+            </div>
+
+          </Tooltip>
+
+        </Menu.Item>
+        <Menu.Item key="4" icon={<BarChartOutlined />} onClick={() => navigate('/results')}>
+          <Tooltip placement="right" title="Analyze the evaluation outcomes to determine the most effective variants.">
+            <div style={{ width: '100%' }}>
+
+              Results
+            </div>
+          </Tooltip>
+
+        </Menu.Item>
+        <Menu.Item key="5" icon={<FileTextOutlined />} onClick={() => navigate('/vectordb')} disabled={true}>
+          <Tooltip placement="right" title="Establish VectorDB Knowledge Bases and upload pertinent documents.">
+            <div style={{ width: '100%' }}>
+
+              VectorDB
+            </div>
+          </Tooltip>
+
+        </Menu.Item>
+
+        <Menu.Item key="6" icon={<CloudUploadOutlined />} onClick={() => navigate('/deployements')} disabled={true}>
+          <Tooltip placement="right" title="Transition the optimal variant into the production environment.">
+            <div style={{ width: '100%' }}>
+            </div>
+
             Deployment
-          </Menu.Item>
-        </Tooltip>
-        <Tooltip placement="right" title="Monitor production logs to ensure seamless operations.">
-          <Menu.Item key="7" icon={<MonitorOutlined />} onClick={() => navigate('/logs')} disabled={true}>
-            Monitoring
-          </Menu.Item>
-        </Tooltip>
+          </Tooltip>
+        </Menu.Item>
+
+        <Menu.Item key="7" icon={<MonitorOutlined />} onClick={() => navigate('/logs')} disabled={true}>
+          <Tooltip placement="right" title="Monitor production logs to ensure seamless operations.">
+            <div style={{ width: '100%' }}>
+              Monitoring
+            </div>
+          </Tooltip>
+
+        </Menu.Item>
 
       </Menu>
     </Sider >