nandi.uk
This repository has no description
2.8 kB
111 lines
1'use client';
2
3import { useEffect } from 'react';
4import { usePathname, useRouter } from 'next/navigation';
5import { useAuth } from '@/hooks/useAuth';
6import { useDisclosure, useMediaQuery } from '@mantine/hooks';
7import {
8 ActionIcon,
9 AppShell,
10 Group,
11 NavLink,
12 Text,
13 Affix,
14} from '@mantine/core';
15import { FiSidebar } from 'react-icons/fi';
16import { IoDocumentTextOutline } from 'react-icons/io5';
17import { BsFolder2 } from 'react-icons/bs';
18import { BiUser } from 'react-icons/bi';
19import { FiPlus } from 'react-icons/fi';
20
21export default function AuthenticatedLayout({
22 children,
23}: {
24 children: React.ReactNode;
25}) {
26 const { isAuthenticated, isLoading } = useAuth();
27 const router = useRouter();
28
29 const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
30 const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
31 const isMobile = useMediaQuery('(max-width: 768px)');
32
33 const pathname = usePathname();
34
35 useEffect(() => {
36 if (!isLoading && !isAuthenticated) {
37 router.push('/login');
38 }
39 }, [isAuthenticated, isLoading, router]);
40
41 if (!isAuthenticated) {
42 return null; // Redirecting
43 }
44
45 return (
46 <AppShell
47 header={{ height: 60 }}
48 navbar={{
49 width: 300,
50 breakpoint: 'sm',
51 collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
52 }}
53 padding="md"
54 >
55 <AppShell.Header>
56 <Group h="100%" px="md" gap={'xs'}>
57 <ActionIcon
58 variant="subtle"
59 size="lg"
60 onClick={() => {
61 isMobile ? toggleMobile() : toggleDesktop();
62 }}
63 >
64 <FiSidebar />
65 </ActionIcon>
66 <Text fw={600}>Annos</Text>
67 </Group>
68 </AppShell.Header>
69
70 <AppShell.Navbar p="md">
71 <NavLink
72 href="/library"
73 label="My cards"
74 active={pathname === '/library'}
75 leftSection={<IoDocumentTextOutline />}
76 />
77 <NavLink
78 href="/collections"
79 label="My collections"
80 active={pathname === '/collections'}
81 leftSection={<BsFolder2 />}
82 />
83 <NavLink
84 href="/profile"
85 label="Profile"
86 active={pathname === '/profile'}
87 leftSection={<BiUser />}
88 mt="auto"
89 />
90 </AppShell.Navbar>
91
92 <AppShell.Main>
93 {children}
94 <Affix position={{ bottom: 20, right: 20 }}>
95 <ActionIcon
96 onClick={() => router.push('/cards/add')}
97 size={56}
98 radius="xl"
99 color="blue"
100 variant="filled"
101 style={{
102 boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
103 }}
104 >
105 <FiPlus size={24} />
106 </ActionIcon>
107 </Affix>
108 </AppShell.Main>
109 </AppShell>
110 );
111}