68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import { useMemo } from 'react';
|
|
|
|
import {
|
|
getTeamAccountSidebarConfig,
|
|
pathsConfig,
|
|
} from '@/packages/shared/src/config';
|
|
|
|
import { AppLogo } from '@kit/shared/components/app-logo';
|
|
import { ProfileAccountDropdownContainer } from '@kit/shared/components/personal-account-dropdown-container';
|
|
|
|
// local imports
|
|
import { TeamAccountWorkspace } from '../_lib/server/team-account-workspace.loader';
|
|
import { TeamAccountNotifications } from './team-account-notifications';
|
|
|
|
export function TeamAccountNavigationMenu(props: {
|
|
workspace: TeamAccountWorkspace;
|
|
}) {
|
|
const { account, user, accounts: rawAccounts } = props.workspace;
|
|
|
|
const accounts = useMemo(
|
|
() =>
|
|
rawAccounts.map((account) => ({
|
|
label: account.name,
|
|
value: account.slug,
|
|
image: account.picture_url,
|
|
application_role: account.application_role,
|
|
})),
|
|
[rawAccounts],
|
|
);
|
|
|
|
const routes = getTeamAccountSidebarConfig(account.slug).routes.reduce<
|
|
Array<{
|
|
path: string;
|
|
label: string;
|
|
Icon?: React.ReactNode;
|
|
end?: boolean | ((path: string) => boolean);
|
|
}>
|
|
>((acc, item) => {
|
|
if ('children' in item) {
|
|
return [...acc, ...item.children];
|
|
}
|
|
|
|
if ('divider' in item) {
|
|
return acc;
|
|
}
|
|
|
|
return [...acc, item];
|
|
}, []);
|
|
|
|
return (
|
|
<div className={'flex w-full flex-1 justify-between'}>
|
|
<div className={'flex items-center space-x-8'}>
|
|
<AppLogo href={pathsConfig.app.home} />
|
|
</div>
|
|
|
|
<div className={'flex items-center justify-end gap-2 space-x-2.5'}>
|
|
<TeamAccountNotifications accountId={account.id} userId={user.id} />
|
|
<ProfileAccountDropdownContainer
|
|
user={user}
|
|
account={account}
|
|
showProfileName
|
|
accounts={accounts}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|