// Dependencies

import builder from 'focus-core/component/builder';
import historic from 'focus-core/history';
import types from 'focus-core/component/types';

// Mixins

const popinProperties = require('../mixin/popin-behaviour').mixin;
const stylabe = require('../../mixin/stylable');

// Components

import Button from '../../components/button';

const Menu = {
    mixins: [stylabe, popinProperties],/** @inheritedProps*/
    /** @inheritedProps*/
    getDefaultProps() {
        return {
            items: []
        };
    },
    /** @inheritedProps*/
    propTypes: {
        code: types('array')
    },
    /**
    * Toggle the state of the menu.
    */
    toggle() {
        this.setState({open: !this.state.open});
    },
    /**
    * Render the links of the menu
    */
    _renderMenuItems() {
        return this.props.items.map((link, idx) => {
            let clickHandler;
            if (link.route !== undefined) {
                clickHandler = () => {
                    if (link.onClick) link.onClick.call(this, arguments);
                    historic.navigate(link.route, true);
                };
            } else {
                clickHandler = link.onClick;
            }
            const buttonProps = {
                option: 'link',
                shape: 'icon',
                type: 'button',
                ...link
            };
            return (
                <li key={idx} onClick={clickHandler}>
                    <Button {...buttonProps} />
                    <span>{link.name}</span>
                </li>
            );
        });
    },
    /** @inheriteddoc */
    render() {
        const {direction, position, children} = this.props;
        const className = `menu menu-${direction} menu-${position} menu-${this.state.open ? 'open' : ''} ${this._getStyleClassName()}`;
        return (
            <nav className={className} data-focus='menu'>
                <div data-focus='menu-brand'></div>
                <ul data-focus='menu-items'>{this._renderMenuItems()}</ul>
                {children}
            </nav>
        );
    }
};

module.exports = builder(Menu);

@@ -9,17 +9,16 @@
 dencies%0A
-%0A
 import b
@@ -152,17 +152,16 @@
 types';%0A
-%0A
 // Mixin
@@ -162,22 +162,33 @@
  Mixins%0A
-%0Aconst
+import %7B mixin as
  popinPr
@@ -196,26 +196,23 @@
 perties 
-= require(
+%7D from 
 '../mixi
@@ -233,41 +233,30 @@
 our'
-).mixin;%0Aconst stylabe = require(
+;%0Aimport stylabe from 
 '../
@@ -273,19 +273,16 @@
 tylable'
-);%0A
 %0A// Comp
@@ -288,17 +288,16 @@
 ponents%0A
-%0A
 import B
@@ -686,16 +686,17 @@
 tState(%7B
+ 
 open: !t
@@ -709,16 +709,17 @@
 ate.open
+ 
 %7D);%0A    
@@ -1639,16 +1639,17 @@
  const %7B
+ 
 directio
@@ -1669,16 +1669,17 @@
 children
+ 
 %7D = this
@@ -1945,14 +1945,10 @@
 and'
-%3E%3C/div
+ /
 %3E%0A  
@@ -2091,36 +2091,114 @@
 %7D;%0A%0A
-module.exports = builder(Menu)
+const %7B mixin, component %7D = builder(Menu);%0Aexport %7B mixin, component %7D;%0Aexport default %7B mixin, component %7D
 ;%0A

clean application/menu