style(navigation): change navigation area to expanded style on large screens, replacing floating menu style

src/layouts/BusinessZone.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Space, Menu, Popover } from 'antd';
+import { Space } from 'antd';
 import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
 import {
@@ -16,7 +16,7 @@ interface BusinessZoneProps {
 }
 
 const BusinessZone: React.FC<BusinessZoneProps> = ({ onMenuClick }) => {
-  //eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line
   const currentKey = useSelector((state: any) => state.BusinessFlow.currentKey);
   const items = [
     {
@@ -159,25 +159,6 @@ 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={() => {
-              setFloatingMenuVisible(false);
-              onMenuClick?.(child.key);
-            }}
-            username={child.label}
-            className={child.key === currentKey ? 'border border-red-500' : ''}
-          />
-        ))}
-    </Menu>
-  );
-
   return (
     <div
       style={{ width: '100%', overflow: 'hidden', position: 'relative' }}
@@ -203,31 +184,32 @@ const BusinessZone: React.FC<BusinessZoneProps> = ({ onMenuClick }) => {
                   item.key === currentKey ? 'border border-red-500' : ''
                 }
               >
-                {item.key === 'patient_management' ? (
-                  <Popover
-                    open={floatingMenuVisible}
-                    placement="rightTop"
-                    content={menu}
-                    trigger="click"
-                    arrow={false}
-                  >
-                    <MeButton
-                      icon={item.icon}
-                      data-testid={item.key}
-                      onClick={handlePatientManagementClick}
-                      username={item.label}
-                    />
-                  </Popover>
-                ) : (
-                  <MeButton
-                    icon={item.icon}
-                    data-testid={item.key}
-                    onClick={() => {
-                      setFloatingMenuVisible(false);
-                      onMenuClick?.(item.key ?? 'error');
-                    }}
-                    username={item.label}
-                  />
+                <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>
                 )}
               </div>
             )