<header> navigation like Magerial Design Lite.
parent
0aca8fe779
commit
c997834243
|
@ -3,19 +3,19 @@ import { AppBar, Button } from 'react-toolbox';
|
|||
import { Link } from 'react-router';
|
||||
import Logo from '../../../logo';
|
||||
import Navigation from '../../../navigation';
|
||||
import PlaygroundArea from '../playground_area';
|
||||
// import PlaygroundArea from '../playground_area';
|
||||
import style from './appbar.scss';
|
||||
|
||||
class MainAppBar extends React.Component {
|
||||
handlerPlayGroundClick = () => {
|
||||
this.refs.playground.show();
|
||||
// this.refs.playground.show();
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<AppBar className={style.appbar} flat fixed>
|
||||
<Link to='/' className={style.brand}>
|
||||
<Logo className={style.logo} /> React Toolbox
|
||||
<Link to='/'>
|
||||
<Logo className={style.logo} />
|
||||
</Link>
|
||||
<Navigation className={style.navigation}/>
|
||||
<Button
|
||||
|
@ -25,7 +25,6 @@ class MainAppBar extends React.Component {
|
|||
kind='floating'
|
||||
onClick={this.handlerPlayGroundClick}
|
||||
/>
|
||||
<PlaygroundArea ref='playground' />
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,42 +1,27 @@
|
|||
@import "../../../globals";
|
||||
@import "~react-toolbox/app_bar/config";
|
||||
@import "~react-toolbox/button/config";
|
||||
|
||||
$appbar-brand-height: 2 * $unit;
|
||||
$appbar-brand-v-padding: ($appbar-height - $appbar-brand-height) / 2;
|
||||
$appbar-brand-logo-size: $appbar-height - 2.6 * $unit;
|
||||
$appbar-shadow: 0 1px rgba(255,255,255,0.75);
|
||||
$appbar-height: 11.2 * $unit;
|
||||
$appbar-logo-size: 3.6 * $unit;
|
||||
$appbar-shadow: 0 1px rgba(255,255,255,.75);
|
||||
|
||||
.appbar {
|
||||
composes: root from "sass!react-toolbox/app_bar/style";
|
||||
display: flex;
|
||||
min-height: $appbar-height;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
background: $color-primary-dark;
|
||||
box-shadow: $appbar-shadow;
|
||||
}
|
||||
|
||||
.brand {
|
||||
@include typo-title;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-top: $appbar-brand-v-padding;
|
||||
padding-bottom: $appbar-brand-v-padding;
|
||||
padding-left: $appbar-title-distance;
|
||||
font-weight: 400;
|
||||
color: $color-primary-contrast;
|
||||
> .logo {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: $appbar-brand-logo-size;
|
||||
height: $appbar-brand-logo-size;
|
||||
margin-top: - $appbar-brand-logo-size / 2;
|
||||
fill: $color-primary-contrast;
|
||||
}
|
||||
.logo {
|
||||
width: $appbar-logo-size;
|
||||
height: $appbar-logo-size;
|
||||
fill: $color-primary-contrast;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
flex-grow: 1;
|
||||
padding-right: $button-floating-height;
|
||||
text-align: right;
|
||||
> ul {
|
||||
list-style: none;
|
||||
> li {
|
||||
|
@ -44,7 +29,8 @@ $appbar-shadow: 0 1px rgba(255,255,255,0.75);
|
|||
> a {
|
||||
@include typo-menu;
|
||||
display: inline-block;
|
||||
padding: 2.5 * $unit $appbar-h-padding;
|
||||
margin-right: $appbar-h-padding;
|
||||
line-height: $appbar-height / 2;
|
||||
color: $color-primary-contrast;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "../../globals";
|
||||
@import "../../../globals";
|
||||
|
||||
$documentation-h1-size: 3.4 * $unit;
|
||||
$documentation-h2-size: 2.4 * $unit;
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
@import "../../globals";
|
||||
@import "~react-toolbox/app_bar/config";
|
||||
|
||||
$appbar-height: 11.2 * $unit;
|
||||
.content {
|
||||
display: flex;
|
||||
max-height: 100vh;
|
||||
|
|
|
@ -5,8 +5,8 @@ const Navigation = (props) => {
|
|||
return (
|
||||
<nav className={props.className}>
|
||||
<ul>
|
||||
<li><Link to='/install'>Installation</Link></li>
|
||||
<li><Link to='/components/app_bar'>Components</Link></li>
|
||||
<li><Link to='/install'>Installation</Link></li>
|
||||
<li><a href='http://www.github.com/react-toolbox/react-toolbox' target='_blank'>Github</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
Loading…
Reference in New Issue