Skip to content

Instantly share code, notes, and snippets.

@hikoz

hikoz/layout.js

Created March 3, 2017 05:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hikoz/02e1e86763717e5b2cd912d7b21bee67 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hikoz/02e1e86763717e5b2cd912d7b21bee67 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. hikoz created this gist Mar 3, 2017.
    43 changes: 43 additions & 0 deletions layout.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    import { h, Component } from 'preact';
    import { Router, Link } from 'preact-router';

    function Header({url}) {
    const NavItem = ({href, children}, state) => (
    <li className={href==url ? 'is-active' : ''}><Link href={href}>{children}</Link></li>
    )
    return (
    <section class="hero is-primary">
    <div class="hero-foot">
    <div class="container">
    <nav class="tabs is-boxed">
    <ul>
    <NavItem href="/">Home</NavItem>
    <NavItem href="/blog">Blog</NavItem>
    <NavItem href="/404">404</NavItem>
    </ul>
    </nav>
    </div>
    </div>
    </section>
    )
    }
    class Layout extends Component {
    render(props, state) {
    const routeChange = ({url}) => this.setState({url})
    return (
    <div>
    <Header url={state.url} className="nav"/>
    <main className="section">
    <Router onChange={routeChange}>
    <Home path="/"/>
    <Blog path="/blog"/>
    <Article path="/blog/:title"/>
    <E404 default/>
    </Router>
    </main>
    </div>
    )
    }
    }

    export default <Layout/>