desa-darmasaba/src/app/admin/layout.tsx

'use client'

import colors from "@/con/colors";
import {
  ActionIcon,
  AppShell,
  AppShellHeader,
  AppShellMain,
  AppShellNavbar,
  Burger,
  Flex,
  Group,
  Image,
  NavLink,
  ScrollArea,
  Text,
  Tooltip,
  rem
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import {
  IconChevronLeft,
  IconChevronRight,
  IconLogout2
} from "@tabler/icons-react";
import _ from "lodash";
import Link from "next/link";
import { useRouter, useSelectedLayoutSegments } from "next/navigation";
import { navBar } from "./_com/list_PageAdmin";

export default function Layout({ children }: { children: React.ReactNode }) {
  const [opened, { toggle }] = useDisclosure();
  const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
  const router = useRouter();
  const segments = useSelectedLayoutSegments().map((s) => _.lowerCase(s));

  return (
    <AppShell
      suppressHydrationWarning
      header={{ height: 64 }}
      navbar={{
        width: 300,
        breakpoint: "sm",
        collapsed: {
          mobile: !opened,
          desktop: !desktopOpened,
        },
      }}
      padding="md"
    >
      <AppShellHeader
        style={{
          background: "linear-gradient(90deg, #ffffff, #f9fbff)",
          borderBottom: `1px solid ${colors["blue-button"]}20`,
        }}
      >
        <Group px="md" h="100%" justify="space-between">
          <Flex align="center" gap="sm">
            <Image
              src="/assets/images/darmasaba-icon.png"
              alt="Logo Darmasaba"
              width={46}
              height={46}
              radius="md"
              loading="lazy"
            />
            <Text
              fw={700}
              c={colors["blue-button"]}
              fz="lg"
              style={{ letterSpacing: rem(0.3) }}
            >
              Admin Darmasaba
            </Text>
          </Flex>

          <Group gap="xs">
            {!desktopOpened && (
              <Tooltip label="Buka Navigasi" position="bottom" withArrow>
                <ActionIcon
                  variant="light"
                  radius="xl"
                  size="lg"
                  onClick={toggleDesktop}
                  color={colors["blue-button"]}
                >
                  <IconChevronRight />
                </ActionIcon>
              </Tooltip>
            )}

            <Burger
              opened={opened}
              onClick={toggle}
              hiddenFrom="sm"
              size="sm"
              color={colors["blue-button"]}
            />

            <Tooltip label="Kembali ke Website Desa" position="bottom" withArrow>
              <ActionIcon
                onClick={() => {
                  router.push("/darmasaba");
                }}
                color={colors["blue-button"]}
                radius="xl"
                size="lg"
                variant="gradient"
                gradient={{ from: colors["blue-button"], to: "#228be6" }}
              >
                <Image src="/assets/images/darmasaba-icon.png" alt="Logo Darmasaba" w={25} h={25} radius="md" loading="lazy" />
              </ActionIcon>
            </Tooltip>
            <Tooltip label="Keluar" position="bottom" withArrow>
              <ActionIcon
                onClick={() => {
                  router.push("/login");
                }}
                color={colors["blue-button"]}
                radius="xl"
                size="lg"
                variant="gradient"
                gradient={{ from: colors["blue-button"], to: "#228be6" }}
              >
                <IconLogout2 size={22} />
              </ActionIcon>
            </Tooltip>
          </Group>
        </Group>
      </AppShellHeader>

      <AppShellNavbar
        component={ScrollArea}
        style={{
          background: "#ffffff",
          borderRight: `1px solid ${colors["blue-button"]}20`,
        }}
      >
        <AppShell.Section p="sm">
          {navBar.map((v, k) => {
            const isParentActive = segments.includes(_.lowerCase(v.name));

            return (
              <NavLink
                key={k}
                defaultOpened={isParentActive}
                c={isParentActive ? colors["blue-button"] : "gray"}
                label={
                  <Text fw={isParentActive ? 600 : 400} fz="sm">
                    {v.name}
                  </Text>
                }
                style={{
                  borderRadius: rem(10),
                  marginBottom: rem(4),
                  transition: "background 150ms ease",
                }}
                variant="light"
                active={isParentActive}
              >
                {v.children.map((child, key) => {
                  const isChildActive = segments.includes(
                    _.lowerCase(child.name)
                  );

                  return (
                    <NavLink
                      key={key}
                      href={child.path}
                      c={isChildActive ? colors["blue-button"] : "gray"}
                      label={
                        <Text fw={isChildActive ? 600 : 400} fz="sm">
                          {child.name}
                        </Text>
                      }
                      style={{
                        borderRadius: rem(8),
                        marginBottom: rem(2),
                        transition: "background 150ms ease",
                      }}
                      active={isChildActive}
                      component={Link}
                    />
                  );
                })}
              </NavLink>
            );
          })}
        </AppShell.Section>

        <AppShell.Section py="md">
          <Group justify="end" pr="sm">
            <Tooltip
              label={desktopOpened ? "Tutup Navigasi" : "Buka Navigasi"}
              position="top"
              withArrow
            >
              <ActionIcon
                variant="light"
                radius="xl"
                size="lg"
                onClick={toggleDesktop}
                color={colors["blue-button"]}
              >
                <IconChevronLeft />
              </ActionIcon>
            </Tooltip>
          </Group>
        </AppShell.Section>
      </AppShellNavbar>

      <AppShellMain
        style={{
          background: "linear-gradient(180deg, #fdfdfd, #f6f9fc)",
          minHeight: "100vh",
        }}
      >
        {children}
      </AppShellMain>
    </AppShell>
  );
}