polestar-ui-kit/lib/Layout/Layout.md

## Install

Layout component example:

```jsx static
import React from 'react';
import { 
    Layout, 
    Button, 
    MegaMenu, 
    Breadcrumb,
} from 'polestar-ui-kit';

class MyComponent extends React.Component {

    onLogoClick = (e) => {
        this.layoutRef.current.toggleExpandLeft();
    }

    onMenuClick = (e, item, itemPaths) => {
        this.setState({ breadcrumbRoutes: itemPaths });
    }

    renderMegaMenu = () => {
        return (
            <MegaMenu
                items={menuItems}
                onClick={this.onMenuClick}
            />
        );
    };

    renderHeader = () => (
        <div className="navbar">
            <div className="navbar-logo" onClick={this.onLogoClick}>
                POLESTAR
            </div>
            <div className="navbar-nav">
                {this.renderMegaMenu()}
            </div>
            <div className="navbar-item">
                <Button icon="search" />
                <Button icon="bell" />
                <Button icon="user" />
                <Button icon="question" />
                <Button icon="cog" />
            </div>
        </div>
    );

    renderBreadcrumb = () => (
        <Breadcrumb items={this.state.breadcrumbRoutes} />
    );

    renderLeftSide = () => {
        return {
            content: (
                <div>LeftSide</div>
            ),
            resizable: true,
            width: 400,
            minWidth: 200,
            maxWidth: 700,
            expandToggleButton: true,
            onExpand: (width) => {
                console.log('App onExpand', width);
            },
            onCollapse: () => {
                console.log('App onCollapse');
            },
            onResize: (width) => {
                console.log('App onResize', width);
            },
        } 
    };

    renderFooter = () => <div>Polestar UI/UX Framework ©2017 Created by NKIA</div>;

    render() {
        return (
            <Layout
                type="polestar"
                ref={this.layoutRef}
                header={this.renderHeader()}
                breadcrumb={this.renderBreadcrumb()}
                footer={this.renderFooter()}
                leftside={this.renderLeftSide()}
            >
                {routes}
            </Layout>
        );
    }
}

export default MyComponent;
```