Sidebar UI improvement.

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>
               );

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);
+}