feat: add hideHeader in url params

This commit is contained in:
moonrailgun 2023-10-08 19:06:59 +08:00
parent 822a307cec
commit bfc04e9033

View File

@ -1,11 +1,12 @@
import React from 'react';
import { Outlet } from 'react-router-dom';
import { Outlet, useSearchParams } from 'react-router-dom';
import { NavItem } from '../components/NavItem';
import { UserOutlined } from '@ant-design/icons';
import { Button, Dropdown } from 'antd';
import { useUserStore } from '../store/user';
export const Layout: React.FC = React.memo(() => {
const [params] = useSearchParams();
const workspaces = useUserStore((state) => {
const userInfo = state.info;
if (userInfo) {
@ -19,46 +20,49 @@ export const Layout: React.FC = React.memo(() => {
return [];
});
const showHeader = !params.has('hideHeader');
return (
<div className="flex flex-col h-full">
<div className="flex items-center bg-gray-100 px-4">
<div className="px-2 mr-10 font-bold">Tianji</div>
<div className="flex gap-8">
<NavItem to="/dashboard" label="Dashboard" />
<NavItem to="/monitor" label="Monitor" />
<NavItem to="/website" label="Website" />
<NavItem to="/servers" label="Servers" />
<NavItem to="/settings" label="Settings" />
</div>
{showHeader && (
<div className="flex items-center bg-gray-100 px-4">
<div className="px-2 mr-10 font-bold">Tianji</div>
<div className="flex gap-8">
<NavItem to="/dashboard" label="Dashboard" />
<NavItem to="/monitor" label="Monitor" />
<NavItem to="/website" label="Website" />
<NavItem to="/servers" label="Servers" />
<NavItem to="/settings" label="Settings" />
</div>
<div className="flex-1" />
<div className="flex-1" />
<div>
<Dropdown
placement="bottomRight"
menu={{
items: [
{
key: 'workspaces',
label: 'Workspaces',
children: workspaces.map((w) => ({
key: w.id,
label: `${w.name}${w.current ? '(current)' : ''}`,
disabled: w.current,
})),
},
{
key: 'logout',
label: 'Logout',
},
],
}}
>
<Button shape="circle" size="large" icon={<UserOutlined />} />
</Dropdown>
<div>
<Dropdown
placement="bottomRight"
menu={{
items: [
{
key: 'workspaces',
label: 'Workspaces',
children: workspaces.map((w) => ({
key: w.id,
label: `${w.name}${w.current ? '(current)' : ''}`,
disabled: w.current,
})),
},
{
key: 'logout',
label: 'Logout',
},
],
}}
>
<Button shape="circle" size="large" icon={<UserOutlined />} />
</Dropdown>
</div>
</div>
</div>
)}
<div className="flex-1 w-full px-4 overflow-auto">
<div className="max-w-7xl m-auto h-full">
<Outlet />