2 files changed, 33 insertions, 8 deletions
diff --git a/src/client/views/DashboardView.scss b/src/client/views/DashboardView.scss
index 1896d7bfb..67587dd2b 100644
--- a/src/client/views/DashboardView.scss
+++ b/src/client/views/DashboardView.scss
@@ -17,7 +17,16 @@
       }
 }
 
+.text-button {
+      padding: 10px 0;
+      &:hover {
+            font-weight: 500;
+      }
 
+      &.selected {
+            font-weight: 700;
+      }
+}
 
 .dashboard-container {
       border-radius: 10px;
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index b08151c0f..e4e7e2dae 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -1,4 +1,4 @@
-import { observable } from "mobx";
+import { action, observable } from "mobx";
 import { extname } from 'path';
 import { observer } from "mobx-react";
 import * as React from 'react';
@@ -9,11 +9,23 @@ import { CurrentUserUtils } from "../util/CurrentUserUtils";
 import { UndoManager } from "../util/UndoManager";
 import "./DashboardView.scss"
 
+enum DashboardGroup {
+      MyDashboards, SharedDashboards
+}
+
 @observer
 export class DashboardView extends React.Component {
 
       //TODO: delete dashboard, share dashboard, etc.
 
+      @observable
+      private selectedDashboardGroup = DashboardGroup.MyDashboards;
+
+      @action
+      selectDashboardGroup = (group: DashboardGroup) => {
+            this.selectedDashboardGroup = group
+      }
+
       newDashboard = async () => {
             const batch = UndoManager.StartBatch("new dash");
             await CurrentUserUtils.createNewDashboard(Doc.UserDoc());
@@ -27,15 +39,22 @@ export class DashboardView extends React.Component {
             }
       }
 
+      getDashboards = () => {
+            const allDashbaords = DocListCast(CurrentUserUtils.MyDashboards.data);
+            // TODO: filter the dashboards
+            // return allDashbaords.filter(...)
+            return allDashbaords
+      }
+
       render() {
-            const myDashboards = DocListCast(CurrentUserUtils.MyDashboards.data);
             return <div className="dashboard-view">
                   <div className="left-menu">
-                        <div onClick={this.newDashboard}>New</div>
-                        <div>All Dashboards</div>
+                        <div className="text-button" onClick={this.newDashboard}>New</div>
+                        <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.MyDashboards && 'selected'}`}onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards) }>My Dashboards</div>
+                        <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.SharedDashboards && 'selected'}`} onClick={() => this.selectDashboardGroup(DashboardGroup.SharedDashboards) }>Shared Dashboards</div>
                   </div>
                   <div className="all-dashboards">
-                        {myDashboards.map((dashboard) => {
+                        {this.getDashboards().map((dashboard) => {
                               const url = ImageCast((dashboard.thumb as Doc)?.data)?.url;
                               const ext = url ? extname(url.href):"";
                               const href = url?.href.replace(ext, "_m"+ ext); // need to choose which resolution image to show.  options are _s, _m, _l, _o   (small/medium/large/original)
@@ -45,9 +64,6 @@ export class DashboardView extends React.Component {
                               </div>
 
                         })}
-                        {myDashboards.map((dashboard) => {
-                              console.log(dashboard.thumb)
-                        })}
 
                   </div>
             </div>