import React, { useState } from 'react'; import { AppstoreOutlined, CalendarOutlined, LinkOutlined, MailOutlined, SettingOutlined, } from '@ant-design/icons'; import { Divider, Menu, Switch } from 'antd'; import type { MenuProps, MenuTheme } from 'antd/es/menu'; type MenuItem = Required['items'][number]; function getItem( label: React.ReactNode, key?: React.Key | null, icon?: React.ReactNode, children?: MenuItem[], ): MenuItem { return { key, icon, children, label, } as MenuItem; } const items: MenuItem[] = [ getItem('Navigation One', '1', ), getItem('Navigation Two', '2', ), getItem('Navigation Two', 'sub1', , [ getItem('Option 3', '3'), getItem('Option 4', '4'), getItem('Submenu', 'sub1-2', null, [getItem('Option 5', '5'), getItem('Option 6', '6')]), ]), getItem('Navigation Three', 'sub2', , [ getItem('Option 7', '7'), getItem('Option 8', '8'), getItem('Option 9', '9'), getItem('Option 10', '10'), ]), getItem( Ant Design , 'link', , ), ]; const App: React.FC = () => { const [mode, setMode] = useState<'vertical' | 'inline'>('inline'); const [theme, setTheme] = useState('light'); const changeMode = (value: boolean) => { setMode(value ? 'vertical' : 'inline'); }; const changeTheme = (value: boolean) => { setTheme(value ? 'dark' : 'light'); }; return ( <> Change Mode Change Style

); }; export default App;