Added tags to sidebar.

.github/FUNDING.yml

@@ -10,4 +10,4 @@ liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
 lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
-custom: https://www.paypal.me/Daniel31X13
+custom: ['PayPal.Me/Daniel31X13']

README.md

@@ -7,7 +7,9 @@ LinkWarden
 
 <img src="assets/LinkWarden.png" alt="LinkWarden.png" width="500px"/>
 
-![GitHub](https://img.shields.io/github/license/daniel31x13/link-warden?style=flat-square) ![GitHub top language](https://img.shields.io/github/languages/top/daniel31x13/link-warden?style=flat-square) ![GitHub commit activity](https://img.shields.io/github/commit-activity/m/daniel31x13/link-warden?style=flat-square) ![GitHub last commit](https://img.shields.io/github/last-commit/daniel31x13/link-warden?style=flat-square) ![Netlify](https://img.shields.io/netlify/31890116-669c-4b1c-844e-fa427503d8bf?style=flat-square)
+![Twitter Follow](https://img.shields.io/twitter/follow/Daniel31X13?style=social)
+
+![GitHub](https://img.shields.io/github/license/daniel31x13/link-warden?style=flat-square) ![GitHub top language](https://img.shields.io/github/languages/top/daniel31x13/link-warden?style=flat-square) ![GitHub commit activity](https://img.shields.io/github/commit-activity/m/daniel31x13/link-warden?style=flat-square) ![GitHub last commit](https://img.shields.io/github/last-commit/daniel31x13/link-warden?style=flat-square) ![Netlify](https://img.shields.io/netlify/31890116-669c-4b1c-844e-fa427503d8bf?style=flat-square) ![GitHub Repo stars](https://img.shields.io/github/stars/daniel31x13/link-warden?style=flat-square)
 
 </h1>
 

src/App.js

@@ -68,6 +68,7 @@ function App() {
   }
 
   const filteredData = filter(data, searchQuery, nameChecked, tagsChecked, descriptionChecked);
+
   const tags = concatTags(data);
 
   async function fetchData() {
@@ -107,7 +108,7 @@ function App() {
   
   return (
     <div className="App">
-      <SideBar handleToggleSidebar={handleToggleSidebar} toggle={toggle} />
+      <SideBar tags={tags} handleToggleSidebar={handleToggleSidebar} toggle={toggle} />
       <div className='content'>
         <div className="head">
           <button className='sidebar-btn btn' style={{marginRight: '10px'}} onClick={handleToggleSidebar}>&#xf0c9;</button>

src/componets/SideBar.js

@@ -1,9 +1,8 @@
 import { ProSidebar, SidebarHeader, SidebarFooter, SidebarContent } from 'react-pro-sidebar';
 import 'react-pro-sidebar/dist/css/styles.css';
 import '../styles/SideBar.css';
-import { useState } from 'react';
 
-const SideBar = ({ handleToggleSidebar, toggle }) => {
+const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
   return (
     <ProSidebar 
         toggled={toggle}
@@ -11,13 +10,17 @@ const SideBar = ({ handleToggleSidebar, toggle }) => {
         onToggle={handleToggleSidebar}
         className='sidebar'>
     <SidebarHeader>
-        LOGO
+        <h1>LinkWarden</h1>
     </SidebarHeader>
-    <SidebarContent>
+    <SidebarContent className='sidebar-content'>
-        CONTENT
+
+        <h3>Tags:</h3>
+        {tags.map((e) => {
+            return <p>{e}</p>
+        })}
     </SidebarContent>
     <SidebarFooter>
-        FOOTER
+        <p className='credits'>©{new Date().getFullYear()} Made with 💙 by <a href='https://github.com/Daniel31x13'>Daniel 31X13</a></p>
     </SidebarFooter>
     </ProSidebar>
   )

src/styles/SideBar.css

@@ -1,4 +1,32 @@
 .sidebar {
     height: 100vh;
     position: fixed;
+    border-right: solid;
+    border-width: 1px;
+    border-color: gray;
+}
+
+.sidebar-content {
+    padding: 20px;
+}
+
+.sidebar h1 {
+    text-align: center;
+}
+
+.credits {
+    text-align: center;
+    font-size: small;
+}
+
+.credits a {
+    color: inherit;
+    text-decoration: underline;
+}
+
+
+.pro-sidebar-layout {
+    background: #384952;
+    text-shadow: none;
+    color: white;
 }

src/styles/index.css

@@ -12,7 +12,7 @@ body {
 }
 
 *::selection {
-  background-color: rgba(78, 78, 78, 0.9);
+  background-color: black;
   color: white;
   text-shadow: none;
 }