From f2d1c8fefab0d4b70b540fbd55de551da94a6cc1 Mon Sep 17 00:00:00 2001
From: Saad Rasheed <84860156+saadrasheeddev@users.noreply.github.com>
Date: Sat, 19 Oct 2024 09:21:48 +0500
Subject: [PATCH 1/3] Update Header.js

---
 src/components/header/Header.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/header/Header.js b/src/components/header/Header.js
index 6218f1950c..4097111723 100644
--- a/src/components/header/Header.js
+++ b/src/components/header/Header.js
@@ -1,4 +1,4 @@
-import React, {useContext} from "react";
+import React, {useContext, useRef} from "react";
 import Headroom from "react-headroom";
 import "./Header.scss";
 import ToggleSwitch from "../ToggleSwitch/ToggleSwitch";
@@ -24,6 +24,14 @@ function Header() {
   const viewTalks = talkSection.display;
   const viewResume = resumeSection.display;
 
+  const menuCheckboxRef = useRef(null);
+
+  const handleMenuItemClick = () => {
+    if (menuCheckboxRef.current) {
+      menuCheckboxRef.current.checked = false;
+    }
+  };
+
   return (
     <Headroom>
       <header className={isDark ? "dark-menu header" : "header"}>
@@ -32,7 +40,7 @@ function Header() {
           <span className="logo-name">{greeting.username}</span>
           <span className="grey-color">/&gt;</span>
         </a>
-        <input className="menu-btn" type="checkbox" id="menu-btn" />
+        <input className="menu-btn" type="checkbox" id="menu-btn" ref={menuCheckboxRef}/>
         <label
           className="menu-icon"
           htmlFor="menu-btn"
@@ -82,7 +90,7 @@ function Header() {
           <li>
             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
             <a>
-              <ToggleSwitch />
+              <ToggleSwitch handleMenuItemClick={handleMenuItemClick}/>
             </a>
           </li>
         </ul>

From c05db29eecb5af953b8840db9f92ceb717cb836c Mon Sep 17 00:00:00 2001
From: Saad Rasheed <84860156+saadrasheeddev@users.noreply.github.com>
Date: Sat, 19 Oct 2024 09:22:58 +0500
Subject: [PATCH 2/3] Update ToggleSwitch.js

---
 src/components/ToggleSwitch/ToggleSwitch.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/ToggleSwitch/ToggleSwitch.js b/src/components/ToggleSwitch/ToggleSwitch.js
index 72a46eb94d..afe3bf6541 100644
--- a/src/components/ToggleSwitch/ToggleSwitch.js
+++ b/src/components/ToggleSwitch/ToggleSwitch.js
@@ -3,7 +3,7 @@ import emoji from "react-easy-emoji";
 import StyleContext from "../../contexts/StyleContext";
 import "./ToggleSwitch.scss";
 
-const ToggleSwitch = () => {
+const ToggleSwitch = ({handleMenuItemClick}) => {
   const {isDark} = useContext(StyleContext);
   const [isChecked, setChecked] = useState(isDark);
   const styleContext = useContext(StyleContext);
@@ -16,6 +16,7 @@ const ToggleSwitch = () => {
         onChange={() => {
           styleContext.changeTheme();
           setChecked(!isChecked);
+          handleMenuItemClick();
         }}
       />
       <span className="slider round">

From 3310c7eabadfc84da35514c784e981fc0ea8a8e1 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Sat, 19 Oct 2024 04:31:31 +0000
Subject: [PATCH 3/3] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 src/components/header/Header.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/header/Header.js b/src/components/header/Header.js
index 4097111723..c25c5ea1e4 100644
--- a/src/components/header/Header.js
+++ b/src/components/header/Header.js
@@ -40,7 +40,12 @@ function Header() {
           <span className="logo-name">{greeting.username}</span>
           <span className="grey-color">/&gt;</span>
         </a>
-        <input className="menu-btn" type="checkbox" id="menu-btn" ref={menuCheckboxRef}/>
+        <input
+          className="menu-btn"
+          type="checkbox"
+          id="menu-btn"
+          ref={menuCheckboxRef}
+        />
         <label
           className="menu-icon"
           htmlFor="menu-btn"
@@ -90,7 +95,7 @@ function Header() {
           <li>
             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
             <a>
-              <ToggleSwitch handleMenuItemClick={handleMenuItemClick}/>
+              <ToggleSwitch handleMenuItemClick={handleMenuItemClick} />
             </a>
           </li>
         </ul>