feat: display patient management related navigation buttons in floating menu form in navigation area

src/layouts/BusinessZone.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Space } from 'antd';
+import { Space, Dropdown, Menu } from 'antd';
 import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
 import {
@@ -159,6 +159,21 @@ const BusinessZone: React.FC<BusinessZoneProps> = ({ onMenuClick }) => {
     setFloatingMenuVisible(!floatingMenuVisible);
   };
 
+  const menu = (
+    <Menu>
+      {items
+        .find((item) => item.key === 'patient_management')
+        ?.children?.map((child) => (
+          <MeButton
+            key={child.key}
+            data-testid={child.key}
+            onClick={() => onMenuClick?.(child.key)}
+            username={child.label}
+          />
+        ))}
+    </Menu>
+  );
+
   return (
     <div
       style={{ width: '100%', overflow: 'hidden', position: 'relative' }}
@@ -184,32 +199,26 @@ const BusinessZone: React.FC<BusinessZoneProps> = ({ onMenuClick }) => {
                   item.key === currentKey ? 'border border-red-500' : ''
                 }
               >
-                <MeButton
-                  icon={item.icon}
-                  data-testid={item.key}
-                  onClick={
-                    item.key === 'patient_management'
-                      ? handlePatientManagementClick
-                      : () => onMenuClick?.(item.key ?? 'error')
-                  }
-                  username={item.label}
-                />
-                {item.key === 'patient_management' && floatingMenuVisible && (
-                  <Space direction="vertical" style={{ marginLeft: 20 }}>
-                    {item.children?.map((child) => (
-                      <MeButton
-                        data-testid={child.key}
-                        key={child.key}
-                        onClick={() => onMenuClick?.(child.key)}
-                        username={child.label}
-                        className={
-                          child.key === currentKey
-                            ? 'border border-red-500'
-                            : ''
-                        }
-                      />
-                    ))}
-                  </Space>
+                {item.key === 'patient_management' ? (
+                  <Dropdown
+                    overlay={menu}
+                    trigger={['click']}
+                    placement="topRight"
+                  >
+                    <MeButton
+                      icon={item.icon}
+                      data-testid={item.key}
+                      onClick={handlePatientManagementClick}
+                      username={item.label}
+                    />
+                  </Dropdown>
+                ) : (
+                  <MeButton
+                    icon={item.icon}
+                    data-testid={item.key}
+                    onClick={() => onMenuClick?.(item.key ?? 'error')}
+                    username={item.label}
+                  />
                 )}
               </div>
             )