120 lines
3.6 KiB
TypeScript
Executable File
120 lines
3.6 KiB
TypeScript
Executable File
import { Layout, Menu, Space, Tag, Typography } from 'antd';
|
|
import type { MainSidebarProps } from './types';
|
|
|
|
const { Sider } = Layout;
|
|
const { Text } = Typography;
|
|
|
|
export function MainSidebar({
|
|
activeTopMenu,
|
|
hasAccess,
|
|
sidebarCollapsed,
|
|
isMobileViewport,
|
|
openKeys: controlledOpenKeys,
|
|
apiMenuItems,
|
|
docsMenuItems,
|
|
planMenuItems,
|
|
chatMenuItems,
|
|
playMenuItems,
|
|
selectedApiMenu,
|
|
selectedDocsMenu,
|
|
selectedPlanMenu,
|
|
selectedChatMenu,
|
|
selectedPlayMenu,
|
|
introColor,
|
|
introTag,
|
|
introDescription,
|
|
onOpenKeysChange,
|
|
onSelectApiMenu,
|
|
onSelectDocsMenu,
|
|
onSelectPlanMenu,
|
|
onSelectChatMenu,
|
|
onSelectPlayMenu,
|
|
}: MainSidebarProps) {
|
|
const effectiveTopMenu = !hasAccess ? 'docs' : activeTopMenu;
|
|
const isDocsGroup = effectiveTopMenu === 'docs' || effectiveTopMenu === 'apis';
|
|
const visibleOpenKeys = sidebarCollapsed
|
|
? []
|
|
: controlledOpenKeys.length
|
|
? controlledOpenKeys
|
|
: isDocsGroup
|
|
? !hasAccess
|
|
? ['docs-group']
|
|
: ['docs-group', 'api-group']
|
|
: effectiveTopMenu === 'play'
|
|
? ['play-group', 'play-layout-group']
|
|
: ['plan-group', 'codex-live-group', 'app-log-group', 'chat-manage-group'];
|
|
const selectedKeys =
|
|
effectiveTopMenu === 'docs'
|
|
? [selectedDocsMenu]
|
|
: effectiveTopMenu === 'apis'
|
|
? [selectedApiMenu]
|
|
: effectiveTopMenu === 'plans'
|
|
? [selectedPlanMenu]
|
|
: effectiveTopMenu === 'play'
|
|
? [selectedPlayMenu]
|
|
: [selectedChatMenu];
|
|
const sidebarItems =
|
|
isDocsGroup
|
|
? !hasAccess
|
|
? [...(docsMenuItems ?? [])]
|
|
: [...(docsMenuItems ?? []), ...(apiMenuItems ?? [])]
|
|
: effectiveTopMenu === 'play'
|
|
? [...(playMenuItems ?? [])]
|
|
: [...(planMenuItems ?? []), ...(chatMenuItems ?? [])];
|
|
|
|
return (
|
|
<Sider
|
|
width={isMobileViewport ? '100%' : 260}
|
|
collapsed={sidebarCollapsed}
|
|
collapsedWidth={isMobileViewport ? 0 : 72}
|
|
className={isMobileViewport ? 'app-sider app-sider--mobile' : 'app-sider'}
|
|
theme="light"
|
|
>
|
|
<div className="app-sider__inner">
|
|
<Space direction="vertical" size={8} className="app-sider__intro">
|
|
<Tag color={introColor}>{introTag}</Tag>
|
|
{!sidebarCollapsed ? (
|
|
<Text type="secondary">{introDescription}</Text>
|
|
) : null}
|
|
</Space>
|
|
|
|
<Menu
|
|
mode="inline"
|
|
inlineCollapsed={sidebarCollapsed}
|
|
selectedKeys={selectedKeys}
|
|
openKeys={visibleOpenKeys}
|
|
items={sidebarItems}
|
|
onOpenChange={(keys) => {
|
|
onOpenKeysChange(keys as string[]);
|
|
}}
|
|
onClick={({ key, keyPath }) => {
|
|
if (keyPath.includes('docs-group')) {
|
|
onSelectDocsMenu(key);
|
|
return;
|
|
}
|
|
|
|
if (keyPath.includes('api-group')) {
|
|
onSelectApiMenu(key as MainSidebarProps['selectedApiMenu']);
|
|
return;
|
|
}
|
|
|
|
if (keyPath.includes('plan-group') || keyPath.includes('server-group')) {
|
|
onSelectPlanMenu(key as MainSidebarProps['selectedPlanMenu']);
|
|
return;
|
|
}
|
|
|
|
if (keyPath.includes('codex-live-group') || keyPath.includes('app-log-group') || keyPath.includes('chat-manage-group')) {
|
|
onSelectChatMenu(key as MainSidebarProps['selectedChatMenu']);
|
|
return;
|
|
}
|
|
|
|
if (keyPath.includes('play-group') || keyPath.includes('play-layout-group')) {
|
|
onSelectPlayMenu(key as MainSidebarProps['selectedPlayMenu']);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</Sider>
|
|
);
|
|
}
|