All files / src/components/Shell Shell.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';
 
import { AppShell, Burger, Group } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { usePathname } from 'next/navigation';
import { useSession } from 'next-auth/react';
import type { FC, PropsWithChildren } from 'react';
import { isAuthRoute, PUBLIC_ROUTES } from '@/types/routes';
import AuthButton from '../buttons/AuthButton';
import Footer from '../Footer';
import { HeaderSearch } from '../HeaderSearch';
import LanguageSelector from '../LanguageSelector';
import { Logo } from '../Logo';
import Navbar from '../Navbar';
import ThemeSwitcher from '../ThemeSwitcher';
 
const Shell: FC<PropsWithChildren> = ({ children }) => {
  const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
  const pathname = usePathname();
  const { data: session, status } = useSession();
  const isSessionLoading = status === 'loading';
 
  const isAuthPage = isAuthRoute(pathname);
  const isImmersive = pathname?.startsWith('/recipes/create');
 
  return (
    <AppShell
      padding={isImmersive ? 0 : 'md'}
      header={{ height: 60, collapsed: isImmersive }}
      navbar={{
        width: 300,
        breakpoint: 'sm',
        collapsed: {
          mobile: !mobileOpened,
          desktop: isAuthPage || isImmersive,
        },
      }}
      withBorder={!isImmersive}
    >
      {!isImmersive && (
        <AppShell.Header>
          <Group h="100%" px="md" justify="space-between">
            <Group>
              <Logo
                variant="icon"
                width={40}
                height={40}
                priority
                withText
                hideTextOnMobile
                href={PUBLIC_ROUTES.HOME}
              />
            </Group>
 
            <Group
              flex={1}
              justify="center"
              display={{ base: 'none', sm: 'flex' }}
            >
              {!isAuthPage && <HeaderSearch />}
            </Group>
 
            <Group gap="xs">
              {!isSessionLoading && !session && !isAuthPage && (
                <AuthButton variant="compact" />
              )}
              <ThemeSwitcher />
              <LanguageSelector />
              {!isAuthPage && (
                <Burger
                  opened={mobileOpened}
                  onClick={toggleMobile}
                  size="sm"
                  display={{ base: 'block', sm: 'none' }}
                />
              )}
            </Group>
          </Group>
        </AppShell.Header>
      )}
 
      {!isImmersive && (
        <AppShell.Navbar>{!isAuthPage && <Navbar />}</AppShell.Navbar>
      )}
 
      <AppShell.Main pb={isImmersive ? 0 : { base: 100, md: 60 }}>
        {children}
      </AppShell.Main>
 
      {!isImmersive && (
        <AppShell.Footer
          h={{ base: 100, md: 60 }}
          ml={{ base: 0, sm: isAuthPage ? 0 : 300 }}
        >
          <Footer />
        </AppShell.Footer>
      )}
    </AppShell>
  );
};
 
export default Shell;