nandi.uk
This repository has no description
1.2 kB
38 lines
1import { ActionIcon, Affix } from '@mantine/core';
2import { Fragment, useState } from 'react';
3import { FiPlus } from 'react-icons/fi';
4import AddCardDrawer from '@/features/cards/components/addCardDrawer/AddCardDrawer';
5import { useMediaQuery } from '@mantine/hooks';
6import { useNavbarContext } from '@/providers/navbar';
7
8export default function ComposerDrawer() {
9 const { mobileOpened, desktopOpened } = useNavbarContext();
10 const isDesktop = useMediaQuery('(min-width: 36em)'); // "sm" breakpoint
11 const isNavOpen = isDesktop ? desktopOpened : mobileOpened;
12 const shouldShowFab = !isNavOpen;
13 const [opened, setOpened] = useState(false);
14
15 return (
16 <Fragment key={shouldShowFab.toString()}>
17 {shouldShowFab && (
18 <Affix
19 mt={'md'}
20 mx={{ base: 20, sm: 'xs' }}
21 mb={{ base: 100, sm: 'md' }}
22 style={{ zIndex: 102 }}
23 >
24 <ActionIcon
25 size="input-xl"
26 radius="xl"
27 variant="filled"
28 onClick={() => setOpened((prev) => !prev)}
29 >
30 <FiPlus size={30} />
31 </ActionIcon>
32 </Affix>
33 )}
34
35 <AddCardDrawer isOpen={opened} onClose={() => setOpened(false)} />
36 </Fragment>
37 );
38}