chore: change nav demo

content/navigation/navigation/index-en-US.md

@@ -444,35 +444,53 @@ class NavApp extends React.Component {
         return (
             <Nav
                 mode={'horizontal'}
+                items={[
+                    { itemKey: 'user', text: 'User Management', icon: <IconUser /> },
+                    { itemKey: 'union', text: 'Union Center', icon: <IconStar /> },
+                    {
+                        itemKey: 'approve-management',
+                        text: 'Approval Management',
+                        icon: <IconEdit />,
+                        items: [
+                            'Check-in Review',
+                            {
+                                itemKey: 'operation-management',
+                                text: 'Operations Management',
+                                items: [
+                                    'Personnel Management',
+                                    'Personnel Change'
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        text: 'Task Platform',
+                        icon: <IconSetting />,
+                        itemKey: 'job',
+                        items: ['Task Management', 'User Task Query'],
+                    },
+                ]}
                 onSelect={key => console.log(key)}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
                     text: 'Live Platform'
                 }}
                 footer={
-                    <>
-                        <Select defaultValue='English' style={{ width: 120, marginRight: 10 }} insetLabel={<IconLanguage />}>
-                            <Select.Option value='Chinese'>中文</Select.Option>
-                            <Select.Option value='English'>English</Select.Option>
-                            <Select.Option value='Korean'>한국어</Select.Option>
-                            <Select.Option value='Japanese'>日本語</Select.Option>
-                        </Select>
-                        <Button style={{ marginRight: 10 }}>Switch to Overseas Version</Button>
-                        <Dropdown
-                            position="bottomRight"
-                            render={
-                                <Dropdown.Menu>
-                                    <Dropdown.Item>Detail</Dropdown.Item>
-                                    <Dropdown.Item>Quit</Dropdown.Item>
-                                </Dropdown.Menu>
-                            }
-                        >
-                            <Avatar size="small" color='light-blue' style={{ margin: 4 }}>BD</Avatar>
-                            <span>Bytedancer</span>
-                        </Dropdown>
-                    </>
+                    <Dropdown
+                        position="bottomRight"
+                        render={
+                            <Dropdown.Menu>
+                                <Dropdown.Item>Detail</Dropdown.Item>
+                                <Dropdown.Item>Quit</Dropdown.Item>
+                            </Dropdown.Menu>
+                        }
+                    >
+                        <Avatar size="small" color='light-blue' style={{ margin: 4 }}>BD</Avatar>
+                        <span>Bytedancer</span>
+                    </Dropdown>
                 }
             />
+
         );
     }
 
@@ -498,6 +516,7 @@ class NavApp extends React.Component {
         );
     }
 }
+
 ```
 
 ### Expand and collapse arrow position

content/navigation/navigation/index.md

@@ -349,49 +349,54 @@ import { IconTreeSelect, IconForm, IconBreadcrumb, IconBanner, IconBadge, IconNo
     const TopHeader = () => (
         <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
             <div>
-                <Nav mode="horizontal" defaultSelectedKeys={['Home']}>
-                    <Nav.Header>
-                        <IconSemiLogo style={{ height: '36px', fontSize: 36 }} />
-                    </Nav.Header>
-                    <span
-                        style={{
-                            color: 'var(--semi-color-text-2)',
-                        }}
-                    >
-                        <span
-                            style={{
-                                marginRight: '24px',
-                                color: 'var(--semi-color-text-0)',
-                                fontWeight: '600',
-                            }}
+                <Nav
+                    mode={'horizontal'}
+                    items={[
+                        { itemKey: 'user', text: '用户管理', icon: <IconBadge /> },
+                        { itemKey: 'union', text: '活动管理', icon: <IconTreeSelect /> },
+                        {
+                            itemKey: 'approve-management',
+                            text: '审批管理',
+                            icon: <IconBreadcrumb />,
+                            items: [
+                                '入驻审核',
+                                {
+                                    itemKey: 'operation-management',
+                                    text: '运营管理',
+                                    items: [
+                                        '人员管理',
+                                        '人员变更'
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            text: '任务平台',
+                            icon: <IconSteps />,
+                            itemKey: 'job',
+                            items: ['任务管理', '用户任务查询'],
+                        },
+                    ]}
+                    onSelect={key => console.log(key)}
+                    header={{
+                        logo: <IconSemiLogo style={{ height: '36px', fontSize: 36 }} />,
+                        text: 'Semi 运营后台'
+                    }}
+                    footer={
+                        <Dropdown
+                            position="bottomRight"
+                            render={
+                                <Dropdown.Menu>
+                                    <Dropdown.Item>详情</Dropdown.Item>
+                                    <Dropdown.Item>退出</Dropdown.Item>
+                                </Dropdown.Menu>
+                            }
                         >
-                            模版推荐
-                        </span>
-                        <span style={{ marginRight: '24px' }}>所有模版</span>
-                        <span>我的模版</span>
-                    </span>
-                    <Nav.Footer>
-                        <Button
-                            theme="borderless"
-                            icon={<IconBell size="large" />}
-                            style={{
-                                color: 'var(--semi-color-text-2)',
-                                marginRight: '12px',
-                            }}
-                        />
-                        <Button
-                            theme="borderless"
-                            icon={<IconHelpCircle size="large" />}
-                            style={{
-                                color: 'var(--semi-color-text-2)',
-                                marginRight: '12px',
-                            }}
-                        />
-                        <Avatar color="orange" size="small">
-                            YJ
-                        </Avatar>
-                    </Nav.Footer>
-                </Nav>
+                            <Avatar size="small" color='light-blue' style={{ margin: 4 }}>BD</Avatar>
+                            <span>Bytedancer</span>
+                        </Dropdown>
+                    }
+                />
             </div>
         </Header>
     );
@@ -498,6 +503,8 @@ import { IconTreeSelect, IconForm, IconBreadcrumb, IconBanner, IconBadge, IconNo
     );
 };
 
+
+
 ```
 
 ### 展开收起箭头位置