183 lines
7.0 KiB
TypeScript
183 lines
7.0 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Box,
|
|
Stack,
|
|
Text,
|
|
SegmentedControl,
|
|
ScrollArea,
|
|
Burger,
|
|
Drawer,
|
|
Button,
|
|
} from "@mantine/core";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
import React, { useEffect, useState } from "react";
|
|
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);
|
|
|
|
/* Beneficiary Options */
|
|
const links = [
|
|
{ label: "View Beneficiary", href: "/beneficiary" },
|
|
{ label: "Add Beneficiary", href: "/beneficiary/add_beneficiary" },
|
|
];
|
|
|
|
useEffect(() => {
|
|
const token = localStorage.getItem("access_token");
|
|
if (!token) {
|
|
SetAuthorized(false);
|
|
router.push("/login");
|
|
} else {
|
|
SetAuthorized(true);
|
|
}
|
|
}, []);
|
|
|
|
if (!authorized) return null;
|
|
|
|
return (
|
|
<Box style={{ display: "flex", height: "100%", flexDirection: "column" }}>
|
|
|
|
{/* ---------------- DESKTOP HEADER ---------------- */}
|
|
{!isMobile && (
|
|
<>
|
|
{/* Segmented Tabs */}
|
|
<Box mb="1rem">
|
|
<ScrollArea type="never" offsetScrollbars>
|
|
<SegmentedControl
|
|
fullWidth
|
|
value={pathname}
|
|
onChange={(value) => router.push(value)}
|
|
data={links.map((link) => ({
|
|
label: link.label,
|
|
value: link.href,
|
|
}))}
|
|
styles={{
|
|
root: {
|
|
backgroundColor: "#e9ecef",
|
|
borderRadius: 999,
|
|
padding: 4,
|
|
},
|
|
control: {
|
|
borderRadius: 999,
|
|
transition: "0.3s",
|
|
},
|
|
|
|
indicator: {
|
|
borderRadius: 999,
|
|
background: "linear-gradient(90deg, #02a355 0%, #5483c9ff 100%)",
|
|
boxShadow: "0 3px 8px rgba(0,0,0,0.15)",
|
|
},
|
|
|
|
label: {
|
|
fontSize: 13,
|
|
padding: "6px 10px",
|
|
textAlign: "center",
|
|
fontWeight: 600,
|
|
color: "#000",
|
|
},
|
|
}}
|
|
/>
|
|
</ScrollArea>
|
|
</Box>
|
|
</>
|
|
)}
|
|
|
|
{/* ---------------- MOBILE HEADER ---------------- */}
|
|
{isMobile && (
|
|
<>
|
|
<Box
|
|
style={{
|
|
backgroundColor: "#228be6",
|
|
padding: "0.8rem 1rem",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<Burger
|
|
opened={drawerOpened}
|
|
onClick={() => setDrawerOpened(true)}
|
|
size="sm"
|
|
color="white"
|
|
/>
|
|
<Text fw={600} c="white">
|
|
Beneficiary
|
|
</Text>
|
|
</Box>
|
|
|
|
{/* Drawer for Mobile */}
|
|
<Drawer
|
|
opened={drawerOpened}
|
|
onClose={() => setDrawerOpened(false)}
|
|
padding="md"
|
|
size="75%"
|
|
overlayProps={{ color: "black", opacity: 0.55, blur: 3 }}
|
|
>
|
|
{/* 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={{ color: "#228be6", fontSize: "18px" }}>
|
|
Beneficiary
|
|
</Text>
|
|
</Box>
|
|
|
|
{/* Drawer Menu Items */}
|
|
<Stack gap="sm">
|
|
{links.map((link) => {
|
|
const isActive = pathname === link.href;
|
|
|
|
return (
|
|
<Button
|
|
key={link.href}
|
|
component={Link}
|
|
href={link.href}
|
|
fullWidth
|
|
variant="light"
|
|
style={{
|
|
justifyContent: "flex-start",
|
|
backgroundColor: isActive ? "#228be6" : "#e2efff",
|
|
color: isActive ? "#fff" : "#1b69c7",
|
|
fontWeight: isActive ? 600 : 400,
|
|
borderRadius: 10,
|
|
padding: "10px",
|
|
}}
|
|
onClick={() => setDrawerOpened(false)}
|
|
>
|
|
{link.label}
|
|
</Button>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Drawer>
|
|
</>
|
|
)}
|
|
|
|
{/* ---------------- CONTENT BODY ---------------- */}
|
|
<Box
|
|
style={{
|
|
flex: 1,
|
|
padding: isMobile ? "0.8rem" : "1rem",
|
|
overflowY: "auto",
|
|
}}
|
|
>
|
|
{children}
|
|
</Box>
|
|
</Box >
|
|
);
|
|
}
|