From e29d2ef9bafe9b8b96b2dbe292fe66c491e86af0 Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Mon, 12 Oct 2020 11:40:09 -0700
Subject: [PATCH] Sidebar style

---
 src/client/components/sidebar.tsx | 10 ++++++++--
 src/static/main.css               | 10 ++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/client/components/sidebar.tsx b/src/client/components/sidebar.tsx
index a22db4ac8..1e004f29d 100644
--- a/src/client/components/sidebar.tsx
+++ b/src/client/components/sidebar.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import { Board } from "../board"
 import { WorkspaceTree } from "../workspaceTree"
 
 type Props = {
@@ -14,15 +15,20 @@ class Sidebar extends React.Component<Props> {
 		return (
 			<div className="octo-sidebar">
 				{ boards.map(board => {
+					const displayTitle = board.title || "(Untitled Board)"
 					return (
-						<div>
-							{board.title || "(Untitled Board)"}
+						<div className="octo-sidebar-item" onClick={() => { this.boardClicked(board) }}>
+							{board.icon ? `${board.icon} ${displayTitle}` : displayTitle}
 						</div>
 					)
 				})}
 			</div>
 		)
 	}
+
+	private boardClicked(board: Board) {
+		// TODO
+	}
 }
 
 export { Sidebar }
diff --git a/src/static/main.css b/src/static/main.css
index f6d35a7ad..2b368f45b 100644
--- a/src/static/main.css
+++ b/src/static/main.css
@@ -71,13 +71,19 @@ hr {
 	display: flex;
 	flex-direction: column;
 
-	padding: 20px;
 	background-color: rgb(247, 246, 243);
 	min-width: 230px;
+	padding: 20px 0;
 }
 
-.octo-sidebar div {
+.octo-sidebar-item {
 	font-weight: 500;
+	cursor: pointer;
+	padding: 3px 20px;
+}
+
+.octo-sidebar-item:hover {
+	background-color: rgba(0, 0, 0, 0.05);
 }
 
 /* OCTO */