151 lines
3.7 KiB
TypeScript
151 lines
3.7 KiB
TypeScript
'use client';
|
|
|
|
import { User } from '@supabase/supabase-js';
|
|
|
|
import { ArrowLeftCircle, ArrowRightCircle } from 'lucide-react';
|
|
|
|
import { If } from '@kit/ui/if';
|
|
import { Sidebar, SidebarContent } from '@kit/ui/sidebar';
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from '@kit/ui/tooltip';
|
|
import { Trans } from '@kit/ui/trans';
|
|
import { cn } from '@kit/ui/utils';
|
|
|
|
import { ProfileAccountDropdownContainer } from '~/components//personal-account-dropdown-container';
|
|
|
|
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;
|
|
accounts: AccountModel[];
|
|
collapsed: boolean;
|
|
user: User;
|
|
}) {
|
|
return (
|
|
<Sidebar collapsed={props.collapsed}>
|
|
{({ collapsed, setCollapsed }) => (
|
|
<SidebarContainer
|
|
collapsed={collapsed}
|
|
setCollapsed={setCollapsed}
|
|
account={props.account}
|
|
accounts={props.accounts}
|
|
user={props.user}
|
|
/>
|
|
)}
|
|
</Sidebar>
|
|
);
|
|
}
|
|
|
|
function SidebarContainer(props: {
|
|
account: string;
|
|
accounts: AccountModel[];
|
|
collapsed: boolean;
|
|
setCollapsed: (collapsed: boolean) => void;
|
|
collapsible?: boolean;
|
|
user: User;
|
|
}) {
|
|
const { account, accounts } = props;
|
|
|
|
return (
|
|
<>
|
|
<SidebarContent className={'mt-4 justify-center'}>
|
|
<TeamAccountAccountsSelector
|
|
selectedAccount={account}
|
|
accounts={accounts}
|
|
/>
|
|
</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>
|
|
<div className={'flex space-x-2'}>
|
|
<ProfileAccountDropdownContainer
|
|
user={props.user}
|
|
collapsed={props.collapsed}
|
|
/>
|
|
</div>
|
|
|
|
<If condition={props.collapsible}>
|
|
<AppSidebarFooterMenu
|
|
collapsed={props.collapsed}
|
|
setCollapsed={props.setCollapsed}
|
|
/>
|
|
</If>
|
|
</SidebarContent>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function AppSidebarFooterMenu(props: {
|
|
collapsed: boolean;
|
|
setCollapsed: (collapsed: boolean) => void;
|
|
}) {
|
|
return (
|
|
<CollapsibleButton
|
|
collapsed={props.collapsed}
|
|
onClick={props.setCollapsed}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function CollapsibleButton({
|
|
collapsed,
|
|
onClick,
|
|
}: React.PropsWithChildren<{
|
|
collapsed: boolean;
|
|
onClick: (collapsed: boolean) => void;
|
|
}>) {
|
|
const className = cn(
|
|
`bg-background absolute -right-[10.5px] bottom-4 cursor-pointer block`,
|
|
);
|
|
|
|
const iconClassName = 'bg-background text-muted-foreground h-5 w-5';
|
|
|
|
return (
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger
|
|
className={className}
|
|
aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
|
|
onClick={() => onClick(!collapsed)}
|
|
>
|
|
<ArrowRightCircle
|
|
className={cn(iconClassName, {
|
|
hidden: !collapsed,
|
|
})}
|
|
/>
|
|
|
|
<ArrowLeftCircle
|
|
className={cn(iconClassName, {
|
|
hidden: collapsed,
|
|
})}
|
|
/>
|
|
</TooltipTrigger>
|
|
|
|
<TooltipContent sideOffset={20}>
|
|
<Trans
|
|
i18nKey={
|
|
collapsed ? 'common:expandSidebar' : 'common:collapseSidebar'
|
|
}
|
|
/>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
}
|