178 lines
8.3 KiB
TypeScript
178 lines
8.3 KiB
TypeScript
"use client";
|
|
import { Box, Burger, Button, Divider, Drawer, 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";
|
|
import { useMediaQuery } from '@mantine/hooks';
|
|
import Image from "next/image";
|
|
import logo from "@/app/image/logo1.jpg";
|
|
|
|
export default function Layout({ children }: { children: React.ReactNode }) {
|
|
const [authorized, SetAuthorized] = useState<boolean | null>(null);
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const isMobile = useMediaQuery("(max-width: 768px)");
|
|
const [drawerOpened, setDrawerOpened] = useState(false);
|
|
|
|
const links = [
|
|
{ label: "View Profile", href: "/settings" },
|
|
{ label: "Change Login Password", href: "/settings/change_login_password" },
|
|
{ label: "Change transaction Password", href: "/settings/change_txn_password" },
|
|
{ label: "Set transaction Password", href: "/settings/set_txn_password" },
|
|
{ label: "Set userId", href: "/settings/user_id" },
|
|
];
|
|
useEffect(() => {
|
|
const token = localStorage.getItem("access_token");
|
|
if (!token) {
|
|
SetAuthorized(false);
|
|
router.push("/login");
|
|
}
|
|
else {
|
|
SetAuthorized(true);
|
|
}
|
|
}, []);
|
|
|
|
if (authorized) {
|
|
return (
|
|
<Box style={{ display: "flex", height: "100%", flexDirection: isMobile ? "column" : "row" }}>
|
|
{/* Desktop Sidebar */}
|
|
{!isMobile && (
|
|
<Box
|
|
style={{
|
|
width: "16%",
|
|
backgroundColor: "#c5e4f9",
|
|
borderRight: "1px solid #ccc",
|
|
}}
|
|
>
|
|
<Stack style={{ background: "#228be6", height: "10%", alignItems: "center" }}>
|
|
<Text fw={700} c="white" style={{ textAlign: "center", marginTop: "10px" }}>
|
|
Settings
|
|
</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>
|
|
</Box>
|
|
)}
|
|
|
|
{/* Mobile: Burger & Drawer */}
|
|
{isMobile && (
|
|
<>
|
|
{/* Top header with burger and title */}
|
|
<Box
|
|
style={{
|
|
backgroundColor: "#228be6",
|
|
// padding: "0.5rem 1rem",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<Burger
|
|
opened={drawerOpened}
|
|
onClick={() => setDrawerOpened(!drawerOpened)}
|
|
size="sm"
|
|
color="white"
|
|
/>
|
|
<Text fw={500} c="white">
|
|
Settings
|
|
</Text>
|
|
</Box>
|
|
|
|
<Drawer
|
|
opened={drawerOpened}
|
|
onClose={() => setDrawerOpened(false)}
|
|
padding="md"
|
|
size="75%"
|
|
overlayProps={{ color: "black", opacity: 0.55, blur: 3 }}
|
|
styles={{
|
|
root: {
|
|
backgroundColor: "#e6f5ff", // soft background for drawer
|
|
},
|
|
}}
|
|
>
|
|
{/* Logo and Drawer Header */}
|
|
<Box style={{ display: "flex", alignItems: "center", marginBottom: "1rem" }}>
|
|
<>
|
|
<Image src={logo} alt="KCCB Logo" width={40} height={40} style={{ borderRadius: "50%" }} />
|
|
<Text
|
|
fw={700}
|
|
ml="10px"
|
|
style={{ fontSize: "18px", color: "#228be6" }}
|
|
>
|
|
Settings
|
|
</Text>
|
|
</>
|
|
</Box>
|
|
|
|
{/* Menu Items */}
|
|
<Stack gap="sm">
|
|
{links.map((link) => {
|
|
const isActive = pathname === link.href;
|
|
|
|
return (
|
|
<Button
|
|
key={link.href}
|
|
variant="subtle"
|
|
component={Link}
|
|
href={link.href}
|
|
fullWidth
|
|
style={{
|
|
justifyContent: "flex-start",
|
|
fontWeight: isActive ? 600 : 400,
|
|
textDecoration: isActive ? "underline" : "none",
|
|
color: isActive ? "#fff" : "#228be6",
|
|
backgroundColor: isActive ? "#228be6" : "#dceeff",
|
|
borderRadius: "8px",
|
|
padding: "10px 12px",
|
|
transition: "0.3s",
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
const target = e.currentTarget as unknown as HTMLElement;
|
|
target.style.backgroundColor = "#228be6";
|
|
target.style.color = "#fff";
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
const target = e.currentTarget as unknown as HTMLElement;
|
|
target.style.backgroundColor = isActive ? "#228be6" : "#dceeff";
|
|
target.style.color = isActive ? "#fff" : "#228be6";
|
|
}}
|
|
onClick={() => setDrawerOpened(false)}
|
|
>
|
|
{link.label}
|
|
</Button>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Drawer>
|
|
</>
|
|
)}
|
|
|
|
|
|
{/* Content Area */}
|
|
<Box style={{ flex: 1, padding: isMobile ? "0.5rem" : "1rem", overflowY: "auto" }}>
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
}
|