nandi.uk
This repository has no description
2.8 kB
89 lines
1import CollectionsNavList from '@/features/collections/components/collectionsNavList/CollectionsNavList';
2import NavItem from '../navItem/NavItem';
3import {
4 AppShellSection,
5 AppShellNavbar,
6 ScrollArea,
7 Divider,
8 Stack,
9 Group,
10 Anchor,
11 Image,
12 Box,
13 Button,
14 Badge,
15} from '@mantine/core';
16import { LuLibrary } from 'react-icons/lu';
17import { MdOutlineEmojiNature } from 'react-icons/md';
18import { FaRegNoteSticky } from 'react-icons/fa6';
19import Link from 'next/link';
20import SembleLogo from '@/assets/semble-logo.svg';
21import ProfileMenu from '@/features/profile/components/profileMenu/ProfileMenu';
22import { Suspense, useState } from 'react';
23import CollectionsNavListSkeleton from '@/features/collections/components/collectionsNavList/Skeleton.CollectionsNavList';
24import NavbarToggle from '../NavbarToggle';
25import { FiPlus } from 'react-icons/fi';
26import AddCardDrawer from '@/features/cards/components/addCardDrawer/AddCardDrawer';
27import useMyProfile from '@/features/profile/lib/queries/useMyProfile';
28
29export default function Navbar() {
30 const [openAddDrawer, setOpenAddDrawer] = useState(false);
31 const { data: profile } = useMyProfile();
32
33 return (
34 <AppShellNavbar p={'xs'} style={{ zIndex: 3 }}>
35 <Group justify="space-between">
36 <Anchor component={Link} href={'/home'}>
37 <Stack align="center" gap={6}>
38 <Image src={SembleLogo.src} alt="Semble logo" w={20.84} h={28} />
39 <Badge size="xs" style={{ cursor: 'pointer' }}>
40 Alpha
41 </Badge>
42 </Stack>
43 </Anchor>
44 <Box hiddenFrom="xs">
45 <NavbarToggle />
46 </Box>
47 </Group>
48
49 <AppShellSection grow component={ScrollArea}>
50 <Stack mt={'xl'}>
51 <ProfileMenu />
52
53 <Stack gap={5}>
54 <NavItem href="/home" label="Home" icon={<LuLibrary size={25} />} />
55 <NavItem
56 href="/explore"
57 label="Explore"
58 icon={<MdOutlineEmojiNature size={25} />}
59 />
60 <NavItem
61 href={`/profile/${profile.handle}/cards`}
62 label="Cards"
63 icon={<FaRegNoteSticky size={25} />}
64 />
65 </Stack>
66 </Stack>
67
68 <Divider my={'sm'} />
69 <Suspense fallback={<CollectionsNavListSkeleton />}>
70 <CollectionsNavList />
71 </Suspense>
72 </AppShellSection>
73 <AppShellSection>
74 <Button
75 size="lg"
76 fullWidth
77 leftSection={<FiPlus size={22} />}
78 onClick={() => setOpenAddDrawer(true)}
79 >
80 New Card
81 </Button>
82 </AppShellSection>
83 <AddCardDrawer
84 isOpen={openAddDrawer}
85 onClose={() => setOpenAddDrawer(false)}
86 />
87 </AppShellNavbar>
88 );
89}