fix ui tamplate

src/app/zCoba/home/v2_coba_tamplate.tsx

@@ -0,0 +1,159 @@
+"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>
+  );
+}