包含：

• Container
• NavBar
• Menu
• Content
• BrandNav

Container

最基本的外框容器：

import React from 'react'
import styled from 'styled-jss'

const StyledContainer = styled('main')(({ theme, style }) => ({
  position: 'relative',
  backgroundColor: theme.colors.grey0,
  ...style
}));

const Container = ({ children, ...props }) => {
return <StyledContainer style={props}>{children}</StyledContainer>
}

export default Container;

導覽列 NavBar

位於頂端的 Header 區塊

import React from 'react';
import styled from 'styled-jss';
import propTypes from 'prop-types';

const StyledNavBar = styled('header')(({ style, theme }) => ({
  height: 60,
  marginLeft: 250,
  width: 'calc(100% - 250px)',
  backgroundColor: theme.colors.primary,
}));

export const NavBar = ({ children, ...props}) => {
  return <StyledNavBar style={props} ></StyledNavBar>
}

NavBar.propTypes = {
  style: propTypes.object
}

NavBar.defaultProps = {
  style: {}
}

export default NavBar;

選單 Menu

側邊欄位

import React from 'react';
import styled from 'styled-jss';

const StyledMenu = styled('div')(({ theme }) => ({
    top: 0,
    width: 250,
    height: '100%',
    position: 'absolute',
    backgroundColor: theme.colors.black,
}));

const Menu = ({ children, ...props }) => {
    return <StyledMenu {...props} >{children}</StyledMenu>
}

export default Menu;

Content 內容區塊

import React from 'react';
import styled from 'styled-jss';

const StyledContent = styled('div')(({ theme }) => ({
    marginLeft: 250,
    height: 'calc(100% - 60px)',
}));

const Content = ({  children, ...props }) => {
    return <StyledContent style={props}>{children}</StyledContent>
}

export default Content;

網站標題 BrandNav

放置 logo 等等的區塊

import React from 'react'
import styled from 'styled-jss'
import theme from '../theme';

const StyledBrandNav = styled('div')({
  height: 60,
  width: '100%',
  backgroundColor: theme.colors.grey4,
});

const BrandNav = ({ children, ...props }) => {
  return (
  <StyledBrandNav style={props}>{children}</StyledBrandNav>
  )
}

export default BrandNav;

Usage

import React from 'react';
import Menu from '../../lib/Menu';
import theme from "../../lib/theme";
import NavBar from '../../lib/NavBar';
import Content from '../../lib/Content';
import BrandNav from '../../lib/BrandNav';
import Container from '../../lib/Container';
import ThemeProvider from "../../lib/ThemeProvider";


const Provider = (props) => {
  return <ThemeProvider theme={theme}>{props.children}</ThemeProvider>;
};

const Template = props => {
  return (
    <Provider>
      <Container width='100vw' height='100vh' maxHeight='400px' maxWidth='960px'>
        <NavBar></NavBar>
        <Menu>
          <BrandNav>
          </BrandNav>
        </Menu>
        <Content>
          <h1>Something ...</h1>
        </Content>
      </Container>
    </Provider>
  )
}

export const Default = Template.bind({});

export default {
  component: NavBar,
  title: 'Layout/Layout'
};

結果如下：