import React from 'react';

import { Container, Menu, Segment, Grid, Header, Image, Icon, Button, Form, Divider, Responsive, Input, Label } from 'semantic-ui-react'

export default class MenuPageWrapper extends React.Component {
    render() {
        return (
            <Grid padded>
                <Grid.Column
                    tablet={2}
                    computer={2}
                    only="tablet computer"
                    id="sidebar"
                >
                    <Menu vertical borderless fluid text>
                        {this.props.menuItems.map(menuItem => (
                            <Menu.Item key={menuItem.title} name={menuItem.icon} href={menuItem.href} active={menuItem.href===""}>
                            <Icon name={menuItem.icon} />{menuItem.title}</Menu.Item>
                        ))}
                    </Menu>
                </Grid.Column>
                <Grid.Column
                    mobile={16}
                    tablet={13}
                    computer={14}
                    floated="right"
                    id="content"
                >
                <Segment basic loading={this.props.loading}>
                    {this.props.title && <Header as="h2">{this.props.title}</Header>}
                    {this.props.children}
                </Segment>
                </Grid.Column>
            </Grid>
        );
    }
}