update 10/9

src/assets/css/style.css

@@ -74,6 +74,7 @@
 .header-tab .close-tabbar {
   text-align: right;
   font-size: 20px;
+  cursor: pointer;
 }
 
 .step {

src/nodes/NoteFlow.tsx

@@ -89,18 +89,25 @@ const NoteFlow = () => {
   const [showPopup, setShowPopup] = useState(false);
   const [selectedNodeContent, setSelectedNodeContent] = useState('');
   const [addNodeCallback, setAddNodeCallback] = useState(() => () => {});
+  const [isTabbarVisible, setIsTabbarVisible] = useState(false);
 
   const handleAddNoteClick = () => {
     setShowTabBar(true);
+    setIsTabbarVisible(true);
     setAddNodeCallback(() => (selectedNode) => {
       addNodeBetween(selectedNode, sourceId, targetId);
     });
   };
+  const closeTabbar = () => {
+    console.log('aaa');
+    setIsTabbarVisible(false); // Ẩn tabbar khi click close
+  };
 
   const onNodeClick = (event, node) => {
     if (node.id === '2') {
       // Check if the clicked node is "Add Note"
       setShowTabBar(true);
+      setIsTabbarVisible(true);
     } else {
       // Hiển thị popup khi click vào bất kỳ node nào
       const content = nodeContents[node.key]; // Lấy nội dung tương ứng của node
@@ -349,7 +356,9 @@ const NoteFlow = () => {
         <Background variant={BackgroundVariant.Lines} color='#ccccc' />
       </ReactFlow>
 
-      {showTabBar && <Tabbar addNode={addNode} />}
+      {isTabbarVisible && (
+        <Tabbar addNode={addNode} closeTabbar={closeTabbar} />
+      )}
 
       {nodeToDelete && (
         <div

src/nodes/Tabbar.tsx

@@ -157,20 +157,23 @@ const tabBarOptions = [
   }
 ];
 
-const Tabbar = ({ addNode }) => {
+const Tabbar = ({ addNode, closeTabbar }) => {
   const [selectedNodeId, setSelectedNodeId] = useState(null);
 
   const handleTabClick = (option) => {
     addNode(option);
     // Cập nhật selectedNodeId với ID của node được chọn
     setSelectedNodeId(option.id);
+    closeTabbar();
   };
 
   return (
     <>
       <div className='PopupTabBar'>
         <div className='header-tab'>
-          <div className='close-tabbar'>✖</div>
+          <div className='close-tabbar' onClick={closeTabbar}>
+            ✖
+          </div>
         </div>
         <h3 className='tittle'>Rules</h3>
         <div className='itemTab grid'>