layout
This commit is contained in:
parent
3cb739c197
commit
73510d9920
|
@ -16,9 +16,7 @@ export class Header extends React.Component<any, any> {
|
|||
return (
|
||||
<Container fluid>
|
||||
<LogoBar />
|
||||
<Divider />
|
||||
<TitleBar />
|
||||
<Divider />
|
||||
</Container>
|
||||
// <TopBar onSidebar={this.props.onSidebar}/>
|
||||
);
|
||||
|
|
|
@ -15,41 +15,35 @@ export class Layout extends React.Component<any, any> {
|
|||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
sidebar_visible: true,
|
||||
notification_visible: false,
|
||||
};
|
||||
}
|
||||
|
||||
onSidebar = () => {
|
||||
this.setState({ notification_visible: !this.state.notification_visible });
|
||||
this.setState({ notification_visible: !this.state.notification_visible, sidebar_visible: !this.state.sidebar_visible });
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container fluid>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column width='2' style={{margin:'0px'}}>
|
||||
<LeftMenu />
|
||||
</Grid.Column>
|
||||
<Grid.Column width='14'>
|
||||
<Grid.Row>
|
||||
<Grid.Column>
|
||||
<Header />
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Router history={history} >
|
||||
<Routes />
|
||||
</Router>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row>
|
||||
<Grid.Column>
|
||||
<Footer />
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
<Sidebar.Pushable as={Segment} vertical>
|
||||
<Sidebar as={Menu} animation='overlay' width='thin' visible={this.state.sidebar_visible} icon='labeled' vertical inverted>
|
||||
<LeftMenu />
|
||||
</Sidebar>
|
||||
<Sidebar.Pusher>
|
||||
<Segment vertical style={{margin:'0 0 0 150px', padding:'0'}}>
|
||||
<Header />
|
||||
|
||||
<Router history={history} >
|
||||
<Routes />
|
||||
</Router>
|
||||
|
||||
<Footer />
|
||||
|
||||
</Segment>
|
||||
</Sidebar.Pusher>
|
||||
</Sidebar.Pushable>
|
||||
{/* <Header onSidebar={this.onSidebar.bind(this)} />
|
||||
<Sidebar.Pushable as={Segment} vertical >
|
||||
<Sidebar
|
||||
|
|
|
@ -21,7 +21,7 @@ export class LeftMenu extends React.Component<any, any> {
|
|||
render() {
|
||||
return (
|
||||
<Container fluid className='fullHeight'>
|
||||
<Segment inverted className='fullHeight'>
|
||||
<Segment inverted vertical className='fullHeight'>
|
||||
<Menu inverted secondary vertical fluid icon='labeled' >
|
||||
|
||||
<Menu.Item name='User' href='/' >
|
||||
|
|
|
@ -25,30 +25,24 @@ export class TitleBar extends React.Component<any, any> {
|
|||
},
|
||||
];
|
||||
return (
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column width='3'>
|
||||
<Header as='h3'>Page Title
|
||||
<Header.Subheader>
|
||||
<Breadcrumb size='tiny'>
|
||||
<Breadcrumb.Section link>Home</Breadcrumb.Section>
|
||||
<Breadcrumb.Divider />
|
||||
<Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
|
||||
<Breadcrumb.Divider />
|
||||
<Breadcrumb.Section active>Probes</Breadcrumb.Section>
|
||||
</Breadcrumb>
|
||||
</Header.Subheader>
|
||||
</Header>
|
||||
</Grid.Column>
|
||||
<Grid.Column width='13'>
|
||||
<Menu secondary borderless>
|
||||
{subMenus.map((menu: any, index: number) => (
|
||||
<Menu.Item key={index} name={menu.name} href={menu.href} />
|
||||
))}
|
||||
</Menu>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
<Menu basic fluid style={{'border-left':'0px', 'border-right':'0px', 'box-shadow':'none', 'border-radius':'0'}}>
|
||||
<Menu.Item name='Page Title' style={{width:'250px'}}>
|
||||
<Header as='h3'>Page Title
|
||||
<Header.Subheader>
|
||||
<Breadcrumb size='mini' left bottom>
|
||||
<Breadcrumb.Section link>Home</Breadcrumb.Section>
|
||||
<Breadcrumb.Divider />
|
||||
<Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
|
||||
<Breadcrumb.Divider />
|
||||
<Breadcrumb.Section active>Probes</Breadcrumb.Section>
|
||||
</Breadcrumb>
|
||||
</Header.Subheader>
|
||||
</Header>
|
||||
</Menu.Item>
|
||||
{subMenus.map((menu: any, index: number) => (
|
||||
<Menu.Item key={index} name={menu.name} href={menu.href} />
|
||||
))}
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user