From 3e51b496ca067ce51423b6dd3abe479e829eabf5 Mon Sep 17 00:00:00 2001
From: TheSecondBread <gamezone2904@gmail.com>
Date: Tue, 18 Jun 2024 21:14:49 +0530
Subject: [PATCH] fixed theme reset after refreshing the page

---
 public/data/Sahilll15.json         |  2 +-
 public/data/connectaryal.json      | 18 ++++++++++++++++--
 src/ProfilesList.json              |  2 +-
 src/components/Sidebar/Sidebar.jsx | 28 ++++++++++++++++++++--------
 4 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/public/data/Sahilll15.json b/public/data/Sahilll15.json
index 3c733ad2..e50fd978 100644
--- a/public/data/Sahilll15.json
+++ b/public/data/Sahilll15.json
@@ -1,6 +1,6 @@
 {
   "name": "Sahil Sanjay Chalke",
-  "location": "Mumbai, India 🇮🇳", 
+  "location": "Mumbai, India 🇮🇳",
   "bio": "FULL STACK DEV",
   "avatar": "https://avatars.githubusercontent.com/u/109215419?v=4",
   "portfolio": "https://sahilchalke.online/",
diff --git a/public/data/connectaryal.json b/public/data/connectaryal.json
index 1756d77a..05d8073b 100644
--- a/public/data/connectaryal.json
+++ b/public/data/connectaryal.json
@@ -4,10 +4,24 @@
   "bio": "Senior Software Engineer with 5+ years of experience in building scalable applications.",
   "avatar": "https://github.com/connectaryal.png",
   "portfolio": "https://shivaaryal.com.np/",
-  "skills": ["HTML", "CSS", "JavaScript", "Tailwind CSS", "TypeScript", "React", "OOP", "Node.js", "PHP", "Laravel", "WordPress", "MYSQL", "Docker"],
+  "skills": [
+    "HTML",
+    "CSS",
+    "JavaScript",
+    "Tailwind CSS",
+    "TypeScript",
+    "React",
+    "OOP",
+    "Node.js",
+    "PHP",
+    "Laravel",
+    "WordPress",
+    "MYSQL",
+    "Docker"
+  ],
   "social": {
     "GitHub": "https://github.com/connectaryal",
     "Twitter": "https://twitter.com/connectaryal",
     "LinkedIn": "https://www.linkedin.com/in/connectaryal"
   }
-}
\ No newline at end of file
+}
diff --git a/src/ProfilesList.json b/src/ProfilesList.json
index a86b2964..dcf1efb0 100644
--- a/src/ProfilesList.json
+++ b/src/ProfilesList.json
@@ -426,4 +426,4 @@
   "Monalisha-Roy.json",
   "Sahilll15.json",
   "Kritika.json"
-]
\ No newline at end of file
+]
diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx
index 4ae74420..dcc2b145 100644
--- a/src/components/Sidebar/Sidebar.jsx
+++ b/src/components/Sidebar/Sidebar.jsx
@@ -1,22 +1,34 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCode, faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 
 function Sidebar() {
-  const [theme, setTheme] = useState('dark');
+  const [theme, setTheme] = useState();
 
   function toggleTheme() {
     const htmlElement = document.documentElement;
-    const isDarkModeEnabled = htmlElement.classList.contains('dark');
-
-    if (isDarkModeEnabled) {
+    if (localStorage.getItem('theme') === 'light') {
+      setTheme('dark');
+      localStorage.setItem('theme', 'dark');
+      htmlElement.classList.add('dark');
+    } else {
       htmlElement.classList.remove('dark');
       setTheme('light');
-    } else {
-      htmlElement.classList.add('dark');
-      setTheme('dark');
+      localStorage.setItem('theme', 'light');
     }
   }
+
+  useEffect(() => {
+    let storedTheme = localStorage.getItem('theme');
+    if (storedTheme === null) {
+      localStorage.setItem('theme', 'light');
+      setTheme('light');
+    } else {
+      setTheme(storedTheme);
+    }
+    toggleTheme();
+  }, []);
+
   return (
     <div className="my-7 w-full border-r-2 border-borderSecondary px-7 font-spaceMono dark:border-borderColor md:h-[90vh] md:w-[23%]">
       <div className="mb-2 flex h-12 items-center gap-2.5">