-
+
Experience
9 months Working
-
+
Completed
14 + Projects
-
+
Lines of coding
44.4K+
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
index 9b51a8c..0cc4c6d 100644
--- a/src/components/footer/Footer.jsx
+++ b/src/components/footer/Footer.jsx
@@ -22,23 +22,23 @@ const Footer = () => {
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
index ca2fb70..ddb3ac4 100644
--- a/src/components/header/Header.jsx
+++ b/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 (
-