From 4d0f4425eafbed021d4bb6eef3a5a93cae60035b Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Thu, 16 Jun 2022 15:21:57 +0430
Subject: [PATCH] Sidebar UI improvement.

---
 src/componets/SideBar.js | 9 +++++++--
 src/styles/SideBar.css   | 8 ++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/componets/SideBar.js b/src/componets/SideBar.js
index d563143..b91fb48 100644
--- a/src/componets/SideBar.js
+++ b/src/componets/SideBar.js
@@ -37,11 +37,16 @@ const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
             </Link>
           </MenuItem>
 
-          <SubMenu icon="#" defaultOpen={true} title="Tags">
+          <SubMenu
+            icon={<h2>#</h2>}
+            suffix={<span className="badge">{sortedTags.length}</span>}
+            defaultOpen={true}
+            title="Tags"
+          >
             {sortedTags.map((e, i) => {
               const path = `/tags/${e}`;
               return (
-                <MenuItem key={i}>
+                <MenuItem prefix={"#"} key={i}>
                   <Link to={path}>{e}</Link>
                 </MenuItem>
               );
diff --git a/src/styles/SideBar.css b/src/styles/SideBar.css
index 8b022fb..6bcb475 100644
--- a/src/styles/SideBar.css
+++ b/src/styles/SideBar.css
@@ -25,3 +25,11 @@
   text-shadow: none;
   color: white;
 }
+
+.badge {
+  padding: 3px 10px;
+  font-size: 0.8rem;
+  letter-spacing: 1px;
+  border-radius: 14px;
+  background-color: rgb(52, 121, 181);
+}