82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
import { Badge, Button, Menu } from '@mantine/core';
|
|
import { useDisclosure } from '@mantine/hooks';
|
|
import {
|
|
IconInfoCircle,
|
|
IconLogin,
|
|
IconLogout,
|
|
IconMenu2,
|
|
IconSettings,
|
|
} from '@tabler/icons-react';
|
|
import { signOut, useSession } from 'next-auth/react';
|
|
import { useTranslation } from 'next-i18next';
|
|
import Link from 'next/link';
|
|
|
|
import { AboutModal } from '../../Dashboard/Modals/AboutModal/AboutModal';
|
|
import { SettingsDrawer } from '../../Settings/SettingsDrawer';
|
|
import { useCardStyles } from '../useCardStyles';
|
|
import { ColorSchemeSwitch } from './SettingsMenu/ColorSchemeSwitch';
|
|
|
|
export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
|
|
const [drawerOpened, drawer] = useDisclosure(false);
|
|
const { t } = useTranslation('common');
|
|
const [aboutModalOpened, aboutModal] = useDisclosure(false);
|
|
const { classes } = useCardStyles(true);
|
|
const { data: sessionData } = useSession();
|
|
|
|
return (
|
|
<>
|
|
<Menu width={250}>
|
|
<Menu.Target>
|
|
<Button className={classes.card} variant="default" radius="md" style={{ height: 43 }}>
|
|
<IconMenu2 />
|
|
</Button>
|
|
</Menu.Target>
|
|
<Menu.Dropdown>
|
|
<ColorSchemeSwitch />
|
|
{sessionData?.user?.isAdmin && (
|
|
<Menu.Item icon={<IconSettings strokeWidth={1.2} size={18} />} onClick={drawer.open}>
|
|
{t('sections.settings')}
|
|
</Menu.Item>
|
|
)}
|
|
<Menu.Item
|
|
icon={<IconInfoCircle strokeWidth={1.2} size={18} />}
|
|
rightSection={
|
|
newVersionAvailable && (
|
|
<Badge variant="light" color="blue">
|
|
New
|
|
</Badge>
|
|
)
|
|
}
|
|
onClick={() => aboutModal.open()}
|
|
>
|
|
{t('about')}
|
|
</Menu.Item>
|
|
{sessionData?.user ? (
|
|
<Menu.Item icon={<IconLogout strokeWidth={1.2} size={18} />} onClick={() => signOut()}>
|
|
{t('header.logout')}
|
|
</Menu.Item>
|
|
) : (
|
|
<Menu.Item
|
|
icon={<IconLogin strokeWidth={1.2} size={18} />}
|
|
component={Link}
|
|
href="/login"
|
|
>
|
|
{t('header.sign-in')}
|
|
</Menu.Item>
|
|
)}
|
|
</Menu.Dropdown>
|
|
</Menu>
|
|
<SettingsDrawer
|
|
opened={drawerOpened}
|
|
closeDrawer={drawer.close}
|
|
newVersionAvailable={newVersionAvailable}
|
|
/>
|
|
<AboutModal
|
|
opened={aboutModalOpened}
|
|
closeModal={aboutModal.close}
|
|
newVersionAvailable={newVersionAvailable}
|
|
/>
|
|
</>
|
|
);
|
|
}
|