From 032de89f08692f5dfd974385ad60eff85ec66bed Mon Sep 17 00:00:00 2001
From: overflowerror <mail@overflowerror.com>
Date: Thu, 28 Oct 2021 20:29:31 +0200
Subject: [PATCH] added styling for sidebar

---
 src/components/Sidebar/Sidebar.css | 20 ++++++++++++++++++++
 src/components/Sidebar/index.tsx   | 12 +++++++-----
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.css b/src/components/Sidebar/Sidebar.css
index 6393c3a..9d21943 100644
--- a/src/components/Sidebar/Sidebar.css
+++ b/src/components/Sidebar/Sidebar.css
@@ -3,4 +3,24 @@
     width: 300px;
     height: 100%;
     background-color: #4BD5F2;
+}
+
+.sidebar ul {
+    list-style: none;
+    padding: 0;
+}
+
+.sidebar li {
+    width: 100%;
+    cursor: pointer;
+    box-sizing: border-box;
+    padding: 10px;
+}
+
+.sidebar li:hover {
+    background-color: #0B95a2;
+}
+
+.selected {
+    background-color: #528AD9;
 }
\ No newline at end of file
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index f8aa7e5..d827f42 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -11,14 +11,16 @@ export type SidebarProps = {
 const Sidebar: FunctionComponent<SidebarProps> = ({countedTags, selected, onSelect}) => {
     return (
         <div className="sidebar">
+            <h2>Tags</h2>
             <ul>
                 {
                     countedTags.map(t => (
-                        <li key={t.name}>
-                            { selected.indexOf(t.name) >= 0 && "#" }
-                            <a onClick={() => onSelect(t.name)}>
-                                {t.name} ({t.count})
-                            </a>
+                        <li
+                            key={t.name}
+                            className={selected.indexOf(t.name) >= 0 ? "selected" : ""}
+                            onClick={() => onSelect(t.name)}
+                        >
+                            {t.name} ({t.count})
                         </li>
                     ))
                 }