guzmonne

import React from 'react'

class App extends React.Component {
  render() {
    return (
      <h1>Hello, world!!!</h1>
    )
  }
}

guzmonne

import React, {PropTypes as T} from 'react'
import {Breadcrumb, IBreadcrumbItem} from 'office-ui-fabric-react/lib/Breadcrumb'
import {CommandBar} from 'office-ui-fabric-react/lib/CommandBar'
import {IContextualMenuItem} from 'office-ui-fabric-react/lib/ContextualMenu'
import {MarqueeSelection} from 'office-ui-fabric-react/lib/MarqueeSelection'
import {
  Selection,
  SelectionMode,
  SelectionZone,
} from 'office-ui-fabric-react/lib/utilities/selection'

guzmonne

import React from 'react'
import {Link} from 'office-ui-fabric-react/lib/Link'
import '../_styles/Footer.css'

const Footer = () => (
  <div className="footer-container">
    {'© Awesome App 2016. '}
    <Link href="https://github.com/guzmonne/office-ui-layout/tree/01-blank-project">Get in touch!</Link>
    {' -- Made with '}
    <span className="text-red">♥</span>

guzmonne

import React from 'react'
import {Link} from 'office-ui-fabric-react/lib/Link'
import '../_styles/Footer.css'

const Footer = () => (
  <div className="footer-container">
    {'© Awesome App 2016. '}
    <Link href="https://github.com/guzmonne/office-ui-layout/tree/01-blank-project">Get in touch!</Link>
    {' -- Made with '}
    <span className="text-red">♥</span>

guzmonne

.NavBar {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 0.5em ;
  color: white;
  background-color: #141127;
  justify-content: space-between;
}

guzmonne

import React, {PropTypes as T} from 'react'
import {SearchBox} from 'office-ui-fabric-react/lib/SearchBox'
import '../_styles/NavBar.css'

const NavBar = ({onChange, onSearch}) => (
  <div className="NavBar">
    <div className="logo ms-font-xl">
      <strong>Awesome App</strong>
    </div>
    <div className="searchbox">

guzmonne

import React, {PropTypes as T} from 'react'
import {Nav, INavLinkGroup} from 'office-ui-fabric-react/lib/Nav'

const SidebarMenu = ({groups, expanded, collapsed}) => (
  <div className='SidebarMenu'>
    <Nav groups={groups}
      expandedStateText={expanded}
      collapsedStateText={collapsed}
    />
  </div>

guzmonne

/* 
Set the main wrapper component to 
take up the entire height of the page
 */
.App {
  min-height: 100vh; 
}
/*
To use Flexbox we need to set the display
setting of the container component to flex.

guzmonne

.App {
  background-color: black;
}

.App .header {
  background-color: blue;
}

.App .body {
  background-color: red;

guzmonne

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <div className="header"></div>        
        <div className="body">
          <div className="content"></div>
          <div className="sidebar"></div>