160 lines
4.3 KiB
TypeScript
160 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { AccentColor, MainColor } from "@/app_modules/_global/color";
|
|
import {
|
|
ActionIcon,
|
|
BackgroundImage, // Import BackgroundImage dari Mantine
|
|
Box,
|
|
Button,
|
|
Container,
|
|
Group,
|
|
Text,
|
|
Title,
|
|
} from "@mantine/core";
|
|
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
|
|
import { createStyles } from "@mantine/styles";
|
|
import { IconBell, IconSearch } from "@tabler/icons-react";
|
|
import { ReactNode, useEffect, useState } from "react";
|
|
|
|
// Styling langsung didefinisikan di dalam komponen
|
|
const useStyles = createStyles((theme) => ({
|
|
pageContainer: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
minHeight: "100dvh", // dynamic viewport height untuk mobile
|
|
width: "100%",
|
|
maxWidth: "500px", // Batasi lebar maksimum
|
|
margin: "0 auto", // Pusatkan layout
|
|
boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)", // Tambahkan shadow untuk efek mobile-like
|
|
backgroundColor: MainColor.darkblue, // Warna latar belakang fallback
|
|
|
|
[`@media (max-width: 768px)`]: {
|
|
maxWidth: "100%", // Pada layar mobile, gunakan lebar penuh
|
|
boxShadow: "none", // Hilangkan shadow pada mobile
|
|
},
|
|
},
|
|
|
|
header: {
|
|
position: "sticky",
|
|
top: 0,
|
|
width: "100%",
|
|
maxWidth: "500px", // Batasi lebar header sesuai container
|
|
margin: "0 auto", // Pusatkan header
|
|
backgroundColor: MainColor.darkblue,
|
|
boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
|
|
zIndex: 1000, // Pastikan z-index tinggi
|
|
transition: "all 0.3s ease",
|
|
color: MainColor.yellow,
|
|
},
|
|
|
|
scrolled: {
|
|
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
|
|
},
|
|
|
|
headerContainer: {
|
|
height: "8vh",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
padding: "0 16px", // Padding untuk mobile view
|
|
|
|
[`@media (max-width: 768px)`]: {
|
|
height: "8vh",
|
|
},
|
|
borderBottom: `1px solid ${AccentColor.blue}`,
|
|
borderBottomLeftRadius: "10px",
|
|
borderBottomRightRadius: "10px",
|
|
},
|
|
|
|
content: {
|
|
flex: 1,
|
|
width: "100%",
|
|
overflowY: "auto", // Izinkan scrolling pada konten
|
|
paddingBottom: "15vh", // Sesuaikan dengan tinggi footer
|
|
},
|
|
|
|
footer: {
|
|
width: "100%",
|
|
backgroundColor: MainColor.darkblue,
|
|
borderTop: `1px solid ${AccentColor.blue}`,
|
|
height: "10vh", // Tinggi footer
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
position: "fixed",
|
|
bottom: 0,
|
|
left: "50%", // Pusatkan footer
|
|
transform: "translateX(-50%)", // Pusatkan footer
|
|
maxWidth: "500px", // Batasi lebar footer
|
|
color: MainColor.white,
|
|
borderTopLeftRadius: "10px",
|
|
borderTopRightRadius: "10px",
|
|
},
|
|
}));
|
|
|
|
interface ClientLayoutProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export default function ClientLayout({ children }: ClientLayoutProps) {
|
|
const [scrolled, setScrolled] = useState<boolean>(false);
|
|
const { classes, cx } = useStyles();
|
|
|
|
// Effect untuk mendeteksi scroll
|
|
useEffect(() => {
|
|
function handleScroll() {
|
|
if (window.scrollY > 10) {
|
|
setScrolled(true);
|
|
} else {
|
|
setScrolled(false);
|
|
}
|
|
}
|
|
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<Box className={classes.pageContainer}>
|
|
{/* Header - tetap di atas */}
|
|
<Box
|
|
className={cx(classes.header, { [classes.scrolled]: scrolled })}
|
|
component="header"
|
|
>
|
|
<Container size="xl" className={classes.headerContainer}>
|
|
<Group position="apart" w={"100%"}>
|
|
<ActionIcon>
|
|
<IconSearch />
|
|
</ActionIcon>
|
|
<Title order={4}>Home Test</Title>
|
|
<ActionIcon>
|
|
<IconBell />
|
|
</ActionIcon>
|
|
</Group>
|
|
</Container>
|
|
</Box>
|
|
|
|
{/* Konten utama - bisa di-scroll */}
|
|
<Box className={classes.content}>
|
|
<Container>{children}</Container>
|
|
</Box>
|
|
|
|
{/* Footer - tetap di bawah */}
|
|
<Box className={classes.footer} component="footer">
|
|
<Container size="xl">
|
|
<Group position="apart" py="md">
|
|
<Text size="sm">© 2025 Nama Perusahaan</Text>
|
|
<Group spacing="xs">
|
|
<Button variant="subtle" size="xs">
|
|
Privasi
|
|
</Button>
|
|
<Button variant="subtle" size="xs">
|
|
Syarat
|
|
</Button>
|
|
</Group>
|
|
</Group>
|
|
</Container>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|