48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import './App.scss'
|
|
import {Layout, Menu} from 'antd'
|
|
import type {ItemType, MenuItemType} from 'antd/es/menu/interface'
|
|
import {isEqual} from 'licia'
|
|
import React, {useEffect, useState} from 'react'
|
|
import {NavLink, Outlet, useLocation} from 'react-router'
|
|
|
|
const {Header, Content} = Layout
|
|
|
|
const headerNav: Array<MenuItemType> = [
|
|
{key: '/', label: '首页'},
|
|
{key: '/conversation', label: '对话'},
|
|
]
|
|
|
|
const App: React.FC = () => {
|
|
const [_, setCurrentMenu] = useState<ItemType>()
|
|
const [selectedKeys, setSelectedKeys] = useState<Array<string>>([])
|
|
const location = useLocation()
|
|
useEffect(() => {
|
|
setSelectedKeys([location.pathname])
|
|
setCurrentMenu(headerNav.find((nav => isEqual(nav?.key, location.pathname))))
|
|
}, [location])
|
|
|
|
return (
|
|
<Layout className="app">
|
|
<Header className="header">
|
|
<Menu
|
|
className="header-nav"
|
|
theme="dark"
|
|
mode="horizontal"
|
|
selectedKeys={selectedKeys}
|
|
items={headerNav.map(nav => ({
|
|
key: nav.key,
|
|
label: <NavLink to={nav.key as string}>{nav.label}</NavLink>
|
|
}))}
|
|
/>
|
|
</Header>
|
|
<Layout>
|
|
<Content className="content">
|
|
<Outlet/>
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
export default App
|