feat: when table row clicked right side panel appear

src/pages/TrustRelationship/TrustRelationshipTable.js

@@ -24,6 +24,7 @@ import {
   TableCellStyled,
   TooltipStyled,
 } from '../MyTransfers/TransfersTable.styled';
+import TrustRelationshipSidePanel from './trustRelationshipSidePanel';
 
 const TrustRelationshipTableHeader = ({ tableTitle }) => {
   return (
@@ -131,9 +132,19 @@ const TrustRelationshipTableBody = ({ tableColumns, tableRows }) => {
   // State to track the index of the selected row
   const [selectedRowIndex, setSelectedRowIndex] = useState(null);
 
-  // Function to handle row click
+  // state to track if side panel is open when you click the row on table 
+  const [isSidePanelOpen, setIsSidePanelOpen] = useState(false);
+
+  // Function to handle row click and open side panel
   const handleRowClick = (rowIndex) => {
     setSelectedRowIndex(rowIndex);
+    setIsSidePanelOpen(true);
+  };
+
+    //function to close side panel
+  const handleClosePanel = () => {
+    setIsSidePanelOpen(false);
+    setSelectedRowIndex(null);
   };
 
   const { isLoading } = useTrustRelationshipsContext();
@@ -160,6 +171,7 @@ const TrustRelationshipTableBody = ({ tableColumns, tableRows }) => {
     );
 
   return (
+    <>
     <TableBody>
       {sortedTableRows &&
         sortedTableRows.map((row, rowIndex) => {
@@ -204,6 +216,14 @@ const TrustRelationshipTableBody = ({ tableColumns, tableRows }) => {
           );
         })}
     </TableBody>
+    {isSidePanelOpen && (
+        <TrustRelationshipSidePanel
+          open={open}
+          onClose={handleClosePanel}
+        />
+      )}
+
+    </>
   );
 };
 

src/pages/TrustRelationship/trustRelationshipSidePanel.js

@@ -0,0 +1,52 @@
+import {
+    Typography,
+    Button, 
+    IconButton,
+    List, 
+    ListItem, 
+    ListItemText 
+  } from '@mui/material';
+  import { DrawerStyled, DrawerHeaderStyled } from '../../components/layout/Menu/MenuStyled.js';
+  import CloseIcon from '@mui/icons-material/Close';
+
+function TrustRelationshipSidePanel({ open, onClose }) {
+    return (
+    <DrawerStyled variant="permanent" open={open} anchor="right" sx={{ zIndex: 10 }}>
+        <DrawerHeaderStyled>
+          <IconButton onClick={onClose}>
+            <CloseIcon />
+          </IconButton>
+        </DrawerHeaderStyled>
+
+            <Typography variant="h4" sx={{fontWeight:'700', marginLeft: '2rem'}}>Establish Trust</Typography>
+            <Typography variant="h4" sx={{fontWeight:'700', marginLeft: '2rem'}}>Relationship</Typography>
+
+           <List>
+           <ListItem>
+            <ListItemText primary="Source Wallet" secondary="WalletZ" />
+          </ListItem>
+
+          <ListItem>
+            <ListItemText primary="Target Wallet" secondary="WalletX" />
+          </ListItem>
+
+          <ListItem>
+            <ListItemText primary="Initiated By" secondary="WalletX" />
+          </ListItem>
+
+          <ListItem>
+            <ListItemText primary="Request Type" secondary="Send" />
+          </ListItem>
+           </List>
+
+            <Button variant="contained" color="primary">
+              Accept
+            </Button>
+            <Button variant="outlined">
+              Decline
+            </Button>
+        </DrawerStyled>
+    );
+  }
+
+  export default TrustRelationshipSidePanel;