added dropdown menu (without styling)

src/App.js

@@ -13,60 +13,70 @@ import Leaflet from './Leaflet';
 import Google from './Google';
 import Mapbox from './Mapbox';
 
+import Pigeons from './test/Pigeons';
+import Leaflets from './test/Leaflets';
+
 import {calcDistance} from './helpers/distance';
 import {longitude, latitude} from "./config/variables";
 
 
 export class App extends React.Component{
-    constructor(props) {
-        super(props)
+  constructor(props) {
+    super(props)
 
-        this.state = {
-            mapConfig: {
-                zoom: 15,
-                path: [],
-                coords: [latitude, longitude],
-                defaultZoom: 15,
-                distance: 0,
-            }
-        }
+    this.state = {
+      mapConfig: {
+        zoom: 15,
+        path: [],
+        coords: [latitude, longitude],
+        defaultZoom: 15,
+        distance: 0,
+      }
     }
+  }
 
-    updateMapState = (key, value) => {
-        let mapConfigCopy = JSON.parse(JSON.stringify(this.state.mapConfig));
-        mapConfigCopy[key] = value;
-        this.setState({mapConfig: mapConfigCopy})
-    }
+  updateMapState = (key, value) => {
+    let mapConfigCopy = JSON.parse(JSON.stringify(this.state.mapConfig));
+    mapConfigCopy[key] = value;
+    this.setState({mapConfig: mapConfigCopy})
+  }
 
-    getDistance = () => {
-        let dst = calcDistance(this.state.mapConfig.path)
-        this.updateMapState("distance", dst)
-    }
+  getDistance = () => {
+    let dst = calcDistance(this.state.mapConfig.path)
+    this.updateMapState("distance", dst)
+  }
 
-    render(){
-        return (
-          <div>
-              <Router>
-                <Navigation />
-                <Switch>
-                  <Route path="/" exact component={Home} />
-                  <Route path="/about" exact component={About} />
-                  <Route exact path="/pigeon-map" render={() =>
-                    <Pigeon
-                        mapConfig={this.state.mapConfig}
-                        updateMapState={this.updateMapState}
-                        getDistance={this.getDistance}
-                    />}
-                  />
-                  <Route path="/map-gl" exact component={MapGL} />
-                  <Route path="/leaflet" exact component={Leaflet} />
-                  <Route path="/google-map" exact component={Google} />
-                    <Route path="/mapbox" exact component={Mapbox} />
-                </Switch>
-                <Footer />
-              </Router>
-          </div>
-        )
-    }
+  render(){
+    return (
+      <div>
+        <Router>
+          <Navigation />
+          <Switch>
+            <Route path="/" exact component={Home} />
+            <Route path="/about" exact component={About} />
+            <Route exact path="/pigeon-map" render={() =>
+              <Pigeon
+              mapConfig={this.state.mapConfig}
+              updateMapState={this.updateMapState}
+              getDistance={this.getDistance}
+              />}
+            />
+            <Route path="/pigeon-map/test" exact component={Pigeons} />
+              
+            <Route path="/map-gl" exact component={MapGL} />
+              
+            <Route path="/leaflet" exact component={Leaflet} />
+            <Route path="/leaflet/test" exact component={Leaflets} />
+              
+            <Route path="/google-map" exact component={Google} />
+              
+            <Route path="/mapbox" exact component={Mapbox} />
+
+          </Switch>
+          <Footer />
+        </Router>
+      </div>
+    )
+  }
 
 }

src/NavDropdown.js

@@ -0,0 +1,38 @@
+import React from "react";
+import "bootstrap/dist/css/bootstrap.min.css";
+import { Link } from "react-router-dom";
+import {
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+  Button,
+  ButtonDropdown
+} from "reactstrap";
+
+export default class NavDropdown extends React.Component{
+  state = {
+    isOpen: false,
+  }
+
+  toggle = () => this.setState({isOpen: !this.state.isOpen});
+
+  render(){
+    return(
+      <ButtonDropdown isOpen={this.state.isOpen} toggle={this.toggle}>
+        <Button id="caret" color="secondary">
+          <Link className="nav-link" to={this.props.link.url}>{this.props.link.name}</Link>
+        </Button>
+        <DropdownToggle caret color="secondary" />
+        <DropdownMenu right>
+          <DropdownItem >
+            {this.props.link.sublinks.map((sublink, idx) => (
+              <Link className="nav-link" to={sublink.url} key={idx}>
+                {sublink.name}
+              </Link>
+            ))}
+          </DropdownItem>
+        </DropdownMenu>
+      </ButtonDropdown>
+    );
+  }
+}

src/Navigation.js

@@ -1,40 +1,32 @@
 import React from "react";
 import { Link, withRouter } from "react-router-dom";
+import NavDropdown from "./NavDropdown";
+import { links } from "./config/navLinks";
 
 class Navigation extends React.Component{
-    render(){
-        return (
-          <div className="navigation">
-            <nav className="navbar navbar-expand navbar-dark bg-dark">
-              <div className="container">
-                <Link className="navbar-brand" to="/">
-                  React Libraries
-                </Link>
-                <ul className="navbar-nav ml-auto">
-                  <li className={`nav-item  ${this.props.location.pathname === "/" ? "active" : ""}`}>
-                    <Link className="nav-link" to="/">Home</Link>
-                  </li>
-                  <li className={`nav-item  ${this.props.location.pathname === "/pigeon-map" ? "active" : ""}`}>
-                    <Link className="nav-link" to="/pigeon-map">Pigeon Map</Link>
-                  </li>
-                  <li className={`nav-item  ${this.props.location.pathname === "/map-gl" ? "active" : ""}`}>
-                    <Link className="nav-link" to="/map-gl">Map GL</Link>
-                  </li>
-                  <li className={`nav-item  ${this.props.location.pathname === "/leaflet" ? "active" : ""}`}>
-                    <Link className="nav-link" to="/leaflet">Leaflet Map</Link>
-                  </li>
-                  <li className={`nav-item  ${this.props.location.pathname === "/google-map" ? "active" : ""}`}>
-                    <Link className="nav-link" to="/google-map">Google Map</Link>
-                  </li>
-                    <li className={`nav-item  ${this.props.location.pathname === "/mapbox" ? "active" : ""}`}>
-                    <Link className="nav-link" to="/mapbox">Mapbox</Link>
-                  </li>
-                </ul>
-              </div>
-            </nav>
+  render(){
+    return (
+      <div className="navigation">
+        <nav className="navbar navbar-expand navbar-dark bg-dark">
+          <div className="container">
+
+            <Link className="navbar-brand" to="/">
+              React Libraries
+            </Link>
+
+            <ul className="navbar-nav ml-auto">
+              {links.map((link, idx) => (
+                <li key={idx}>
+                  <NavDropdown path={this.props.location.pathname} link={link} key={idx}/>
+                </li>
+              ))}
+            </ul>
+
           </div>
-        );
+        </nav>
+      </div>
+      );
     }
-}
+  }
 
 export default withRouter(Navigation);

src/config/navLinks.js

@@ -0,0 +1,40 @@
+  export const links = [
+    {
+      name: "Pigeon Map",
+      url: "/pigeon-map",
+      sublinks: [
+        {
+          name: "Pigeon Map Test",
+          url: "/pigeon-map/test"
+        }
+      ]
+    },
+    {
+      name: "Map GL",
+      url: "/map-gl",
+      sublinks: [
+      ]
+    },
+    {
+      name: "Leaflet Map",
+      url: "/leaflet",
+      sublinks: [
+        {
+          name: "Leaflet Map Test",
+          url: "/leaflet/test"
+        }
+      ]
+    },
+    {
+      name: "Google Map",
+      url: "/google-map",
+      sublinks: [
+      ]
+    },
+        {
+      name: "Mapbox",
+      url: "/mapbox",
+      sublinks: [
+      ]
+    },
+  ];