feat: add base layout
This commit is contained in:
@@ -1,6 +1,73 @@
|
||||
import { Avatar, Layout, Menu } from '@arco-design/web-react';
|
||||
import {
|
||||
IconApps,
|
||||
IconBulb,
|
||||
IconFire,
|
||||
IconMenuFold,
|
||||
IconMenuUnfold,
|
||||
IconRobot,
|
||||
IconSafe,
|
||||
IconUser,
|
||||
} from '@arco-design/web-react/icon';
|
||||
import { useState } from 'react';
|
||||
import Logo from '@assets/images/logo.svg?react';
|
||||
import { Outlet } from 'react-router';
|
||||
|
||||
function Home() {
|
||||
return <div>Home</div>;
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
return (
|
||||
<Layout className="h-screen w-full">
|
||||
<Layout.Sider
|
||||
collapsible
|
||||
onCollapse={setCollapsed}
|
||||
trigger={collapsed ? <IconMenuUnfold /> : <IconMenuFold />}
|
||||
>
|
||||
<div className="flex flex-row items-center justify-center px-2 py-3">
|
||||
<Logo />
|
||||
{!collapsed && <h2 className="ml-4 text-xl font-medium">Foka CI</h2>}
|
||||
</div>
|
||||
<Menu
|
||||
className="flex-1"
|
||||
defaultOpenKeys={['0']}
|
||||
defaultSelectedKeys={['0_1']}
|
||||
>
|
||||
<Menu.Item key="0">
|
||||
<IconApps />
|
||||
Navigation 1
|
||||
</Menu.Item>
|
||||
<Menu.Item key="1">
|
||||
<IconRobot />
|
||||
Navigation 2
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<IconBulb />
|
||||
Navigation 3
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3">
|
||||
<IconSafe />
|
||||
Navigation 4
|
||||
</Menu.Item>
|
||||
<Menu.Item key="4">
|
||||
<IconFire />
|
||||
Navigation 5
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Layout.Sider>
|
||||
<Layout>
|
||||
<Layout.Header className="h-14 border-b-gray-100 border-b-[1px]">
|
||||
<div className="flex items-center justify-end px-4 h-full">
|
||||
<Avatar>
|
||||
<IconUser />
|
||||
</Avatar>
|
||||
</div>
|
||||
</Layout.Header>
|
||||
<Layout.Content>
|
||||
<Outlet />
|
||||
</Layout.Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
|
||||
Reference in New Issue
Block a user