WIP Frontend development.

client/src/components/Dashboard/Dashboard.js

@@ -1,15 +1,12 @@
 import React from 'react';
-import {Route} from 'react-router-dom';
 import Sidebar from 'components/Sidebar/Sidebar';
 import DashboardContent from 'components/Dashboard/DashboardContent';
 
 export default function() {
   return ( 
     <div className="dashboard" id="dashboard">
-      <Route pathname="/dashboard/">
-        <Sidebar />
-        <DashboardContent />
-      </Route>
+      <Sidebar />
+      <DashboardContent />
     </div>
   )
 }

client/src/components/Dashboard/DashboardActionsBar.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+
+export default function DashboardActionsBar() {
+  return (
+    <div class="dashboard__actions-bar">
+      
+    </div>
+  )
+}

client/src/components/Dashboard/DashboardContent.js

@@ -1,11 +1,25 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import dashboardRoutes from 'routes/dashboard'
+import DashboardTopbar from 'components/Dashboard/DashboardTopbar';
 
 export default function() {
   return (
     <div className="dashboard-content" id="dashboard">
-      <h2>dashboard</h2>
+      <DashboardTopbar pageTitle={"asdad"}/>
+      
+      <Route pathname="/dashboard/">
+        <Switch>
+          { dashboardRoutes.map((route, index) => (
+            <Route
+              key={index}
+              path={route.path}
+              exact={route.exact}
+              component={route.component}
+            />          
+          ))}
+        </Switch>
+      </Route>
     </div>
   )
 }

client/src/components/Dashboard/DashboardPageContent.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function DashboardPageContent({ children }) {
+  return (
+    <div class="dashboard__page-content">
+      { children }
+    </div>
+  )
+}

client/src/components/Dashboard/DashboardTopbar.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  Navbar,
+  NavbarGroup,
+  Button,
+  Classes,
+  MenuDivider,
+  MenuItem,
+  Menu,
+  Popover,
+} from '@blueprintjs/core';
+
+export default function DashboardTopbar({ pageTitle }) {
+  const userAvatarDropMenu = (
+    <Menu>
+      <MenuItem icon="graph" text="Graph" />
+      <MenuItem icon="map" text="Map" />
+      <MenuItem icon="th" text="Table" shouldDismissPopover={false} />
+      <MenuItem icon="zoom-to-fit" text="Nucleus" disabled={true} />
+      <MenuDivider />
+      <MenuItem icon="cog" text="Logout" />
+    </Menu>
+  );
+  return (
+    <div class="dashboard__topbar">
+      <h1 class="dashboard__title">{ pageTitle }</h1>
+      
+      <div class="dashboard__topbar-actions">
+        <Navbar class="dashboard__topbar-navbar">
+          <NavbarGroup>
+            <Button className={Classes.MINIMAL} icon="home" text="Home" />
+            <Button className={Classes.MINIMAL} icon="document" text="Files" />
+          </NavbarGroup>
+        </Navbar>
+
+        <div class="dashboard__user">
+          <Popover content={userAvatarDropMenu}>
+            <Button>
+              <div className="user-avatar"></div>
+            </Button>
+          </Popover>
+        </div>
+      </div>
+    </div>
+  );
+}