2a157e8baa
* Enhance sidebar navigation and layout configuration - Added support for configurable sidebar collapsed style - Updated layout components to use new sidebar configuration - Added environment variable for sidebar trigger display - Simplified page header and navigation components - Improved sidebar responsiveness and user experience * Refactor admin account page layout and action buttons - Moved action buttons from sidebar to PageHeader for both personal and team account pages - Updated button variants and styling for better visual hierarchy - Improved spacing and layout of account page components - Added border to PageHeader for better visual separation * Update version updater dialog styling - Replaced `space-x-4` with `gap-x-2` for better spacing - Wrapped translation text in a `span` for improved layout - Maintained consistent icon and text alignment in dialog title * Refactor sidebar state management and configuration - Simplified sidebar context and removed minimized state - Updated layout components to use new sidebar open/closed state - Modified sidebar navigation to handle collapsed state dynamically - Added environment variable for sidebar trigger and collapsed style - Improved sidebar responsiveness and rendering logic * Remove sidebar configuration and environment variables - Simplified sidebar context by removing `minimized` state in components - Updated account selector components to use simplified sidebar state - Removed unused helper functions in sidebar implementation
82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import type { User } from '@supabase/supabase-js';
|
|
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarHeader,
|
|
} from '@kit/ui/shadcn-sidebar';
|
|
|
|
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;
|
|
}) {
|
|
return (
|
|
<SidebarContainer
|
|
account={props.account}
|
|
accountId={props.accountId}
|
|
accounts={props.accounts}
|
|
user={props.user}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function SidebarContainer(props: {
|
|
account: string;
|
|
accountId: string;
|
|
accounts: AccountModel[];
|
|
user: User;
|
|
}) {
|
|
const { account, accounts, user } = props;
|
|
const userId = user.id;
|
|
|
|
const config = getTeamAccountSidebarConfig(account);
|
|
const collapsible = config.sidebarCollapsedStyle;
|
|
|
|
return (
|
|
<Sidebar collapsible={collapsible}>
|
|
<SidebarHeader className={'h-16 justify-center'}>
|
|
<div className={'flex items-center justify-between gap-x-3'}>
|
|
<TeamAccountAccountsSelector
|
|
userId={userId}
|
|
selectedAccount={account}
|
|
accounts={accounts}
|
|
/>
|
|
|
|
<div className={'group-data-[minimized=true]:hidden'}>
|
|
<TeamAccountNotifications
|
|
userId={userId}
|
|
accountId={props.accountId}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</SidebarHeader>
|
|
|
|
<SidebarContent className={`mt-5 h-[calc(100%-160px)] overflow-y-auto`}>
|
|
<TeamAccountLayoutSidebarNavigation config={config} />
|
|
</SidebarContent>
|
|
|
|
<SidebarFooter>
|
|
<SidebarContent>
|
|
<ProfileAccountDropdownContainer user={props.user} />
|
|
</SidebarContent>
|
|
</SidebarFooter>
|
|
</Sidebar>
|
|
);
|
|
}
|