fix: fix the layout of fund transfer

src/app/(main)/funds_transfer/layout.tsx

@@ -1,71 +1,74 @@
 "use client";
-import { Button, Group } from '@mantine/core';
+import { Divider, Stack, Text } from '@mantine/core';
-import { IconHome } from '@tabler/icons-react';
+import { usePathname } from 'next/navigation';
 import Link from 'next/link';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { useRouter } from "next/navigation";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-    return (
+    const [authorized, SetAuthorized] = useState<boolean | null>(null);
-        <div style={{ display: "flex" }}>
+    const router = useRouter();
-            <div
+    const pathname = usePathname();
-                style={{
-                    // width: "250px",
-                    backgroundColor: '#c5e4f9',
-                    padding: "20px",
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "flex-start",
-                    gap: "20px",
-                    borderRight:"1px solid #ccc",
-                }}
-            >
-                <h2 style={{ fontSize: "20px", marginBottom: "10px" }}>Menu</h2>
 
-                <Link href="/" passHref>
+    const links = [
-                    <Button
+        { label: " Quick Pay", href: "/funds_transfer" },
-                        component="a"
+        { label: "Send to Beneficiary", href: "/accounts/account_statement" },
-                        leftSection={<IconHome size={16} />}
+        { label: "Transfer within the bank", href: "/accounts/account_statement" },
-                        variant="light"
+        { label: "Add Beneficary", href: "/accounts/account_statement" },
-                        color="blue"
+        { label: "View Beneficary ", href: "/accounts/account_statement" },
-                        fullWidth
+    ];
-                    >
+    useEffect(() => {
-                        Quick Pay
+        const token = localStorage.getItem("access_token");
-                    </Button>
+        if (!token) {
-                </Link>
+            SetAuthorized(false);
+            router.push("/login");
+        }
+        else {
+            SetAuthorized(true);
+        }
+    }, []);
 
-                <Link href="/" passHref>
+    if (authorized) {
-                    <Button
+        return (
-                        component="a"
+            <div style={{ display: "flex", height: '100%' }}>
-                        leftSection={<IconHome size={16} />}
+                <div
-                        variant="light"
+                    style={{
-                        color="blue"
+                        width: "16%",
-                        fullWidth
+                        backgroundColor: '#c5e4f9',
-                    >
+                        borderRight: "1px solid #ccc",
-                        Send to Beneficiary
+                    }}
-                    </Button>
+                >
-                </Link>
+                    <Stack style={{ background: '#228be6', height: '10%', alignItems: 'center' }}>
+                        <Text fw={700} fs="italic" c='white' style={{ textAlign: 'center', marginTop: '10px' }}>
+                            Send Money
+                        </Text>
+                    </Stack>
 
-                <Link href="/" passHref>
+                    <Stack gap="sm" justify="flex-start" style={{ padding: '1rem' }}>
-                    <Button
+                        {links.map(link => {
-                        component="a"
+                            const isActive = pathname === link.href;
-                        leftSection={<IconHome size={16} />}
+                            return (
-                        variant="light"
+                                <Text
-                        color="blue"
+                                    key={link.href}
-                        fullWidth
+                                    component={Link}
-                    >
+                                    href={link.href}
-                        Transfer within the bank
+                                    c={isActive ? 'darkblue' : 'blue'}
-                    </Button>
+                                    style={{
-                </Link>
+                                        textDecoration: isActive ? 'underline' : 'none',
+                                        fontWeight: isActive ? 600 : 400,
+                                    }}
+                                >
+                                    {link.label}
+                                </Text>
+                            );
+                        })}
+                    </Stack>
+                </div>
+
+                <div style={{ flex: 1, padding: '1rem' }}>
+                    {children}
+                </div>
             </div>
-
+        );
-            {/* Main content */}
+    }
-            <div style={{
-                // width: '80%',
-                // padding: '20px',
-                // border:'1px solid red'
-            }}>
-                {children}
-            </div>
-        </div>
-    );
 }