100 lines
2.1 KiB
TypeScript
100 lines
2.1 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { Centered } from '@/components/layouts/Centered.js';
|
|
import { Button } from '@/components/primitives/Button.js';
|
|
import { PopupMenu } from '@/components/primitives/PopupMenu.js';
|
|
import { styled } from '@/libs/stitches.js';
|
|
import { trpc } from '@/libs/trpc';
|
|
import { MenuItem } from '@/models/menu.js';
|
|
|
|
|
|
const Container = styled('header', {
|
|
display: 'flex',
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: 40,
|
|
padding: '0 $m',
|
|
color: '$headerBarFg',
|
|
background: '$headerBarBg',
|
|
alignItems: 'center',
|
|
zIndex: '$floating',
|
|
backdropFilter: 'blur(32px)',
|
|
});
|
|
|
|
const AppMenuButton = styled(Button, {
|
|
width: 32,
|
|
height: 32,
|
|
zIndex: '$floating',
|
|
i: {
|
|
fontSize: '$2xl',
|
|
},
|
|
});
|
|
|
|
const AccountButton = styled(Button, {
|
|
height: 32,
|
|
fontWeight: 'normal',
|
|
zIndex: '$floating',
|
|
});
|
|
|
|
const Title = styled(Centered, {
|
|
position: 'absolute',
|
|
inset: 0,
|
|
fontSize: '$xl',
|
|
color: '$headerBarTitleFg',
|
|
fontFamily: 'OTADESIGN Rounded',
|
|
|
|
'> a': {
|
|
color: 'inherit',
|
|
textDecoration: 'none',
|
|
},
|
|
});
|
|
|
|
const Spacer = styled('div', {
|
|
flex: 1,
|
|
});
|
|
|
|
export const HeaderBar: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
const [account] = trpc.account.getMyself.useSuspenseQuery();
|
|
|
|
const menuItems = useMemo(() => [{
|
|
type: 'link',
|
|
label: t('misskeyAccounts'),
|
|
href: '/accounts',
|
|
iconClassName: 'ti ti-users',
|
|
}, {
|
|
type: 'link',
|
|
label: t('settings'),
|
|
href: '/settings',
|
|
iconClassName: 'ti ti-settings',
|
|
}, {
|
|
type: 'separator',
|
|
}, {
|
|
type: 'link',
|
|
label: t('aboutMisskeyTools'),
|
|
href: '/about',
|
|
iconClassName: '',
|
|
}] as MenuItem[], [t]);
|
|
|
|
return (
|
|
<Container>
|
|
<Title>
|
|
<Link to="/">Misskey Tools</Link>
|
|
</Title>
|
|
<AppMenuButton flat>
|
|
<i className="ti ti-grid-dots"/>
|
|
</AppMenuButton>
|
|
<Spacer/>
|
|
<PopupMenu items={menuItems}>
|
|
<AccountButton flat>
|
|
{account.name}
|
|
</AccountButton>
|
|
</PopupMenu>
|
|
</Container>
|
|
);
|
|
};
|