71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Avatar, Group, Menu, Text, Button, Flex } from "@mantine/core";
|
|
import { useAuth } from 'react-oidc-context';
|
|
import { strings } from '../strings/strings';
|
|
import { useMediaQuery } from '@mantine/hooks';
|
|
import { dimensions } from '../dimensions/dimensions';
|
|
import ColorSchemeToggle from './buttons/ColorSchemeToggle';
|
|
import { keycloakConfig } from '../..';
|
|
|
|
interface UserMenuProps {
|
|
user: { name: string; image: string }
|
|
}
|
|
|
|
const UserMenu = ({ user }: UserMenuProps) => {
|
|
const [userMenuOpened, setUserMenuOpened] = useState(false);
|
|
const auth = useAuth()
|
|
const isMiddleScreen = useMediaQuery(dimensions.middleScreenSize)
|
|
|
|
const handleAboutMe = () => {
|
|
throw Error('Not yet implemented')
|
|
}
|
|
|
|
const handleLogout = async () => {
|
|
await auth.removeUser()
|
|
const id_token_hint = auth.user?.id_token
|
|
await auth.signoutRedirect({ post_logout_redirect_uri: keycloakConfig.redirect_uri, id_token_hint: id_token_hint })
|
|
}
|
|
|
|
return (
|
|
<Menu
|
|
width={260}
|
|
transitionProps={{ transition: 'pop-top-right' }}
|
|
onClose={() => setUserMenuOpened(false)}
|
|
onOpen={() => setUserMenuOpened(true)}
|
|
withinPortal
|
|
>
|
|
<Menu.Target>
|
|
<Button variant="subtle" uppercase pl={0}>
|
|
<Group spacing={7}>
|
|
<Avatar src={user.image} alt={user.name} radius="xl" size={33} mr={5} />
|
|
<Text weight={600} size="sm" sx={{ lineHeight: 1 }} mr={3}>
|
|
{user.name}
|
|
</Text>
|
|
</Group>
|
|
</Button>
|
|
</Menu.Target>
|
|
<Menu.Dropdown>
|
|
{
|
|
isMiddleScreen ?
|
|
<Flex w='100%' justify='space-between' align='center'>
|
|
<Text fz='sm' ml='0.7rem'>{strings.changeTheme}</Text>
|
|
<ColorSchemeToggle />
|
|
</Flex>
|
|
:
|
|
<></>
|
|
}
|
|
{/* <Menu.Item>
|
|
{strings.settings}
|
|
</Menu.Item>
|
|
<Menu.Item onClick={handleAboutMe}>
|
|
{strings.aboutMe}
|
|
</Menu.Item> */}
|
|
<Menu.Item onClick={handleLogout}>
|
|
{strings.logout}
|
|
</Menu.Item>
|
|
</Menu.Dropdown>
|
|
</Menu>
|
|
);
|
|
};
|
|
|
|
export default UserMenu; |