Updated profile menu. Fixed dashboard.

This commit is contained in:
Mike Cao 2024-02-02 21:06:55 -08:00
parent a91b9c9716
commit 400657d59e
12 changed files with 73 additions and 70 deletions

View file

@ -1,3 +1,4 @@
import { Key } from 'react';
import { Icon, Button, PopupTrigger, Popup, Menu, Item, Text } from 'react-basics';
import { useRouter } from 'next/navigation';
import Icons from 'components/icons';
@ -6,6 +7,7 @@ import { useLogin } from 'components/hooks';
import { useLocale } from 'components/hooks';
import { CURRENT_VERSION } from 'lib/constants';
import styles from './ProfileButton.module.css';
import Avatar from 'components/common/Avatar';
export function ProfileButton() {
const { formatMessage, labels } = useMessages();
@ -14,13 +16,14 @@ export function ProfileButton() {
const { dir } = useLocale();
const cloudMode = Boolean(process.env.cloudMode);
const handleSelect = key => {
const handleSelect = (key: Key, close: () => void) => {
if (key === 'profile') {
router.push('/settings/profile');
}
if (key === 'logout') {
router.push('/logout');
}
close();
};
return (
@ -31,26 +34,31 @@ export function ProfileButton() {
</Icon>
</Button>
<Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
<Menu onSelect={handleSelect} className={styles.menu}>
<Item key="user" className={styles.item}>
<Text>{user.username}</Text>
</Item>
<Item key="profile" className={styles.item} divider={true}>
<Icon>
<Icons.User />
</Icon>
<Text>{formatMessage(labels.profile)}</Text>
</Item>
{!cloudMode && (
<Item key="logout" className={styles.item}>
<Icon>
<Icons.Logout />
{(close: () => void) => (
<Menu onSelect={key => handleSelect(key, close)} className={styles.menu}>
<Item key="user" className={styles.item}>
<Icon size="lg">
<Avatar value={user.id} />
</Icon>
<Text>{formatMessage(labels.logout)}</Text>
<Text>{user.username}</Text>
</Item>
)}
<div className={styles.version}>{`v${CURRENT_VERSION}`}</div>
</Menu>
<Item key="profile" className={styles.item} divider={true}>
<Icon>
<Icons.User />
</Icon>
<Text>{formatMessage(labels.profile)}</Text>
</Item>
{!cloudMode && (
<Item key="logout" className={styles.item}>
<Icon>
<Icons.Logout />
</Icon>
<Text>{formatMessage(labels.logout)}</Text>
</Item>
)}
<div className={styles.version}>{`v${CURRENT_VERSION}`}</div>
</Menu>
)}
</Popup>
</PopupTrigger>
);