Sidebar style

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 }

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 */