React

by Andrei Gheorghiu

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: -0.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

const TodoApp = () => {
  const mediaQuery = window.matchMedia("(min-width: 42rem)");
  const [query, setQuery] = React.useState(mediaQuery);
  const [expanded, setExpanded] = React.useState(query.matches);

  React.useEffect(() => {
    mediaQuery.addListener(setQuery);
    return () => mediaQuery.removeListener(setQuery);
  }, [mediaQuery]);

  React.useEffect(() => {
    setExpanded(query.matches);
  }, [query]);

  return (
    <div>
      <label htmlFor="sidebar-checkbox" className="sidebar-toggle"></label>
      <input
        type="checkbox"
        className="sidebar-checkbox"
        id="sidebar-checkbox"
        checked={expanded}
        onChange={(e) => setExpanded(e.target.checked)}
      ></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...