Merge pull request #327 from AdityaP700/edit

Resolve Navbar Issues: Dropdown, Navigation, and Dark Mode Alignment
Avdhesh-Varshney · Oct 22, 2024 · 44819e6 · 44819e6
2 parents 5eba7da + 4e3ca6a
commit 44819e6
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 85 deletions.
diff --git a/index.html b/index.html
@@ -32,6 +32,7 @@
 <body>
   <div id="root"></div>
   <script type="module" src="/src/main.jsx"></script>
+
 </body>
 
 </html>
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "@emotion/styled": "^11.11.5",
     "@mui/material": "^5.15.19",
     "axios": "^1.7.4",
-    "bootstrap": "^5.3.3",
+    "bootstrap": "^5.1.3",
     "concurrently": "^8.2.2",
     "dotenv": "^16.4.5",
     "groq-sdk": "^0.5.0",

diff --git a/src/components/shared/Navbar.jsx b/src/components/shared/Navbar.jsx
@@ -1,13 +1,13 @@
 import { useContext, useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { MdOutlineDarkMode, MdOutlineLightMode } from "react-icons/md";
-import { Collapse } from "bootstrap"; // Ensure Bootstrap's JavaScript is loaded in your project
 import { Context } from "../../context/Context";
 import '../shared/Navbar.css'
 
 const Navbar = () => {
   const { isDarkMode, toggleTheme } = useContext(Context);
   const [isSticky, setIsSticky] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(true);
 
   const handleScroll = () => {
     setIsSticky(window.scrollY > 50);
@@ -20,76 +20,68 @@ const Navbar = () => {
     };
   }, []);
 
-  useEffect(() => {
-    const handleNavItemClick = () => {
-      const navbarCollapse = document.getElementById("navbarSupportedContent");
-      if (navbarCollapse.classList.contains("show")) {
-        const bsCollapse = new Collapse(navbarCollapse, { toggle: true });
-        bsCollapse.hide();
-      }
-    };
-
-    const navLinks = document.querySelectorAll(
-      "#navbarSupportedContent .nav-link"
-    );
-    const dropdownItems = document.querySelectorAll(
-      "#navbarSupportedContent .dropdown-item"
-    );
-
-    navLinks.forEach((link) =>
-      link.addEventListener("click", handleNavItemClick)
-    );
-    dropdownItems.forEach((item) =>
-      item.addEventListener("click", handleNavItemClick)
-    );
-
-    return () => {
-      navLinks.forEach((link) =>
-        link.removeEventListener("click", handleNavItemClick)
-      );
-      dropdownItems.forEach((item) =>
-        item.removeEventListener("click", handleNavItemClick)
-      );
-    };
-  }, []);
+  const toggleCollapse = () => {
+    setIsCollapsed(!isCollapsed);
+  };
 
   return (
     <nav
-      className={`navbar navbar-expand-lg ${isSticky ? "fixed-top" : ""} ${
-        isDarkMode ? "navbar-dark" : "navbar-light"
-      }`}
+      className={`navbar navbar-expand-lg ${isSticky ? "fixed-top" : ""} ${isDarkMode ? "navbar-dark" : "navbar-light"
+        }`}
       style={{
-        backgroundColor: `${
-          isDarkMode ? "rgba(0, 0, 0)" : "rgba(223, 223, 176)"
-        }`,
+        backgroundColor: isDarkMode ? "rgba(0, 0, 0)" : "rgba(223, 223, 176)",
       }}
     >
       <div className="container-fluid">
-        <Link className="navbar-brand d-flex align-items-center px-4" to="/">
-          <img
-            src="logo.webp"
-            alt="Chanakya Image"
-            className="me-2"
-            style={{ width: "40px", height: "40px" }}
-          />
-          <span style={{ fontSize: "1.2rem", fontWeight: "bold" }}>
-            चाणक्य नीति
-          </span>
-        </Link>
-
-        <button
-          className="navbar-toggler"
-          type="button"
-          data-bs-toggle="collapse"
-          data-bs-target="#navbarSupportedContent"
-          aria-controls="navbarSupportedContent"
-          aria-expanded="false"
-          aria-label="Toggle navigation"
-        >
-          <span className="navbar-toggler-icon"></span>
-        </button>
-
-        <div className=" navbar-collapse " id="navbarSupportedContent">
+
+        <div className="d-flex justify-content-between align-items-center w-100">
+          <Link className="navbar-brand d-flex align-items-center" to="/">
+            <img
+              src="logo.webp"
+              alt="Chanakya Image"
+              className="me-2"
+              style={{ width: "30px", height: "30px" }}
+            />
+            <span style={{ fontSize: "1.2rem", fontWeight: "bold" }}>
+              चाणक्य नीति
+            </span>
+          </Link>
+
+          <div className="d-flex align-items-center">
+            <li
+              className="nav-item nav-link"
+              onClick={toggleTheme}
+              style={{ cursor: "pointer", marginRight: "1rem" }}
+            >
+              {isDarkMode ? (
+                <MdOutlineLightMode
+                  style={{ fontSize: "1.5rem", color: "white" }}
+                />
+              ) : (
+                <MdOutlineDarkMode
+                  style={{ fontSize: "1.5rem", color: "black" }}
+                />
+              )}
+            </li>
+
+
+
+            <button
+              className="navbar-toggler"
+              type="button"
+              onClick={toggleCollapse}
+              aria-controls="navbarSupportedContent"
+              aria-expanded={!isCollapsed}
+              aria-label="Toggle navigation"
+            >
+              <span className="navbar-toggler-icon"></span>
+            </button>
+          </div>
+        </div>
+
+
+        <div className={`collapse navbar-collapse ${!isCollapsed ? "show" : ""}`} id="navbarSupportedContent">
+
           <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
             <li className="nav-item">
               <Link className="nav-link" to="/about">
@@ -98,16 +90,18 @@ const Navbar = () => {
             </li>
 
             <li className="nav-item dropdown">
-              <Link
-                className="nav-link dropdown-toggle"
-                to="#"
+              <button
+                className="nav-link dropdown-toggle btn btn-link"
                 id="navbarDropdown"
                 role="button"
                 data-bs-toggle="dropdown"
                 aria-expanded="false"
+                onClick={() => console.log("Dropdown clicked")}
+
               >
                 Resources
-              </Link>
+              </button>
+
               <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
                 <li>
                   <Link className="dropdown-item" to="/resources/chanakyagpt">
@@ -152,22 +146,6 @@ const Navbar = () => {
                 Login
               </Link>
             </li>
-
-            <li
-              className="nav-item nav-link px-4"
-              onClick={toggleTheme}
-              style={{ cursor: "pointer" }}
-            >
-              {isDarkMode ? (
-                <MdOutlineLightMode
-                  style={{ fontSize: "1.5rem", color: "white" }}
-                />
-              ) : (
-                <MdOutlineDarkMode
-                  style={{ fontSize: "1.5rem", color: "black" }}
-                />
-              )}
-            </li>
           </ul>
         </div>
       </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,6 +32,7 @@ @@
     <body>
       <div id="root"></div>
       <script type="module" src="/src/main.jsx"></script>
     </body>
     </html>