From 51b214200f92f66b325c190df4248273d7f0e757 Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Tue, 14 Jun 2022 23:16:33 +0430
Subject: [PATCH] Added tags to sidebar.

---
 .github/FUNDING.yml      |  2 +-
 README.md                |  6 ++++--
 src/App.js               |  3 ++-
 src/componets/SideBar.js | 15 +++++++++------
 src/styles/SideBar.css   | 28 ++++++++++++++++++++++++++++
 src/styles/index.css     |  2 +-
 6 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
index 0800638..b0a1772 100644
--- a/.github/FUNDING.yml
+++ b/.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']
diff --git a/README.md b/README.md
index e181766..7c6a470 100644
--- a/README.md
+++ b/README.md
@@ -6,8 +6,10 @@ 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>
 
diff --git a/src/App.js b/src/App.js
index 10938ff..c32ceb4 100644
--- a/src/App.js
+++ b/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>
diff --git a/src/componets/SideBar.js b/src/componets/SideBar.js
index 8d341c7..f0b301a 100644
--- a/src/componets/SideBar.js
+++ b/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>
-        CONTENT
+    <SidebarContent className='sidebar-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>
   )
diff --git a/src/styles/SideBar.css b/src/styles/SideBar.css
index 755281a..2204c4f 100644
--- a/src/styles/SideBar.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/styles/index.css b/src/styles/index.css
index 38e9bc5..5f4bd02 100644
--- a/src/styles/index.css
+++ b/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;
 }