2017-02-02 12:10:59 +00:00
|
|
|
import Head from 'next/head'
|
|
|
|
|
import Link from 'next/link'
|
|
|
|
|
|
2017-02-02 21:56:07 +00:00
|
|
|
import { PureComponent } from 'react'
|
|
|
|
|
|
2017-02-02 12:10:59 +00:00
|
|
|
import Avatar from 'react-md/lib/Avatars'
|
|
|
|
|
import Button from 'react-md/lib/Buttons/Button'
|
|
|
|
|
import FontIcon from 'react-md/lib/FontIcons'
|
|
|
|
|
import ListItem from 'react-md/lib/Lists/ListItem'
|
|
|
|
|
import NavigationDrawer from 'react-md/lib/NavigationDrawers'
|
|
|
|
|
import SelectField from 'react-md/lib/SelectFields'
|
|
|
|
|
|
|
|
|
|
const avatarSrc = 'https://cloud.githubusercontent.com/assets/13041/19686250/971bf7f8-9ac0-11e6-975c-188defd82df1.png'
|
|
|
|
|
|
|
|
|
|
const drawerHeaderChildren = [
|
|
|
|
|
<Avatar
|
|
|
|
|
key={avatarSrc}
|
|
|
|
|
src={avatarSrc}
|
|
|
|
|
role='presentation'
|
|
|
|
|
iconSized
|
|
|
|
|
style={{ alignSelf: 'center', marginLeft: 16, marginRight: 16, flexShrink: 0 }}
|
|
|
|
|
/>,
|
|
|
|
|
<SelectField
|
|
|
|
|
id='account-switcher'
|
|
|
|
|
defaultValue='Jonathan'
|
|
|
|
|
menuItems={['Jonathan', 'Fred']}
|
|
|
|
|
key='account-switcher'
|
|
|
|
|
position={SelectField.Positions.BELOW}
|
|
|
|
|
className='md-select-field--toolbar'
|
|
|
|
|
/>
|
|
|
|
|
]
|
|
|
|
|
|
2017-02-02 21:56:07 +00:00
|
|
|
class NavigationLink extends PureComponent {
|
|
|
|
|
// NOTE: Don't try using Stateless (function) component here. `ref` is
|
|
|
|
|
// required by React-MD/AccessibleFakeButton, but Stateless components
|
|
|
|
|
// don't have one by design:
|
|
|
|
|
// https://github.com/facebook/react/issues/4936
|
|
|
|
|
render () {
|
|
|
|
|
const { href, as, children, ..._props } = this.props
|
|
|
|
|
return (
|
|
|
|
|
<div {..._props} style={{padding: 0}}>
|
|
|
|
|
<Link href={href} as={as}>
|
|
|
|
|
<a className='md-list-tile md-list-tile--mini' style={{width: '100%', overflow: 'hidden'}}>
|
|
|
|
|
{children}
|
|
|
|
|
</a>
|
|
|
|
|
</Link>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
2017-02-02 12:10:59 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default () => {
|
|
|
|
|
const closeButton = (
|
|
|
|
|
<Button
|
|
|
|
|
icon
|
|
|
|
|
tooltipLabel='Close the interactive demo'
|
|
|
|
|
tooltipDelay={150}
|
|
|
|
|
tooltipPosition='left'
|
|
|
|
|
>
|
|
|
|
|
close
|
|
|
|
|
</Button>
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<Head>
|
|
|
|
|
<link rel='stylesheet' href='/static/react-md.light_blue-yellow.min.css' />
|
|
|
|
|
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' />
|
|
|
|
|
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Material+Icons' />
|
|
|
|
|
</Head>
|
|
|
|
|
<NavigationDrawer
|
|
|
|
|
navItems={[
|
|
|
|
|
<ListItem
|
|
|
|
|
key='0'
|
|
|
|
|
component={NavigationLink}
|
|
|
|
|
href='/'
|
|
|
|
|
leftIcon={<FontIcon>inbox</FontIcon>}
|
|
|
|
|
tileClassName='md-list-tile--mini'
|
|
|
|
|
primaryText={'Root'}
|
|
|
|
|
/>,
|
|
|
|
|
<ListItem
|
|
|
|
|
key='1'
|
|
|
|
|
component={NavigationLink}
|
|
|
|
|
href='/non-existing-page'
|
|
|
|
|
leftIcon={<FontIcon>star</FontIcon>}
|
|
|
|
|
tileClassName='md-list-tile--mini'
|
|
|
|
|
primaryText={'404 page'}
|
|
|
|
|
/>
|
|
|
|
|
]}
|
|
|
|
|
contentClassName='md-grid'
|
|
|
|
|
drawerHeaderChildren={drawerHeaderChildren}
|
|
|
|
|
mobileDrawerType={NavigationDrawer.DrawerTypes.TEMPORARY_MINI}
|
|
|
|
|
tabletDrawerType={NavigationDrawer.DrawerTypes.PERSISTENT_MINI}
|
|
|
|
|
desktopDrawerType={NavigationDrawer.DrawerTypes.PERSISTENT_MINI}
|
|
|
|
|
toolbarTitle='Hello, World!'
|
|
|
|
|
toolbarActions={closeButton}
|
|
|
|
|
>
|
|
|
|
|
<h1>Hello Next.js!</h1>
|
|
|
|
|
</NavigationDrawer>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
