import React from 'react';
import { Link } from 'react-router';

export default React.createClass({
  render: function (){
    return (
      <div>
        <header className="mdl-layout__header mdl-layout__header--waterfall portfolio-header">
            <div className="mdl-layout__header-row portfolio-logo-row">
                <span className="mdl-layout__title">
                    <div className="portfolio-logo"></div>
                    <span className="mdl-layout__title">Gonzalo Barba López</span>
                </span>
            </div>
            <div className="mdl-layout__header-row portfolio-navigation-row mdl-layout--large-screen-only">
              <nav className="mdl-navigation mdl-typography--body-1-force-preferred-font">
                <Link className="mdl-navigation__link is-active" to="/">Portfolio</Link>
                <Link className="mdl-navigation__link" to="/blog">Blog</Link><br />
                <Link className="mdl-navigation__link" to="/timeline">TimeLine</Link><br />
                <Link className="mdl-navigation__link" to="/about">About</Link><br />
                <Link className="mdl-navigation__link" to="/contact">Contact</Link>
              </nav>
            </div>
        </header>
        <div className="mdl-layout__drawer mdl-layout--small-screen-only">
          <nav className="mdl-navigation mdl-typography--body-1-force-preferred-font">
            <Link className="mdl-navigation__link is-active" to="/">Portfolio</Link>
            <Link className="mdl-navigation__link" to="/blog">Blog</Link><br />
            <Link className="mdl-navigation__link" to="/timeline">TimeLine</Link><br />
            <Link className="mdl-navigation__link" to="/about">About</Link><br />
            <Link className="mdl-navigation__link" to="/contact">Contact</Link>
          </nav>
        </div>
      </div>
    )
  }
});
