2019-07-03 10:46:34 +00:00
|
|
|
import React, { useState } from 'react'
|
|
|
|
import PropTypes from 'prop-types'
|
|
|
|
import styled from 'styled-components';
|
|
|
|
import Avatar from '../avatar'
|
|
|
|
import DropDown from '../drop-down'
|
|
|
|
import DropDownItem from '../drop-down-item'
|
2019-07-04 16:01:56 +00:00
|
|
|
import Badge from '../badge'
|
2019-07-03 10:46:34 +00:00
|
|
|
import { Icons } from '../icons'
|
2019-07-04 16:01:56 +00:00
|
|
|
import { Text } from '../text'
|
2019-07-03 10:46:34 +00:00
|
|
|
|
2019-07-04 16:01:56 +00:00
|
|
|
import device from './sub-components/device'
|
|
|
|
import Backdrop from './sub-components/backdrop'
|
|
|
|
import BadgedIcon from './sub-components/badged-icon'
|
|
|
|
import NavItem from './sub-components/nav-item'
|
2019-07-03 10:46:34 +00:00
|
|
|
|
|
|
|
|
2019-07-04 16:01:56 +00:00
|
|
|
const logoSrc = "https://static.onlyoffice.com/studio/tag/10.0.0/skins/default/images/onlyoffice_logo/light_small_general.svg";
|
2019-07-03 10:46:34 +00:00
|
|
|
|
|
|
|
const Wrapper = styled.div`
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
@media ${device.tablet} {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2019-07-04 16:01:56 +00:00
|
|
|
const Header = styled.div`
|
|
|
|
background-color: #0f4071;
|
|
|
|
min-height: 100vh;
|
|
|
|
z-index: 200;
|
|
|
|
min-width: ${props => props.visible ? '240px' : '56px'};
|
2019-07-03 10:46:34 +00:00
|
|
|
|
|
|
|
@media ${device.tablet} {
|
2019-07-04 16:01:56 +00:00
|
|
|
min-height: 56px;
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
2019-07-03 10:46:34 +00:00
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const HeaderIcons = styled.div`
|
|
|
|
display: flex;
|
|
|
|
padding: 0 16px;
|
|
|
|
align-items: center;
|
|
|
|
width: 100px;
|
|
|
|
justify-content: space-between;
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
height: 56px;
|
2019-07-04 16:14:03 +00:00
|
|
|
z-index: 300;
|
2019-07-03 10:46:34 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const Navigation = styled.div`
|
|
|
|
background-color: #0f4071;
|
|
|
|
width: ${props => props.visible ? '240px' : 'auto'};
|
|
|
|
position: fixed;
|
|
|
|
min-height: 100vh;
|
|
|
|
overflow-x: hidden;
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
|
|
@media ${device.tablet} {
|
|
|
|
display: ${props => props.visible ? 'block' : 'none'};
|
|
|
|
top: 0px;
|
|
|
|
width: 240px;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const MenuItem = styled.div`
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
@media ${device.tablet} {
|
2019-07-04 16:01:56 +00:00
|
|
|
display: flex;
|
|
|
|
padding: 16px;
|
|
|
|
height: 56px;
|
|
|
|
align-items: center;
|
2019-07-03 10:46:34 +00:00
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2019-07-04 16:01:56 +00:00
|
|
|
const MenuHeader = styled(Text.MenuHeader)`
|
|
|
|
margin: 0 0 0 16px;
|
|
|
|
color: #FFFFFF;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const LogoItem = styled.div`
|
2019-07-03 10:46:34 +00:00
|
|
|
display: flex;
|
|
|
|
min-width: 56px;
|
|
|
|
min-height: 56px;
|
|
|
|
align-items: center;
|
|
|
|
padding: 0 16px;
|
|
|
|
|
2019-07-04 16:01:56 +00:00
|
|
|
.logoitem-img {
|
|
|
|
margin-left: 16px;
|
|
|
|
}
|
2019-07-03 10:46:34 +00:00
|
|
|
|
2019-07-04 16:01:56 +00:00
|
|
|
@media ${device.tablet} {
|
|
|
|
.logoitem-menu {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.logoitem-img {
|
|
|
|
margin-left: 0;
|
|
|
|
}
|
|
|
|
}
|
2019-07-03 10:46:34 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const Content = styled.div`
|
|
|
|
min-height: 100vh;
|
|
|
|
width: 100vw;
|
|
|
|
|
|
|
|
@media ${device.tablet} {
|
|
|
|
padding-top: 56px;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const Layout = props => {
|
|
|
|
|
|
|
|
const [visible, setState] = useState(props.visible);
|
|
|
|
const [opened, toggle] = useState(props.opened);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Wrapper>
|
|
|
|
<Backdrop visible={visible} onClick={() => { setState(false); toggle(false); }}/>
|
|
|
|
<Header visible={visible}>
|
2019-07-04 16:01:56 +00:00
|
|
|
<HeaderIcons>
|
|
|
|
<BadgedIcon iconName="ChatIcon" badgeNumber={10} onClick={() => {}}/>
|
2019-07-04 16:14:03 +00:00
|
|
|
<Avatar size="small" role="user" onClick={() => { toggle(!opened); }} />
|
|
|
|
<DropDown isUserPreview withArrow direction='right' isOpen={opened}>
|
|
|
|
<DropDownItem isUserPreview role='user' source='' userName='Jane Doe' label='janedoe@gmail.com'/>
|
|
|
|
<DropDownItem label="Profile"/>
|
|
|
|
<DropDownItem label="About"/>
|
|
|
|
<DropDownItem label="Log out"/>
|
|
|
|
</DropDown>
|
2019-07-04 16:01:56 +00:00
|
|
|
</HeaderIcons>
|
2019-07-03 10:46:34 +00:00
|
|
|
<MenuItem>
|
2019-07-04 16:01:56 +00:00
|
|
|
<BadgedIcon iconName="MenuIcon" badgeNumber={10} onClick={() => { setState(!visible); }}/>
|
|
|
|
<MenuHeader>Documents</MenuHeader>
|
2019-07-03 10:46:34 +00:00
|
|
|
</MenuItem>
|
|
|
|
<Navigation visible={visible}>
|
2019-07-04 16:01:56 +00:00
|
|
|
<LogoItem>
|
|
|
|
<BadgedIcon className="logoitem-menu" iconName="MenuIcon" badgeNumber={10} onClick={() => { setState(!visible); }}/>
|
|
|
|
{ visible ? <img className="logoitem-img" alt="ONLYOFFICE" src={logoSrc}/> : "" }
|
|
|
|
</LogoItem>
|
|
|
|
<NavItem seporator={true}></NavItem>
|
|
|
|
<NavItem active={true} opened={visible} iconName="DocumentsIcon" badgeNumber={3} onClick={() => {}}>Documents</NavItem>
|
|
|
|
<NavItem active={false} opened={visible} iconName="MailIcon" badgeNumber={7} onClick={() => {}}>Mail</NavItem>
|
2019-07-03 10:46:34 +00:00
|
|
|
</Navigation>
|
|
|
|
</Header>
|
2019-07-04 16:01:56 +00:00
|
|
|
<Content>
|
2019-07-03 10:46:34 +00:00
|
|
|
{props.children}
|
|
|
|
</Content>
|
|
|
|
</Wrapper>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
Layout.propTypes = {
|
|
|
|
visible: PropTypes.bool
|
|
|
|
}
|
|
|
|
|
|
|
|
Layout.defaultProps = {
|
|
|
|
visible: false
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Layout
|