tachybase_todo/packages/app/src/components/pages/AdminLoader/TopMenuLayout/index.tsx
2021-03-16 23:00:18 +08:00

56 lines
2.4 KiB
TypeScript

import React, { useState } from 'react';
import { Layout, Dropdown, Avatar, Drawer } from 'antd';
import './style.less';
import { history, Link, request, useModel } from 'umi';
import { UserOutlined, CodeOutlined, MenuOutlined } from '@ant-design/icons';
import AvatarDropdown from '@/components/pages/AvatarDropdown';
import Menu from '../menu';
import { ReactComponent as Logo } from './logo-white.svg';
import { useResponsive, useLocalStorageState } from 'ahooks';
import get from 'lodash/get';
export function TopMenuLayout(props: any) {
const { currentPageName, menu = [] } = props;
console.log({menu})
// const [visible, setVisible] = useState(false);
const [visible, setVisible] = useLocalStorageState(`nocobase-nav-visible`, false);
const responsive = useResponsive();
const isMobile = responsive.small && !responsive.middle && !responsive.large;
const { initialState = {}, loading, error, refresh, setInitialState } = useModel('@@initialState');
const logoUrl = get(initialState, 'systemSettings.logo.url');
console.log({logoUrl});
return (
<Layout style={{ height: '100vh' }}>
<Layout.Header style={{height: 48, lineHeight: '48px', padding: 0}} className="nb-header">
<div className="logo" style={{width: 200, height: 48, float: 'left'}}>
{!logoUrl ? <Logo/> : <img src={logoUrl}/>}
</div>
{!isMobile && <Menu currentPageName={currentPageName} hideChildren={true} items={menu} className={'noco-top-menu'} style={{float: 'left'}} theme="dark" mode="horizontal"/>}
{!isMobile && <AvatarDropdown/>}
{isMobile && <MenuOutlined onClick={() => {
setVisible(true);
}} style={{
fontSize: 16,
color: '#fff',
position: 'absolute',
right: 16,
top: 16,
}}/>}
{isMobile && <Drawer visible={visible} onClose={() => {
setVisible(false);
}} placement={'right'} closable={false} bodyStyle={{background: '#001529', padding: 0}}>
<Menu currentPageName={currentPageName} onSelect={() => {
setVisible(false);
}} mode={'inline'} hideChildren={true} items={menu} className={'noco-top-menu'} style={{float: 'left'}} theme="dark"/>
<AvatarDropdown/>
</Drawer>}
</Layout.Header>
<Layout.Content>
{props.children}
</Layout.Content>
</Layout>
);
};
export default TopMenuLayout;