feat(Layout): add layout region inputs

src/components/LeftNav/LeftNavMenuItem.jsx

@@ -1,23 +1,26 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import cx from 'classnames'
 
 /**
  * Menu item for navigation menu
  * @param {*} props
  */
 function LeftNavMenuItem (props) {
-  let iconContainerActiveClass = props.active
-    ? 'icon_container-active'
-    : 'icon_container-inactive'
+  const { active, image, className, children, ...rest } = props
   let iconActiveClass = props.active ? 'active-icon' : ''
   return (
-    <li className='nav__item' onClick={props.onClick}>
-      {props.active ? <div className='nav_border--active' /> : null}
-      <div className={`icon_container ${iconContainerActiveClass}`}>
-        {props.image ? (
-          <img className={`icon_nav ${iconActiveClass}`} src={props.image} />
+    <li {...rest} className={cx('nav__item', className)}>
+      {active ? <div className='nav_border--active' /> : null}
+      <div
+        className={`icon_container icon_container-${
+          active ? 'active' : 'inactive'
+        }`}
+      >
+        {image ? (
+          <img className={`icon_nav ${iconActiveClass}`} src={image} />
         ) : null}
-        {props.children}
+        {children}
       </div>
     </li>
   )

src/components/suir/PopupDemo.js

@@ -6,13 +6,6 @@ export default class PopupDemo extends Component {
     super(props)
     this.state = { open: false }
   }
-  componentDidMount () {
-    setTimeout(() => {
-      Array.from(document.getElementsByClassName('popup-example')).forEach(
-        node => node.click()
-      )
-    }, 100)
-  }
   render () {
     return (
       <div>

src/components/unstable/Layout/Layout.examples.md

@@ -1,10 +1,11 @@
-### Layout examples:
+### Empty layout:
 
 ```js
-<Layout
-  className='hide-in-test'
-    logo={
-    <h1 style={{color: 'white'}}>LOGO</h1>
-  }
-/>
+<Layout className='hide-in-test' />
+```
+
+### Populated Layout:
+
+```js
+<LayoutExampleWithMenuItems className='hide-in-test' />
 ```

src/components/unstable/Layout/Layout.jsx

@@ -1,34 +1,32 @@
 import './Layout.css'
-import { Icon } from 'semantic-ui-react'
 import cx from 'classnames'
-import iconDashboard from '../../../assets/icon_mainav_dash_selected.svg'
-import iconOperations from '../../../assets/icon_mainav_ops_selected.svg'
 import LeftNav from '../../LeftNav/LeftNav'
 import PropTypes from 'prop-types'
 import React, { PureComponent } from 'react'
 import TopNav from '../../TopNav/TopNav'
 
 export default class Layout extends PureComponent {
   render () {
-    const { logo, ...rest } = this.props
+    const { logo, navItems, admin, ...rest } = this.props
     return (
       <div {...rest} className={cx(this.props.className, 'layout__container')}>
         <TopNav className='layout__header'>
           <TopNav.Content align='left'>{logo}</TopNav.Content>
           <TopNav.Content className='top-nav__dropdown-selector' align='right'>
-            {'administrator '}
-            <Icon name='chevron down' size='small' />
+            {admin}
           </TopNav.Content>
         </TopNav>
-        <LeftNav className='layout__nav'>
-          <LeftNav.MenuItem active image={iconDashboard} />
-          <LeftNav.MenuItem image={iconOperations} />
-        </LeftNav>
+        <LeftNav className='layout__nav'>{navItems}</LeftNav>
         <div className='layout__content'>{this.props.children}</div>
       </div>
     )
   }
 }
 Layout.propTypes = {
-  logo: PropTypes.element.isRequired
+  logo: PropTypes.element.isRequired,
+  navItems: PropTypes.arrayOf(PropTypes.element).isRequired,
+  admin: PropTypes.element
 }
+
+Layout.LeftNav = LeftNav
+Layout.TopNav = TopNav

src/components/unstable/Layout/LayoutExampleWithMenuItems.jsx

@@ -0,0 +1,63 @@
+import { Popup, Menu, Icon, Input, Label } from 'semantic-ui-react'
+import iconDashboard from '../../../assets/icon_mainav_dash_selected.svg'
+import iconOperations from '../../../assets/icon_mainav_ops_selected.svg'
+import Layout from './Layout'
+import React from 'react'
+
+const onClick = () => console.log('Layout:navItem:clicked!')
+export default class LayoutExampleWithMenuItems extends React.Component {
+  render () {
+    return (
+      <Layout
+        className='hide-in-test'
+        logo={<h1 style={{ color: 'white' }}>LOGO</h1>}
+        navItems={[
+          <Layout.LeftNav.MenuItem
+            key='1'
+            active
+            image={iconDashboard}
+            onClick={onClick}
+          />,
+          <Layout.LeftNav.MenuItem
+            key='2'
+            image={iconOperations}
+            onClick={onClick}
+          />
+        ]}
+        admin={
+          <Popup
+            hoverable
+            position='bottom right'
+            style={{ padding: 0 }}
+            trigger={
+              <span>
+                {'administrator '}
+                <Icon name='chevron down' size='small' />
+              </span>
+            }
+          >
+            <Menu vertical>
+              <Menu.Item name='inbox' active onClick={this.handleItemClick}>
+                <Label color='teal'>1</Label>
+                Inbox
+              </Menu.Item>
+
+              <Menu.Item name='spam' onClick={this.handleItemClick}>
+                <Label>51</Label>
+                Spam
+              </Menu.Item>
+
+              <Menu.Item name='updates' onClick={this.handleItemClick}>
+                <Label>1</Label>
+                Updates
+              </Menu.Item>
+              <Menu.Item>
+                <Input icon='search' placeholder='Search mail...' />
+              </Menu.Item>
+            </Menu>
+          </Popup>
+        }
+      />
+    )
+  }
+}