fix menus

src/App.jsx

@@ -1,17 +1,22 @@
 import React, { useState } from 'react';
-import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import { AppstoreOutlined, MailOutlined, SettingOutlined, CloseOutlined } from '@ant-design/icons';
 import { Menu } from 'antd';
 import { Radio, Tabs } from 'antd';
 const items = [
+  {
+    key: 'Dashboard',
+    icon: <MailOutlined />,
+    label: 'Dashboard'
+  },
   {
     key: '1',
     icon: <MailOutlined />,
-    label: 'Navigation One',
+    label: 'Master',
     children: [
-      { key: '11', label: 'Option 1' },
-      { key: '12', label: 'Option 2' },
-      { key: '13', label: 'Option 3' },
-      { key: '14', label: 'Option 4' },
+      { key: 'Users', label: 'Users' },
+      { key: 'Devices', label: 'Devices' },
+      { key: 'Tags', label: 'Tags' },
+      { key: 'Products', label: 'Products' },
     ],
   },
   {
@@ -72,28 +77,28 @@ const levelKeys = getLevelKeys(items);
 const TheChild = () => {return(<div>Hahalo</div>)}
 const App = () => {
   // const [stateOpenKeys, setStateOpenKeys] = useState(['2', '23']);
-  const [stateOpenKeys, setStateOpenKeys] = useState(['1']);
+  const [stateOpenKeys, setStateOpenKeys] = useState(['0']);
 
   const [itemsTab, setItemsTab] = useState([
     {
-      label: 'Tab 1',
-      key: '1',
-      children: 'Content of editable tab 1',
-    },
-    {
-      label: 'Tab 2',
-      key: '2',
-      children: 'Content of editable tab 2',
-    },
-    {
-      label: 'Tab 3',
-      key: '3',
-      // children: 'Content of editable tab 3',
+      label: 'Dashboard',
+      key: 'Dashboard',
       children: <TheChild />,
     },
+    // {
+    //   label: 'Tab 2',
+    //   key: '2',
+    //   children: 'Content of editable tab 2',
+    // },
+    // {
+    //   label: 'Tab 3',
+    //   key: '3',
+    //   // children: 'Content of editable tab 3',
+    //   children: <TheChild />,
+    // },
   ]);
   const [size, setSize] = useState('small');
-  const [activeKey, setActiveKey] = useState('1');
+  const [activeKey, setActiveKey] = useState('Dashboard');
 
   const onOpenChange = openKeys => {
     const currentOpenKey = openKeys.find(key => stateOpenKeys.indexOf(key) === -1);
@@ -127,25 +132,35 @@ const App = () => {
     }
     setItemsTab(newItems);
   };
-  const add = () => {
+  const add = (key) => {
     // const newKey = String((items || []).length + 1);
-    const newKey = String((itemsTab || []).length + 1);
-    console.log("newKey", newKey)
+    // const newKey = String((itemsTab || []).length + 1);
+    // console.log("newKey", newKey)
     // console.log("items", items)
-    console.log("itemsTab", itemsTab)
-    setItemsTab([
-      ...(itemsTab || []),
-      {
-        label: `Tab ${newKey}`,
-        key: newKey,
-        children: `Content of editable tab ${newKey}`,
-      },
-    ]);
-    setActiveKey(newKey);
+    // console.log("itemsTab before", itemsTab)
+    let newtab = {
+      // label: `Tab ${newKey}`,
+      label: `${key[0]}`,
+      key: key[0],
+      children: `Content of editable tab ${key[0]}`,
+    }
+
+    if (!itemsTab.find(item => item.key === newtab.key)) {
+      setItemsTab([
+        ...(itemsTab || []),
+        newtab,
+      ]);
+    } else {
+      // Do nothing
+      console.log("Do nothing")
+    }
+
+    setActiveKey(key[0]);
   };
-  const onEdit = (targetKey, action) => {
+  const onAddTab = (targetKey, action) => {
     if (action === 'add') {
-      add();
+      add(key);
+      // console.log("Plus plus")
     } else {
       // console.log("targetKey", targetKey)
       remove(targetKey);
@@ -154,22 +169,39 @@ const App = () => {
   // const onChange = e => {
   //   setSize(e.target.value);
   // };
+
+  const renderTabBar = (props, DefaultTabBar) => {
+    return (
+      <DefaultTabBar {...props}>
+        {(node) => {
+          // Filter out the add button node
+          if (node.key && node.key.toString().startsWith('rc-tabs-add')) {
+            return null;
+          }
+          return node;
+        }}
+      </DefaultTabBar>
+    );
+  };
+
   return (
     <React.Fragment>
       <div
         style={{
-          display: "flex"
+          display: "flex",
+          height: "100vh"
         }}
       >
         <Menu
           mode="inline"
-          defaultSelectedKeys={['231']}
+          // defaultSelectedKeys={['231']}
+          defaultSelectedKeys={['Dashboard']}
           openKeys={stateOpenKeys}
           onOpenChange={onOpenChange}
           style={{ width: 256 }}
           items={items}
-          // onClick={(e) => {console.log(e.key)}}
-          onClick={(e) => add()}
+          // onClick={(e) => {console.log(e)}}
+          onClick={(e) => add(e.keyPath)}
         />
         <div
           style={{
@@ -179,11 +211,15 @@ const App = () => {
         >
           <Tabs
             type="editable-card"
+            // type="card"
             size={size}
             activeKey={activeKey}
             onChange={setActiveKey}
-            onEdit={onEdit}
+            onEdit={onAddTab}
             items={itemsTab}
+            hideAdd
+            // removeIcon={<CloseOutlined />}
+            // renderTabBar={renderTabBar}
           />
         </div>
       </div>

src/index.css

@@ -25,7 +25,7 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
+  /* place-items: center; */
   min-width: 320px;
   min-height: 100vh;
 }

src/main.jsx

@@ -1,6 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './index.css'
+// import './index.css'
 import App from './App.jsx'
 import 'antd/dist/reset.css'; // Ant Design base styles