Navbar.js

import React, { Component } from "react";
import AppBar from "material-ui/AppBar";
import { Link } from "react-router-dom";
import FlatButton from "material-ui/FlatButton";
import UserStore from "../../stores/user_store";
import { Toolbar, ToolbarGroup } from "material-ui/Toolbar";
import history from "../../history";
import UserActions from "../../actions/user_actions";
import {
  Logo,
  NavbarContainer,
  MenuToggle,
  MobileBar,
  NavbarHeader,
  MenuLI,
  LinkA
} from "./navbarStyle";
import logo from "../../images/logo2.png";

class Navbar extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <NavbarContainer>
        <MenuToggle />
        <MobileBar>
          <label for="menu-toggle" class="menu-icon">
            <span />
          </label>
        </MobileBar>
        <NavbarHeader>
          <nav>
            <ul>
              <MenuLI>
                <LinkA href="#">Item 1</LinkA>
              </MenuLI>
              <MenuLI>
                <LinkA href="#">Item 2</LinkA>
              </MenuLI>
              <MenuLI>
                <LinkA href="#">Item 3</LinkA>
              </MenuLI>
              <MenuLI>
                <LinkA href="#">Item 4</LinkA>
              </MenuLI>
              <MenuLI>
                <LinkA href="#">Item 5</LinkA>
              </MenuLI>
            </ul>
          </nav>
        </NavbarHeader>
      </NavbarContainer>
    );
  }
}

export default Navbar;
This looks like a JavaScript file. Click this bar to format it.No 4

NavbarStyle.js

import styled from "styled-components";

export const Logo = styled.img`
  height: 50px;
  margin: 20px;
`;

export const NavbarContainer = styled.div`
  width: 100%;
  background: #067bc2;
  }
`;

export const MenuToggle = styled.input`
  display: none;
`;

export const MobileBar = styled.div`
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 25px;
  width: 100%;
  height: 60px;
  background-color: #067bc2;
`;

export const NavbarHeader = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 60px;
  width: 100%;
  background-color: #067bc2;
  overflow-y: scroll;
  text-align: center;
  color: #eee;
  -webkit-transition: opacity 300ms ease-in, visibility 0s ease-in 300ms;
  transition: opacity 300ms ease-in, visibility 0s ease-in 300ms;
`;

export const MenuLI = styled.li`
  display: inline-block;
  margin-right: 20px; 
  font-family: "Open Sans", sans-serif;
  font-size: 100%;
  color: #333;
  border: none;
`;

export const LinkA = styled.a`
  text-decoration: none;
  color: inherit;
  -webkit-transition: background-color 300ms ease-in;
  transition: background-color 300ms ease-in;
`;

export const MenuUL = styled.ul`
  list-style: none;
`;