wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Membuat database menu desa: Berita & Pengummuman

Browse Source
This commit is contained in:
nico
2025-04-22 21:48:01 +08:00
parent 7b0fb9332e
commit 9a6f8dc7f6
27 changed files with 838 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/app/admin/layout.tsx
View File

@@ -1,67 +1,87 @@
'use client'
import colors from "@/con/colors";
import { ActionIcon, AppShell, AppShellHeader, AppShellMain, AppShellNavbar, Burger, Group, Image, NavLink, ScrollArea, Stack, Text } from "@mantine/core";
import { ActionIcon, AppShell, AppShellHeader, AppShellMain, AppShellNavbar, Burger, Group, Image, NavLink, ScrollArea, Text } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
import _ from 'lodash';
import Link from "next/link";
import { useState } from "react";
import { useSelectedLayoutSegments } from "next/navigation";
import { navBar } from "./_com/list_PageAdmin";
export default function Layout({ children }: { children: React.ReactNode }) {
const [opened, { toggle }] = useDisclosure();
const [active, setActive] = useState(navBar[0]?.id || 0);
const isClient = typeof window !== 'undefined';
const [desktopOpened, { toggle: toggleDesktop }] =
useDisclosure(true);
const segments = useSelectedLayoutSegments()
return (
<Stack h={"100%"}>
<AppShell
header={{ height: 60 }}
navbar={{
width: 300, breakpoint: 'sm', collapsed: { mobile: !opened }
}}
padding={'md'}
>
<AppShellHeader bg={colors["white-trans-1"]}>
<Group px={10} align="center">
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size={'sm'} />
<ActionIcon w={50} h={50} variant="transparent" component={Link} href="/admin">
<AppShell
suppressHydrationWarning
header={{ height: 60 }}
navbar={{
width: 300, breakpoint: 'sm', collapsed: { mobile: !opened, desktop: !desktopOpened }
}}
padding={'md'}
>
<AppShellHeader bg={colors["white-trans-1"]}>
<Group px={10} align="center">
{!desktopOpened && <ActionIcon variant="light" onClick={toggleDesktop}><IconChevronRight /></ActionIcon>}
<Burger opened={opened} onClick={toggle} hiddenFrom="sm" size={'sm'} />
<ActionIcon w={50} h={50} variant="transparent" component={Link} href="/admin">
<Image py={5} src={'/assets/images/darmasaba-icon.png'} alt="" width={50} height={50} />
</ActionIcon>
<Text fw={'bold'} c={colors["blue-button"]} fz={'lg'}>Dashboard Admin</Text>
</Group>
</AppShellHeader>
<AppShellNavbar
c={colors["blue-button"]}
component={ScrollArea}
>
{navBar.map((v,k) => {
</ActionIcon>
<Text fw={'bold'} c={colors["blue-button"]} fz={'lg'}>Dashboard Admin</Text>
</Group>
</AppShellHeader>
<AppShellNavbar
c={colors["blue-button"]}
component={ScrollArea}
>
<AppShell.Section h={100} bg={"gray.1"}>
<Text c={colors["blue-button"]}>Heder Navbar</Text>
</AppShell.Section>
<AppShell.Section >
{navBar.map((v, k) => {
return (
<NavLink
c={colors["blue-button"]}
c={_.lowerCase(v.name) == segments[1] ? colors["blue-button"] : "grey"}
key={k}
active={isClient && k === active}
onClick={() => setActive(k)}
label={<Text>{v.name}</Text>}
defaultOpened={_.lowerCase(v.name) == segments[1]}
// onClick={() => setActive(k)}
label={<Text
style={{ fontWeight: _.lowerCase(v.name) == segments[1] ? "bold" : "normal" }}
>{v.name}</Text>}
>
{v.children.map((child) => {
{v.children.map((child, key) => {
return (
<NavLink
c={_.lowerCase(child.name) == _.lowerCase(segments[2]) ? colors["blue-button"] : "grey"}
key={key}
href={child.path}
key={child.id}
active={isClient && Number(child.id) === active}
onClick={() => setActive(Number(child.id))}
label={<Text>{child.name}</Text>}
// active={isClient && Number(child.id) === active}
// onClick={() => setActive(Number(child.id))}
label={<Text
style={{ fontWeight: _.lowerCase(child.name) == _.lowerCase(segments[2]) ? "bold" : "normal" }}
>{child.name}</Text>}
/>
)
})}
</NavLink>
)
})}
</AppShellNavbar>
<AppShellMain bg={colors.Bg}>
{children}
</AppShellMain>
</AppShell>
</Stack>
</AppShell.Section>
<AppShell.Section>
<Group justify="end">
<ActionIcon variant="light" onClick={toggleDesktop}><IconChevronLeft /></ActionIcon>
</Group>
</AppShell.Section>
</AppShellNavbar>
<AppShellMain bg={colors.Bg}>
{children}
</AppShellMain>
</AppShell>
);
}