portal nav bar

src/components/example/Base.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Interactive from 'react-interactive';
+import { Link } from 'react-router';
+import s from '../../styles/app.style';
+
+const propTypes = {
+  children: PropTypes.element.isRequired,
+  routes: PropTypes.array.isRequired,
+};
+
+function ExampleBase({ children, routes }) {
+
+  function generateMapMenu() {
+    let path = '';
+
+    function nextPath(route) {
+      path += (
+        (path.slice(-1) === '/' ? '' : '/') +
+        (route.path === '/' ? '' : route.path)
+      );
+      return path;
+    }
+
+    return (
+      routes.filter(route => route.mapMenuTitle)
+      .map((route, index, array) => (
+        <span key={index}>
+            <Interactive
+              as={Link}
+              {...s.link}
+              to={nextPath(route)}
+            >{route.mapMenuTitle}</Interactive>
+            {(index + 1) < array.length && ' / '}
+          </span>
+      ))
+    );
+  }
+
+  return (
+    <div className="example">
+      <nav style={s.mapMenu}>
+        {generateMapMenu()}
+      </nav>
+      {children}
+    </div>
+  );
+}
+
+ExampleBase.propTypes = propTypes;
+
+export default ExampleBase;

src/components/index.js

@@ -3,36 +3,37 @@ import { render } from 'react-dom';
 import { Router, Route, IndexRoute, browserHistory } from 'react-router';
 
 /* Common Components */
-import App from './components/Base';
+import App from './Base';
-import PageNotFound from './components/PageNotFound';
+import PageNotFound from './PageNotFound';
-import UnderConstruction from './components/UnderConstruction';
+import UnderConstruction from './UnderConstruction';
 
 /* Home Component */
-import Home from './components/Home';
+import Home from './Home';
-import EnterTheCode from './components/account/EnterTheCode';
+import EnterTheCode from './account/EnterTheCode';
 
 /* Test Components */
-import ExampleHome from './components/example/Home';
+import ExampleHome from './example/Home';
-import ExampleComponent from './components/example/ExampleComponent';
+import ExampleBase from './example/Base';
-import ExampleTwoDeepComponent from './components/example/ExampleTwoDeepComponent';
+import ExampleComponent from './example/ExampleComponent';
+import ExampleTwoDeepComponent from './example/ExampleTwoDeepComponent';
 
 /* Collection */
-import CollectionHome from './components/collection/Home';
+import CollectionHome from './collection/Home';
 
 /* Portal */
