@e-group/react-component-kit

Use to extend react.semantic-ui and with some examples

Usage

yarn add @e-group/react-component-kit

import lib

import { createNavbar } from '@e-group/react-component-kit'

basic content defined

const TopMenu = props => (
  <Menu
    fixed="top"
    size="huge"
    style={{
      paddingLeft: props.leftMenuWidth,
    }}
  >
    <Menu.Item name="Basic TopMenu" />
  </Menu>
)

const RightMenu = props => (
  <Sidebar
    as={Menu}
    animation="overlay"
    direction="right"
    visible={props.visible}
    vertical
    inverted
  >
    <Menu.Item name="Basic RightMenu" onClick={props.onPusherClick} />
  </Sidebar>
)

const Content = props => (
  <div className={styles.dashboard} style={{
    marginLeft: props.leftMenuWidth
  }}>
    <Switch>
      <Route exact path="/difMenu" render={() => (<div>example page</div>)} />
      <Route path="/home" component={Home} />
    </Switch>
  </div>
)

create Navbar

const Navbar = createNavbar(Content,TopMenu,RightMenu)

export default () => (
  <Navbar
    leftItems={[{
      key: 'left1',
      name: 'home',
      icon: 'home',
      link: false,
      as: NavLink,
      to: '/home',
      exact: true
    },
    {
      key: 'left2',
      name: 'difMenu',
      icon: 'folder open',
      link: false,
      as: NavLink,
      to: '/difMenu',
      exact: true
    }]}
    logo={<Image size="mini" src="/static/logo.png" centered />}
  />
)

Example

yarn

&&

yarn example