73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
"use client";
|
|
import { Divider, Stack, Text } from '@mantine/core';
|
|
import { usePathname } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import React, { useEffect, useState } from 'react';
|
|
import { useRouter } from "next/navigation";
|
|
|
|
export default function Layout({ children }: { children: React.ReactNode }) {
|
|
const [authorized, SetAuthorized] = useState<boolean | null>(null);
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
const links = [
|
|
{ label: "Account Summary", href: "/accounts" },
|
|
{ label: "Statement of Account", href: "/accounts/account_statement" },
|
|
{ label: "Account Details", href: "/accounts/account_details" },
|
|
];
|
|
useEffect(() => {
|
|
const token = localStorage.getItem("access_token");
|
|
if (!token) {
|
|
SetAuthorized(false);
|
|
router.push("/login");
|
|
}
|
|
else {
|
|
SetAuthorized(true);
|
|
}
|
|
}, []);
|
|
|
|
if (authorized) {
|
|
return (
|
|
<div style={{ display: "flex", height: '100%' }}>
|
|
<div
|
|
style={{
|
|
width: "16%",
|
|
backgroundColor: '#c5e4f9',
|
|
borderRight: "1px solid #ccc",
|
|
}}
|
|
>
|
|
<Stack style={{ background: '#228be6', height: '10%', alignItems: 'center' }}>
|
|
<Text fw={700} fs="italic" c='white' style={{ textAlign: 'center', marginTop: '10px' }}>
|
|
Accounts
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Stack gap="sm" justify="flex-start" style={{ padding: '1rem' }}>
|
|
{links.map(link => {
|
|
const isActive = pathname === link.href;
|
|
return (
|
|
<Text
|
|
key={link.href}
|
|
component={Link}
|
|
href={link.href}
|
|
c={isActive ? 'darkblue' : 'blue'}
|
|
style={{
|
|
textDecoration: isActive ? 'underline' : 'none',
|
|
fontWeight: isActive ? 600 : 400,
|
|
}}
|
|
>
|
|
{link.label}
|
|
</Text>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</div>
|
|
|
|
<div style={{ flex: 1, padding: '1rem' }}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|