98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { useContext } from 'react';
|
|
|
|
import type { User } from '@supabase/supabase-js';
|
|
|
|
import { Sidebar, SidebarContent, SidebarContext } from '@kit/ui/sidebar';
|
|
import { cn } from '@kit/ui/utils';
|
|
|
|
import { ProfileAccountDropdownContainer } from '~/components//personal-account-dropdown-container';
|
|
import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';
|
|
import { TeamAccountNotifications } from '~/home/[account]/_components/team-account-notifications';
|
|
|
|
import { TeamAccountAccountsSelector } from '../_components/team-account-accounts-selector';
|
|
import { TeamAccountLayoutSidebarNavigation } from './team-account-layout-sidebar-navigation';
|
|
|
|
type AccountModel = {
|
|
label: string | null;
|
|
value: string | null;
|
|
image: string | null;
|
|
};
|
|
|
|
export function TeamAccountLayoutSidebar(props: {
|
|
account: string;
|
|
accountId: string;
|
|
accounts: AccountModel[];
|
|
user: User;
|
|
}) {
|
|
const collapsed = getTeamAccountSidebarConfig(props.account).sidebarCollapsed;
|
|
|
|
return (
|
|
<Sidebar collapsed={collapsed}>
|
|
<SidebarContainer
|
|
account={props.account}
|
|
accountId={props.accountId}
|
|
accounts={props.accounts}
|
|
user={props.user}
|
|
/>
|
|
</Sidebar>
|
|
);
|
|
}
|
|
|
|
function SidebarContainer(props: {
|
|
account: string;
|
|
accountId: string;
|
|
accounts: AccountModel[];
|
|
user: User;
|
|
}) {
|
|
const { account, accounts, user } = props;
|
|
const userId = user.id;
|
|
const { collapsed } = useContext(SidebarContext);
|
|
|
|
const className = cn(
|
|
'flex max-w-full items-center justify-between space-x-4',
|
|
{
|
|
'w-full justify-start space-x-0': collapsed,
|
|
},
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<SidebarContent className={'h-16 justify-center'}>
|
|
<div className={className}>
|
|
<TeamAccountAccountsSelector
|
|
userId={userId}
|
|
selectedAccount={account}
|
|
accounts={accounts}
|
|
collapsed={collapsed}
|
|
/>
|
|
|
|
<div
|
|
className={cn({
|
|
hidden: collapsed,
|
|
})}
|
|
>
|
|
<TeamAccountNotifications
|
|
userId={userId}
|
|
accountId={props.accountId}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</SidebarContent>
|
|
|
|
<SidebarContent className={`mt-5 h-[calc(100%-160px)] overflow-y-auto`}>
|
|
<TeamAccountLayoutSidebarNavigation account={account} />
|
|
</SidebarContent>
|
|
|
|
<div className={'absolute bottom-4 left-0 w-full'}>
|
|
<SidebarContent>
|
|
<ProfileAccountDropdownContainer
|
|
user={props.user}
|
|
/>
|
|
</SidebarContent>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|