feat: dark-mode header

package.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/components/about/About.jsx

@@ -19,7 +19,7 @@ const About = () => {
         </p>
 
         <a download ="" href={CV} className="button button--flex">Download Resume
-        <i class="uil uil-file-alt"></i></a>
+        <i className="uil uil-file-alt"></i></a>
       </div>
       </div>
     </section>

src/components/about/Info.jsx

@@ -4,19 +4,19 @@ const Info = () => {
   return (
     <div className="about__info grid">
         <div className="about__box">
-        <i class='bx bxs-award about__icon'></i>
+        <i className='bx bxs-award about__icon'></i>
             <h3 className="about__title">Experience </h3>
             <span className="about__subtitle">9 months Working</span>
         </div>
 
         <div className="about__box">
-        <i class='bx bx-briefcase-alt about__icon' ></i>
+        <i className='bx bx-briefcase-alt about__icon' ></i>
             <h3 className="about__title">Completed</h3>
             <span className="about__subtitle">14 + Projects</span>
         </div>
 
         <div className="about__box">
-        <i class='bx bx-code-curly about__icon' ></i>
+        <i className='bx bx-code-curly about__icon' ></i>
             <h3 className="about__title">Lines of coding</h3>
             <span className="about__subtitle">44.4K+</span>
         </div>

src/components/footer/Footer.jsx

@@ -22,23 +22,23 @@ const Footer = () => {
 
         <div className="footer__social">
         <a href="https://github.com/komalreddy3" className="footer__social-link" target="_blank">
-        <i class="bx bxl-github"></i>
+        <i className="bx bxl-github"></i>
         </a>
 
         <a href="https://www.linkedin.com/in/komalreddyk/" className="footer__social-link" target="_blank">
-        <i class="bx bxl-linkedin"></i>
+        <i className="bx bxl-linkedin"></i>
         </a>
 
         <a href="https://www.instagram.com/komalreddyk/" className="footer__social-link" target="_blank">
-        <i class="bx bxl-instagram"></i>
+        <i className="bx bxl-instagram"></i>
         </a>
 
         <a href="https://twitter.com/KomalKReddy" className="footer__social-link" target="_blank">
-        <i class="bx bxl-twitter"></i>
+        <i className="bx bxl-twitter"></i>
         </a>
 
         <a href="https://www.facebook.com/koukuntlakomalreddy/" className="footer__social-link" target="_blank">
-        <i class="bx bxl-messenger"></i>
+        <i className="bx bxl-messenger"></i>
         </a>
         </div>
 

src/components/header/Header.jsx

@@ -1,17 +1,85 @@
-import React ,{useState} from 'react'
+import React ,{useState,useEffect} from 'react'
 import "./header.css"
 const Header = () => {
     // TOGGLE MENU
     const [Toggle,showMenu]=useState(false);
+    useEffect(() => {
+        const menu = document.querySelector(".nav__menu");
+        if (Toggle) {
+            menu.classList.add("show-menu");
+        } else {
+            menu.classList.remove("show-menu");
+        }
+    }, [Toggle]);
+    // TOGGLE FOR LIGHT AND DARK MODE
+    function handleToggle(){
+        const togglebox= document.getElementById("toggle_box")
+        const checkbox= document.getElementById("checkbox")
+        const circle =document.querySelector(".circle")
+        const header= document.getElementById("header");
+        const nav__logo= document.getElementById("nav__logo");
+        const nav__toggle= document.getElementById("nav__toggle");
+        const nav__menu= document.querySelector(".nav__menu")
+
+        if(checkbox.checked){
 
+            togglebox.classList.remove("toggle_box");
+            togglebox.classList.add("toggle_box--checked");
+
+            circle.classList.remove("circle--unchecked");
+            circle.classList.add("circle--checked");
+
+            header.classList.remove("header");
+            header.classList.add("header--checked");
+
+            nav__logo.classList.remove("nav__logo");
+            nav__logo.classList.add("nav__logo--checked");
+
+            nav__toggle.classList.remove("nav__toggle");
+            nav__toggle.classList.add("nav__toggle--checked");
+
+            const nav__links= document.querySelectorAll(".nav__link")
+            for(const nav__link of nav__links ){
+                nav__link.classList.remove("nav__link")
+            nav__link.classList.add("nav__link--checked")
+            }
+
+            nav__menu.classList.add("nav__menu--checked");
+
+        }else{
+            togglebox.classList.remove("toggle_box--checked");
+            togglebox.classList.add("toggle_box");
+
+            circle.classList.remove("circle--checked");
+            circle.classList.add("circle--unchecked");
+            // Toggle back to default CSS
+            header.classList.remove("header--checked");
+            header.classList.add("header");
+
+            nav__logo.classList.remove("nav__logo--checked");
+            nav__logo.classList.add("nav__logo");
+
+            nav__toggle.classList.remove("nav__toggle--checked");
+            nav__toggle.classList.add("nav__toggle");
+
+            const nav__links= document.querySelectorAll(".nav__link--checked")
+
+            for(const nav__link of nav__links ){
+                nav__link.classList.remove("nav__link--checked")
+            nav__link.classList.add("nav__link")
+            }
+
+            nav__menu.classList.remove("nav__menu--checked")
+        }
+   }
   return (
-    <header className="header">
+    <header id="header" className="header">
         <nav className="nav container">
-            <a href="index.html" className="nav__logo">Komal Reddy K</a>
-            <div className={Toggle? "nav__menu show-menu":"nav__menu"}>
+            <a href="index.html" className="nav__logo" id="nav__logo">Komal Reddy K</a>
+            <div className="nav__menu">
                 <ul className="nav__list grid">
                     <li className="nav__item">
-                        <a href="#home" className="nav__link active-link">
+                        <a href="#home" className="nav__link ">
                             <i className="iuil uil-estate nav__icon"></i> Home
                         </a>
                     </li>
@@ -56,17 +124,28 @@ const Header = () => {
                             <i className="iuil uil-message nav__icon"></i>Contact
                         </a>
                     </li>
+                    <li className="nav__item nav__close" >
+                   <a href="" className="nav__link">
+                   <i className="uil uil-times  nav__icon " onClick={() => showMenu(!Toggle)}></i> Close
+                   </a>
+                    </li>
                 </ul>
 
-                <i class="uil uil-times nav__close" onClick={() => showMenu(!Toggle)}></i>
+
             </div>
 
-            <div className="nav__toggle" onClick={() => showMenu(!Toggle)}>
-                <i class="uil uil-apps"></i>
+            <div className="nav__toggle" onClick={() => showMenu(!Toggle)} id="nav__toggle">
+                <i className="uil uil-apps"></i>
             </div>
+
+            <label  id="toggle_box" className="toggle_box" onClick={handleToggle}>
+            <input type="checkbox" id="checkbox" />
+            <div className="circle"> </div>
+            </label>
+
         </nav>
+
     </header>
-
   )
 }