<header> navigation like Magerial Design Lite.

docs/app/components/layout/main/components/appbar.jsx

@@ -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}>
+        <Link to='/'>
-          <Logo className={style.logo} /> React Toolbox
+          <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>
     );
   }

docs/app/components/layout/main/components/appbar.scss

@@ -1,42 +1,27 @@
 @import "../../../globals";
 @import "~react-toolbox/app_bar/config";
 @import "~react-toolbox/button/config";
-
+$appbar-height: 11.2 * $unit;
-$appbar-brand-height: 2 * $unit;
+$appbar-logo-size: 3.6 * $unit;
-$appbar-brand-v-padding: ($appbar-height - $appbar-brand-height) / 2;
+$appbar-shadow: 0 1px rgba(255,255,255,.75);
-$appbar-brand-logo-size: $appbar-height - 2.6 * $unit;
-$appbar-shadow: 0 1px rgba(255,255,255,0.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 {
+.logo {
-  @include typo-title;
+  width: $appbar-logo-size;
-  position: relative;
+  height: $appbar-logo-size;
-  display: inline-block;
+  fill: $color-primary-contrast;
-  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;
-  }
 }
 
 .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;
       }
     }

docs/app/components/layout/main/components/documentation.scss

@@ -1,4 +1,4 @@
-@import "../../globals";
+@import "../../../globals";
 
 $documentation-h1-size: 3.4 * $unit;
 $documentation-h2-size: 2.4 * $unit;

docs/app/components/layout/main/style.scss

@@ -1,6 +1,7 @@
 @import "../../globals";
 @import "~react-toolbox/app_bar/config";
 
+$appbar-height: 11.2 * $unit;
 .content {
   display: flex;
   max-height: 100vh;

docs/app/components/navigation/index.jsx

@@ -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>