neuro_llc/NwBlog
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: moved admin panel to layout

Browse Source
This commit is contained in:
Sergey Elpashev
2025-01-24 15:54:42 +03:00
parent 2a9a49c5ec
commit 352e191eab
2 changed files with 42 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/app/admin/layout.tsx Normal file
View File

@@ -0,0 +1,41 @@
"use client";
import { ActionIcon, AppShell, Burger, Flex, Group, Skeleton, useMantineColorScheme } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { LuMoon, LuSun } from "react-icons/lu";
const AdminLayout = ({
children,
}: Readonly<{
children: React.ReactNode;
}>) => {
const [opened, { toggle }] = useDisclosure();
const { setColorScheme, colorScheme } = useMantineColorScheme();
const changeColorScheme = () => {
setColorScheme(colorScheme === "light" ? "dark" : "light");
};
return (
<AppShell header={{ height: 60 }} navbar={{ width: 300, breakpoint: "sm", collapsed: { mobile: !opened } }}>
<AppShell.Header>
<Flex h="100%" px="md" justify="space-between" align="center">
<Group h="100%">
<Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="sm" />
<div>Logo</div>
</Group>
<ActionIcon onClick={changeColorScheme} variant="default" size="md" aria-label="Toggle color scheme">
{colorScheme === "light" ? <LuMoon /> : <LuSun />}
</ActionIcon>
</Flex>
</AppShell.Header>
<AppShell.Navbar p="md">
{Array(15)
.fill(0)
.map((_, index) => (
<Skeleton key={index} h={28} mt="sm" animate={false} />
))}
</AppShell.Navbar>
<AppShell.Main>{children}</AppShell.Main>
</AppShell>
);
};
export default AdminLayout;

31
src/app/admin/panel/page.tsx
View File

@@ -1,35 +1,6 @@
"use client";
import { ActionIcon, AppShell, Burger, Flex, Group, Skeleton, useMantineColorScheme } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { LuMoon, LuSun } from "react-icons/lu";
const PanelPage = () => {
const [opened, { toggle }] = useDisclosure();
const { setColorScheme, colorScheme } = useMantineColorScheme();
const changeColorScheme = () => {
setColorScheme(colorScheme === "light" ? "dark" : "light");
};
return (
<AppShell header={{ height: 60 }} navbar={{ width: 300, breakpoint: "sm", collapsed: { mobile: !opened } }}>
<AppShell.Header>
<Flex h="100%" px="md" justify="space-between" align="center">
<Group h="100%">
<Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="sm" />
<div>Logo</div>
</Group>
<ActionIcon onClick={changeColorScheme} variant="default" size="md" aria-label="Toggle color scheme">
{colorScheme === "light" ? <LuMoon /> : <LuSun />}
</ActionIcon>
</Flex>
</AppShell.Header>
<AppShell.Navbar p="md">
{Array(15)
.fill(0)
.map((_, index) => (
<Skeleton key={index} h={28} mt="sm" animate={false} />
))}
</AppShell.Navbar>
</AppShell>
);
return <div>Panel</div>;
};
export default PanelPage;