diff --git a/src/component/app.tsx b/src/component/app.tsx index f93289eea..277ef5cfb 100644 --- a/src/component/app.tsx +++ b/src/component/app.tsx @@ -4,7 +4,7 @@ import { ElementList } from './container/element_list'; import { IconName, IconRegistry } from '../lsg/patterns/icons'; import { fonts } from '../lsg/patterns/fonts/index'; import { JsonObject } from '../store/json'; -import Layout from '../lsg/patterns/layout'; +import Layout, {MainArea, SideBar} from '../lsg/patterns/layout'; import { createMenu } from './menu'; import * as MobX from 'mobx'; import { observer } from 'mobx-react'; @@ -29,17 +29,6 @@ injectGlobal` } `; -const MainArea = styledComponents(Layout)` - box-sizing: border-box; - height: 100vh; - padding-top: 38px; -`; - -const SideBar = styledComponents(Layout)` - flex-basis: 240px; - overflow-y: scroll; -`; - const ElementPane = styledComponents.div` flex: 2 0 0px; `; diff --git a/src/lsg/patterns/layout/index.tsx b/src/lsg/patterns/layout/index.tsx index 5e4be245e..a43822d9b 100644 --- a/src/lsg/patterns/layout/index.tsx +++ b/src/lsg/patterns/layout/index.tsx @@ -15,6 +15,37 @@ const StyledLayout = styled.div` ${(props: LayoutProps) => (props.hasMargins ? `margin: 0 ${getSpace(Size.L)}px` : '')}; `; +const StyledMainArea = styled(StyledLayout)` + box-sizing: border-box; + height: 100vh; + padding-top: 38px; +`; + +const StyledSideBar = styled(StyledLayout)` + flex-basis: 240px; + overflow-y: scroll; +`; + +export const MainArea: React.StatelessComponent = props => ( + + {props.children} + +); + +export const SideBar: React.StatelessComponent = props => ( + + {props.children} + +); + const Layout: React.StatelessComponent = props => (