react-navbar-test/components/Navbar/index.js

React Responsive Navbar Test Release

import React from "react";
import MediaQuery from "react-responsive";
import PropTypes from "prop-types";
import Hamburger from "../Hamburger/";

const classNames = require("classnames");

const Navbar = props => {
    // props.reponsiveWidth
    return (
        <MediaQuery maxWidth={767}>
            {matches => {
                if (matches) return <Hamburger>{props.children}</Hamburger>;
                return <Nav>{props.children}</Nav>;
            }}
        </MediaQuery>
    );
};

Navbar.propTypes = {
    responsiveWidth: PropTypes.number.isRequired
};

Navbar.defaultProps = {
    responsiveWidth: 767
};

const Nav = props => {
    const navClasses = classNames("navbar");
    return (
        <nav className={navClasses}>
            <ul>{props.children}</ul>
        </nav>
    );
};

export default Navbar;