React

HTML

<div id="app"></div>

CSS

/* http://fetching.io/
 *  ___
 * /\_ \
 * \//\ \      __      ___   __  __    ___     ___
 *   \ \ \   /'__`\  /' _ `\/\ \/\ \  / __`\ /' _ `\
 *    \_\ \_/\ \_\.\_/\ \/\ \ \ \_\ \/\ \_\ \/\ \/\ \
 *    /\____\ \__/.\_\ \_\ \_\/`____ \ \____/\ \_\ \_\
 *    \/____/\/__/\/_/\/_/\/_/`/___/> \/___/  \/_/\/_/
 *                               /\___/
 *                               \/__/
 *
 * Designed, built, and released under MIT license by @mdo. Learn more at
 * https://github.com/poole/lanyon
 */


/*
 * Contents
 *
 * Global resets
 * Masthead
 * Sidebar
 * Slide effect
 * Posts and pages
 * Pagination
 * Reverse layout
 * Themes
 */


/*
 * Global resets
 *
 * Update the foundational and global aspects of the page.
 */

/* Prevent scroll on narrow devices */
html,
body {
  overflow-x: hidden;
}

html {
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "PT Sans", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #313131;
  letter-spacing: -.025rem;
}


/*
 * Wrapper
 *
 * The wrapper is used to position site content when the sidebar is toggled. We
 * use an outter wrap to position the sidebar without interferring with the
 * regular page content.
 */

.wrap {
  position: relative;
}



/*
 * Sidebar
 *
 * The sidebar is the drawer, the item we are toggling with our handy hamburger
 * button in the corner of the page.
 *
 * This particular sidebar implementation was inspired by Chris Coyier's
 * "Offcanvas Menu with CSS Target" article, and the checkbox variation from the
 * comments by a reader. It modifies both implementations to continue using the
 * checkbox (no change in URL means no polluted browser history), but this uses
 * `position` for the menu to avoid some potential content reflow issues.
 *
 * Source: http://css-tricks.com/off-canvas-menu-with-css-target/#comment-207504
 */

/* Style and "hide" the sidebar */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  visibility: hidden;
 ...

React

class TodoApp extends React.Component {

  render() {
    return (
       <div className="page">

                <label htmlFor="sidebar-checkbox" className="sidebar-toggle"></label>
                <input type="checkbox" className="sidebar-checkbox" id="sidebar-checkbox"></input>


                <div className="sidebar" id="sidebar">

                    <div className="sidebar-item">
                        <p>Find the things you love but forgot to save.</p>
                    </div>

                    <nav className="sidebar-nav">
                        <a className="sidebar-nav-item" href="/">Home</a>
                        <a className="sidebar-nav-item" href="/get-started">Get Fetching</a>
                        <a className="sidebar-nav-item" href="http://app.fetching.io/sessions/new">Login</a>
                        <a className="sidebar-nav-item" href="/faq">FAQ</a>
                        <a className="sidebar-nav-item" href="/blog">Blog</a>
                        <a className="sidebar-nav-item" href="/about">About</a>
                        <a className="sidebar-nav-item" href="/privacy-policy">Privacy</a>
                        <a className="sidebar-nav-item" href="/privacy-policy" data-uv-trigger>Contact Us</a>
                    </nav>

                </div>

                <div className="wrap">
                    
                    <div className="topnav">
                        <a className="active" href="#home">Home</a>
                        <a href="#news">News</a>
                        <a href="#contact">Contact</a>
                        <a href="#about">About</a>
                    </div>
                    
                    page content page content page content page content 
                    <br></br>
                    page content page content page content page content 
                    <hr></hr>
                    page content page content page content page content 
                    <br></br>
   ...