-import PortalBase from './components/portal/Base';
+import PortalBase from './portal/Base';
-import PortalHome from './components/portal/Home';
+import PortalHome from './portal/Home';
-import Attacks from './components/portal/Category/Attacks';
+import Attacks from './portal/Category/Attacks';
-import SingleAttack from './components/portal/Single/Attack';
+import SingleAttack from './portal/Single/Attack';
-import Battlegear from './components/portal/Category/Battlegear';
+import Battlegear from './portal/Category/Battlegear';
-import SingleBattlegear from './components/portal/Single/Battlegear';
+import SingleBattlegear from './portal/Single/Battlegear';
-import Creatures from './components/portal/Category/Creatures';
+import Creatures from './portal/Category/Creatures';
-import SingleCreature from './components/portal/Single/Creature';
+import SingleCreature from './portal/Single/Creature';
-import Locations from './components/portal/Category/Locations';
+import Locations from './portal/Category/Locations';
-import SingleLocation from './components/portal/Single/Location';
+import SingleLocation from './portal/Single/Location';
-import Mugic from './components/portal/Category/Mugic';
+import Mugic from './portal/Category/Mugic';
-import SingleMugic from './components/portal/Single/Mugic';
+import SingleMugic from './portal/Single/Mugic';
-import Tribes from './components/portal/Category/Tribes';
+import Tribes from './portal/Category/Tribes';
 
 
 const routes = (
@@ -40,7 +41,8 @@ const routes = (
     <IndexRoute component={Home} />
 
     {/* Test */}
-    <Route path="example" mapMenuTitle="Example" component={ExampleComponent}>
+    <Route path="example" mapMenuTitle="Example" component={ExampleBase}>
+      <IndexRoute component={ExampleComponent} />
       <Route path="two-deep" mapMenuTitle="Two Deep" component={ExampleTwoDeepComponent} />
     </Route>
 
@@ -59,7 +61,6 @@ const routes = (
     {/* Portal */}
     <Route path="portal" component={PortalBase} mapMenuTitle="Portal">
       <IndexRoute component={PortalHome} />
-      <Route path="/" component={PortalHome} />
 
       {/* Attacks */}
       <Route path="Attacks" component={Attacks} mapMenuTitle="Attacks">

src/components/portal/Base.js

@@ -1,53 +1,55 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Interactive from 'react-interactive';
-import { Link } from 'react-router';
 import s from '../../styles/app.style';
+import Interactive from 'react-interactive';
+import {observable} from "mobx";
+import {observer, inject} from 'mobx-react';
+import { Link } from 'react-router';
 
-const propTypes = {
+@inject((stores, props, context) => props) @observer
-  children: PropTypes.element.isRequired,
+export default class PortalBase extends React.Component {
-  routes: PropTypes.array.isRequired,
-};
-
-function PortalBase({ children, routes }) {
-
-  function generateMapMenu() {
-    let path = '';
-
-    function nextPath(route) {
-      path += (
-        (path.slice(-1) === '/' ? '' : '/') +
-        (route.path === '/' ? '' : route.path)
-      );
-      return path;
-    }
 
+  render() {
     return (
-      routes.filter(route => route.mapMenuTitle)
+      <div className="portal">
-      .map((route, index, array) => (
+        <link rel="stylesheet" href="/src/css/portal.css" />
-        <span key={index}>
+        <Header />
-            <Interactive
+        <br />
-              as={Link}
+        {this.props.children}
-              {...s.link}
+      </div>
-              to={nextPath(route)}
-            >{route.mapMenuTitle}</Interactive>
-            {(index + 1) < array.length && ' / '}
-          </span>
-      ))
     );
   }
+}
+
+function Header(props) {
+  const tribes = ["Danian", "Mipedian", "OverWorld", "UnderWorld"].map((tribe, i) => {
+    return (
+      <li key={i} className="dropdown">
+        <Link to={"/portal/"+tribe} className="dropbtn">{tribe}</Link>
+        <div className="dropdown-content">
+          <Link to={"/portal/"+tribe+"/Creatures"}> Creatures</Link>
+          <Link to={"/portal/"+tribe+"/Mugic"}> Mugic</Link>
+        </div>
+      </li>
+    );
+  });
 
   return (
-    <div className="portal">
+    <div className="navbar">
-      <link rel="stylesheet" href="/src/css/portal.css" />
+      <ul>
-      <nav style={s.mapMenu}>
+        <li><Link to="/portal/">Home</Link></li>
-        {generateMapMenu()}
+        <li className="dropdown">
-      </nav>
+          <Link to="javascript:void(0)" className="dropbtn">Types</Link>
-      {children}
+          <div className="dropdown-content">
+            <Link to="/portal/Attacks">Attacks</Link>
+            <Link to="/portal/Battlegear">Battlegear</Link>
+            <Link to="/portal/Creatures">Creatures</Link>
+            <Link to="/portal/Mugic">Mugic</Link>
+            <Link to="/portal/Locations">Locations</Link>
+          </div>
+        </li>
+        {tribes}
+      </ul>
     </div>
   );
 }
-
-PortalBase.propTypes = propTypes;
-
-export default PortalBase;

src/components/portal/Single/Creature.js

@@ -116,16 +116,6 @@ export default class SingleCreature extends React.Component {
           {creature.gsx$weight}
         </div>
         <hr />
-        <div>
-          <strong>Special Abilities:</strong><br />
-          {creature.gsx$specialabilities}
-        </div>
-        <hr />
-        <div>
-          <strong>Weight (lb):</strong><br />
-          {creature.gsx$weight}
-        </div>
-        <hr />
         <div>
           <strong>Card ID: </strong>
           {card_data.gsx$id}

src/css/portal.css

@@ -23,6 +23,60 @@
     display: block;
 }
 
-h1 {
+.navbar h1 {
     font-size: 16px;
 }
+
+.navbar ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+}
+
+.navbar li {
+    float: left;
+}
+
+.navbar li a, .dropbtn {
+    display: inline-block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+.navbar li a:hover, .dropdown:hover .dropbtn {
+    background-color: red;
+}
+
+.navbar li.dropdown {
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    /*background-color: #f9f9f9;*/
+    background-color: inherit;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);
+    z-index: 1;
+}
+
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+}
+
+.dropdown-content a:hover {
+    background-color: #f1f1f1
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}

webpack.config.babel.js

@@ -2,7 +2,7 @@ import webpack from 'webpack';
 import path from 'path';
 
 export default {
-  entry: `${__dirname}/src/index.js`,
+  entry: `${__dirname}/src/components/index.js`,
   output: {
     path: `${__dirname}/build`,
     publicPath: '/build/',