import React from 'react'

import { BrowserRouter, Switch, Route } from 'react-router-dom'

import {FundDetails} from "../pages/fund_detail";
import {Dashboard} from "../pages/dashboard";
import {Main} from "../pages/main";


export class SiteRouter extends React.Component {
  render(){
    return (
        <BrowserRouter>
          <Switch>
            <Route component={Main}/>
            <Route path="/fund_details"          component={FundDetails}      />
            <Route path="/dashboard"          component={Dashboard}      />
          </Switch>
        </BrowserRouter>
    );
  }
}

import React from 'react';

import { NavItem, Nav, Navbar } from 'react-bootstrap';

import styled from 'styled-components';

import Particles from 'react-particles-js';
import params from './../../components/particlesjs-config.json';
import {PurposeLogo} from "../media/PurposeLogo";


import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const StyledNavbar = styled(Navbar)`

  background-image: linear-gradient(90deg, #320734 0%, #B71F71 100%);
  min-height: 100px;
}
`


export class PurposeNav extends React.Component {
  render(){
    return(
        <StyledNavbar inverse collapseOnSelect fixedTop>
          <Particles
              height={100}
              params={params}
              style={{
                position: "fixed",
                top: 0,
                marginLeft: 700,
                width: "100%",
                height: "100%"
              }} />
          <Navbar.Header>
            <Navbar.Brand>
              <PurposeLogo />
            </Navbar.Brand>
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav pullRight>
              <NavItem><Link to='fund_details'>Fund Details</Link></NavItem>
              <NavItem eventKey={2} href="#">Link Right</NavItem>
            </Nav>
          </Navbar.Collapse>
        </StyledNavbar>
    );
  }
}