Simple nav using Fontawesome icons, React Router Dom, and Material-ui!

react navigation

Install

npm install --save rhea-nav

Usage

import React, { Component } from "react";
import { NavBar, Canvas, AppWrapper, TopBar } from "rhea-nav";
import { BrowserRouter as Router } from "react-router-dom";
import Routes from "./routes";
import navigation from "./navigation";

class App extends Component {
  render() {
    return (
      <Router>
        <AppWrapper>
          <TopBar />
          <NavBar navigation={navigation} />
          <Canvas>
            <Routes />
          </Canvas>
        </AppWrapper>
      </Router>
    );
  }
}

export default App;

NavBar

The NavBar is a component that accepts a navigation prop, create a navigation.js file and describe your nav.

import {
  faAddressBook,
  faChevronRight,
  faJedi,
  faBookDead,
  faLayerGroup,
  faHome,
  faIgloo
} from "@fortawesome/free-solid-svg-icons";
import logo from "./logo.svg";

const navigation = {
  logo: { icon: logo, to: "/" },
  nav: [
    { title: "Home", icon: faHome, to: "/home" },
    { title: "Address Book", icon: faAddressBook, to: "/address-book" },
    { title: "Jedi", icon: faJedi, to: "/jedi" },
    { title: "Dead Book", icon: faBookDead, to: "/dead-book" },
    { title: "Layer Group", icon: faLayerGroup, to: "/layer-group" }
  ],
  buttonIcon: faChevronRight
};

export default navigation;

Canvas

Canvas is a component that wraps your routes, I would suggest creating a Route functional component that imports all app containers and routes them.

import React from "react";
import { Switch, Route } from "react-router-dom";
import Home from "./components/Home/Home";
import AddressBook from "./components/AddressBook/AddressBook";
import Jedi from "./components/Jedi/Jedi";
import DeadBook from "./components/DeadBook/DeadBook";
import LayerGroup from "./components/LayerGroup/LayerGroup";

const Routes = () => (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route exact path="/home" component={Home} />
    <Route exact path="/address-book" component={AddressBook} />
    <Route exact path="/jedi" component={Jedi} />
    <Route exact path="/dead-book" component={DeadBook} />
    <Route exact path="/layer-group" component={LayerGroup} />
  </Switch>
);

export default Routes;

TopBar

In case you need a top bar.

License

MIT © RobLMartin