Add a simple navigation bar

app/helpers/application_helper.rb

@@ -1,2 +1,21 @@
 module ApplicationHelper
+  def left_nav_bar_items
+    [
+      {path: pokemon_index_path, text: "Pokemon"}
+    ]
+  end
+
+  def right_nav_bar_items
+    if user_signed_in?
+      [
+        {path: edit_registration_path(current_user), text: "Edit"},
+        {path: destroy_user_session_path(current_user), text: "Sign Out"}
+      ]
+    else
+      [
+        {path: new_user_session_path, text: "Sign In"},
+        {path: new_user_registration_path, text: "Sign Up"},
+      ]
+    end
+  end
 end

app/javascript/packs/react-app/components/misc/nav_bar.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {Menu, Image} from 'semantic-ui-react';
+
+class NavBar extends React.Component {
+  render() {
+    const {left_items, right_items} = this.props;
+
+    return (
+      <Menu fixed="top" inverted>
+        {left_items.map((item, i) => {
+          return (
+            <Menu.Item
+              key={i}
+              href={item.path}
+              content={item.text}
+              method={item.method}
+            />
+          );
+        })}
+        <Menu.Menu position="right">
+          {right_items.map((item, i) => {
+            return (
+              <Menu.Item
+                key={i}
+                href={item.path}
+                content={item.text}
+                method={item.method}
+              />
+            );
+          })}
+        </Menu.Menu>
+      </Menu>
+    );
+  }
+}
+
+export default NavBar;

app/javascript/packs/react-bundle.js

@@ -1,8 +1,10 @@
 import ReactOnRails from 'react-on-rails';
 import TestComponent from './react-app/components/test_component';
 import FlashAlerts from './react-app/components/misc/flash_alerts';
+import NavBar from './react-app/components/misc/nav_bar';
 
 ReactOnRails.register({
   TestComponent,
   FlashAlerts,
+  NavBar,
 });

app/views/application/_nav_bar.html.haml

@@ -0,0 +1 @@
+= react_component("NavBar", props: {left_items: left_nav_bar_items, right_items: right_nav_bar_items}, prerender: true)

app/views/application/_semantic_flash.html.haml

@@ -1 +1 @@
-= react_component("FlashAlerts", props: {alerts: flash.map { |k,v| {klass: k, message: v} }})
+= react_component("FlashAlerts", props: {alerts: flash.map { |k,v| {klass: k, message: v} }}, prerender: true)

app/views/layouts/application.html.haml

@@ -10,6 +10,8 @@
 
     = javascript_pack_tag 'react-bundle'
     -#= stylesheet_pack_tag 'react-app/assets/stylesheets/app'
+    = render "nav_bar"
   %body
     = render "semantic_flash"
-    = yield
+    %content
+      = yield