layout
This commit is contained in:
parent
a08b221743
commit
c9464b262d
|
@ -1,5 +1,5 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Container } from 'semantic-ui-react';
|
import { Container, Divider } from 'semantic-ui-react';
|
||||||
import { TopBar } from '../TopBar';
|
import { TopBar } from '../TopBar';
|
||||||
import { LogoBar } from './LogoBar';
|
import { LogoBar } from './LogoBar';
|
||||||
import { TitleBar } from './TitleBar';
|
import { TitleBar } from './TitleBar';
|
||||||
|
@ -16,7 +16,9 @@ export class Header extends React.Component<any, any> {
|
||||||
return (
|
return (
|
||||||
<Container fluid>
|
<Container fluid>
|
||||||
<LogoBar />
|
<LogoBar />
|
||||||
|
<Divider />
|
||||||
<TitleBar />
|
<TitleBar />
|
||||||
|
<Divider />
|
||||||
</Container>
|
</Container>
|
||||||
// <TopBar onSidebar={this.props.onSidebar}/>
|
// <TopBar onSidebar={this.props.onSidebar}/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -28,7 +28,7 @@ export class Layout extends React.Component<any, any> {
|
||||||
<Container fluid>
|
<Container fluid>
|
||||||
<Grid>
|
<Grid>
|
||||||
<Grid.Row>
|
<Grid.Row>
|
||||||
<Grid.Column width='2'>
|
<Grid.Column width='2' style={{margin:'0px'}}>
|
||||||
<LeftMenu />
|
<LeftMenu />
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
<Grid.Column width='14'>
|
<Grid.Column width='14'>
|
||||||
|
|
|
@ -24,15 +24,17 @@ export class LeftMenu extends React.Component<any, any> {
|
||||||
<Segment inverted className='fullHeight'>
|
<Segment inverted className='fullHeight'>
|
||||||
<Menu inverted secondary vertical fluid icon='labeled' >
|
<Menu inverted secondary vertical fluid icon='labeled' >
|
||||||
|
|
||||||
<Menu.Item name='User' >
|
<Menu.Item name='User' href='/' >
|
||||||
<Icon name='user' />
|
<Icon name='user' />
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
<Menu.Item name='Home' >
|
<Menu.Item name='Home' href='/' >
|
||||||
<Icon name='home' />
|
<Icon name='home' />
|
||||||
Home
|
Home
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
<Menu.Item name='Monitoring' >
|
<Menu.Item name='Monitoring' href='/' >
|
||||||
<Icon name='bar graph' />
|
<Icon name='bar graph' />
|
||||||
|
Monitoring
|
||||||
|
{/*
|
||||||
<Dropdown text='Monitoring' pointing>
|
<Dropdown text='Monitoring' pointing>
|
||||||
<Dropdown.Menu>
|
<Dropdown.Menu>
|
||||||
<Dropdown.Header>Monitoring</Dropdown.Header>
|
<Dropdown.Header>Monitoring</Dropdown.Header>
|
||||||
|
@ -40,42 +42,45 @@ export class LeftMenu extends React.Component<any, any> {
|
||||||
<Dropdown.Item>Sensors</Dropdown.Item>
|
<Dropdown.Item>Sensors</Dropdown.Item>
|
||||||
</Dropdown.Menu>
|
</Dropdown.Menu>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
|
*/}
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
|
|
||||||
<Menu.Item name='Infrastructure' >
|
<Menu.Item name='Infrastructure' href='/' >
|
||||||
<Icon name='sitemap' />
|
<Icon name='sitemap' />
|
||||||
|
Infrastructure
|
||||||
|
{/*
|
||||||
<Dropdown text='Infrastructure' >
|
<Dropdown text='Infrastructure' >
|
||||||
|
|
||||||
<Dropdown.Menu>
|
<Dropdown.Menu>
|
||||||
<Dropdown.Header>Infrastructure</Dropdown.Header>
|
<Dropdown.Header>Infrastructure</Dropdown.Header>
|
||||||
<Dropdown.Item>Maps</Dropdown.Item>
|
<Dropdown.Item>Maps</Dropdown.Item>
|
||||||
<Dropdown.Item>Targets</Dropdown.Item>
|
<Dropdown.Item>Targets</Dropdown.Item>
|
||||||
</Dropdown.Menu>
|
</Dropdown.Menu>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
|
*/}
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
|
|
||||||
<Menu.Item name='Dashboard' >
|
<Menu.Item name='Dashboard' href='/' >
|
||||||
<Icon name='industry' />
|
<Icon name='industry' />
|
||||||
Dashboard
|
Dashboard
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
|
|
||||||
<Menu.Item name='Metrics' >
|
<Menu.Item name='Metrics' href='/' >
|
||||||
<Icon name='tasks' />
|
<Icon name='tasks' />
|
||||||
Metrics
|
Metrics
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
|
|
||||||
<Menu.Item name='Alerts' >
|
<Menu.Item name='Alerts' href='/' >
|
||||||
<Icon name='alarm' />
|
<Icon name='alarm' />
|
||||||
Alerts
|
Alerts
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
|
|
||||||
<Menu.Item name='History' >
|
<Menu.Item name='History' href='/' >
|
||||||
<Icon name='book' />
|
<Icon name='book' />
|
||||||
History
|
History
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
|
|
||||||
|
|
||||||
<Menu.Item>
|
<Menu.Item href='/'>
|
||||||
<Icon name='play circle' />
|
<Icon name='play circle' />
|
||||||
<Dropdown text='Custom'>
|
<Dropdown text='Custom'>
|
||||||
<Dropdown.Menu>
|
<Dropdown.Menu>
|
||||||
|
@ -91,7 +96,7 @@ export class LeftMenu extends React.Component<any, any> {
|
||||||
</Dropdown.Menu>
|
</Dropdown.Menu>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
<Menu.Item name='Settings' >
|
<Menu.Item name='Settings' href='/' >
|
||||||
<Icon name='setting' />
|
<Icon name='setting' />
|
||||||
Settings
|
Settings
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
|
|
|
@ -28,15 +28,16 @@ export class TitleBar extends React.Component<any, any> {
|
||||||
<Grid>
|
<Grid>
|
||||||
<Grid.Row>
|
<Grid.Row>
|
||||||
<Grid.Column width='3'>
|
<Grid.Column width='3'>
|
||||||
<Header as='h3'>Page Title<Header.Subheader>
|
<Header as='h3'>Page Title
|
||||||
<Breadcrumb>
|
<Header.Subheader>
|
||||||
<Breadcrumb.Section link>Home</Breadcrumb.Section>
|
<Breadcrumb size='tiny'>
|
||||||
<Breadcrumb.Divider />
|
<Breadcrumb.Section link>Home</Breadcrumb.Section>
|
||||||
<Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
|
<Breadcrumb.Divider />
|
||||||
<Breadcrumb.Divider />
|
<Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
|
||||||
<Breadcrumb.Section active>Probes</Breadcrumb.Section>
|
<Breadcrumb.Divider />
|
||||||
</Breadcrumb>
|
<Breadcrumb.Section active>Probes</Breadcrumb.Section>
|
||||||
</Header.Subheader>
|
</Breadcrumb>
|
||||||
|
</Header.Subheader>
|
||||||
</Header>
|
</Header>
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
<Grid.Column width='13'>
|
<Grid.Column width='13'>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user