coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Closes #92 - Sidebar now scrolls instead of squishes

Browse Source
This commit is contained in:
Tom Moor
2017-06-30 22:09:22 -07:00
parent 37ed973322
commit 603d5f2b6b
1 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/components/Layout/Layout.js
View File

@ -11,6 +11,7 @@ import { textColor } from 'styles/constants.scss';
import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
import { LoadingIndicatorBar } from 'components/LoadingIndicator';
import Scrollable from 'components/Scrollable';
import SidebarCollection from './components/SidebarCollection';
import SidebarCollectionList from './components/SidebarCollectionList';
@ -101,21 +102,23 @@ type Props = {
</Header>
<Flex column>
<LinkSection>
<SidebarLink to="/search">Search</SidebarLink>
</LinkSection>
<LinkSection>
<SidebarLink to="/dashboard">Home</SidebarLink>
<SidebarLink to="/starred">Starred</SidebarLink>
</LinkSection>
<LinkSection>
{ui.activeCollection
? <SidebarCollection
document={ui.activeDocument}
collection={ui.activeCollection}
/>
: <SidebarCollectionList />}
</LinkSection>
<Scrollable>
<LinkSection>
<SidebarLink to="/search">Search</SidebarLink>
</LinkSection>
<LinkSection>
<SidebarLink to="/dashboard">Home</SidebarLink>
<SidebarLink to="/starred">Starred</SidebarLink>
</LinkSection>
<LinkSection>
{ui.activeCollection
? <SidebarCollection
document={ui.activeDocument}
collection={ui.activeCollection}
/>
: <SidebarCollectionList />}
</LinkSection>
</Scrollable>
</Flex>
</Sidebar>}
@ -135,7 +138,7 @@ const Container = styled(Flex)`
`;
const LogoLink = styled(Link)`
margin-top: 5px;
margin-top: 15px;
font-family: 'Atlas Grotesk';
font-weight: bold;
color: ${textColor};
@ -166,19 +169,19 @@ const Content = styled(Flex)`
const Sidebar = styled(Flex)`
width: 250px;
margin-left: ${props => (props.editMode ? '-250px' : 0)};
padding: 10px 20px;
background: rgba(250, 251, 252, 0.71);
border-right: 1px solid #eceff3;
transition: margin-left 200ms ease-in-out;
`;
const Header = styled(Flex)`
margin-bottom: 20px;
flex-shrink: 0;
padding: 10px 20px;
`;
const LinkSection = styled(Flex)`
margin-bottom: 20px;
flex-direction: column;
padding: 10px 20px;
`;
export default withRouter(inject('user', 'auth', 'ui', 'collections')(Layout));