WIP

client/src/components/Preferences/PreferencesContent.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import PreferencesTopbar from 'components/Preferences/PreferencesTopbar';
+import PreferencesContentRoute from 'components/Preferences/PreferencesContentRoute';
+
+export default function() {
+  return (
+    <div className="dashboard-content" id="dashboard">
+      <PreferencesTopbar pageTitle={"asdad"}/>
+      
+      <div class="dashboard__preferences-content">
+        <PreferencesContentRoute />
+      </div>
+    </div>
+  )
+}

client/src/components/Preferences/PreferencesContentRoute.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Route, Switch, useRouteMatch } from 'react-router-dom';
+import preferencesRoutes from 'routes/preferences'
+
+export default function DashboardContentRoute() {
+  const { path } = useRouteMatch();
+
+  return (
+    <Route pathname="/dashboard/preferences">
+      <Switch>
+        { preferencesRoutes.map((route, index) => (
+          <Route
+            key={index}
+            path={`${path}/${route.path}`}
+            exact={route.exact}
+            component={route.component}
+          />          
+        ))}
+      </Switch>
+    </Route>
+  );
+}

client/src/components/Preferences/PreferencesPage.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
+
+export default function PreferencesPage() {
+  return (
+    <div class="preferences-page">
+      <PreferencesSidebar />
+    </div>
+  )
+}

client/src/components/Preferences/PreferencesSidebar.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import {Menu, MenuItem, MenuDivider} from '@blueprintjs/core';
+import {useHistory} from 'react-router-dom';
+import preferencesMenu from 'config/preferencesMenu';
+
+export default function PreferencesSidebar() {
+  const history = useHistory();
+  
+  const items = preferencesMenu.map((item) => (
+    (item.divider) ?
+      <MenuDivider title={item.title} /> : 
+      <MenuItem
+        text={item.text}
+        label={item.label}
+        disabled={item.disabled}
+        onClick={() => { history.push(item.href); }} />
+  ));
+
+  return (
+    <div class="preferences__sidebar">
+      <div class="preferences__sidebar-head">
+        <h2>Preferences</h2>
+      </div>
+
+      <Menu className="preferences__sidebar-menu">
+        { items }
+      </Menu>
+    </div>
+  );
+}

client/src/components/Preferences/PreferencesSubContent.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import preferencesTabs from 'routes/preferencesTabs';
+import {Switch, Route, useRouteMatch} from 'react-router-dom';
+
+export default function PreferencesSubContent({ preferenceTab }) {
+  const routes = preferencesTabs[preferenceTab];
+  const {path} = useRouteMatch();
+
+  if (routes.length <= 0) { return null; }
+
+  return (
+    <Switch>
+      { routes.map((route, index) => (
+        <Route
+          key={index}
+          path={`${path}/${route.path}`}
+          exact={route.exact}
+          component={route.component}
+        />          
+      ))}
+    </Switch>);
+}

client/src/components/Preferences/PreferencesTopbar.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
+
+export default function PreferencesTopbar() {
+  return (
+    <div class="dashboard__preferences-topbar">
+      <h2>Accounts</h2>
+
+      <div class="dashboard__topbar-user">
+        <DashboardTopbarUser />
+      </div>
+    </div>
+  );
+}