From 0aadb6b0297fd96ac6c1eaf6b6b6ea69674d3124 Mon Sep 17 00:00:00 2001 From: AdityaP700 <126982848+AdityaP700@users.noreply.github.com> Date: Mon, 21 Oct 2024 20:58:47 +0530 Subject: [PATCH] Fixed Dropdown issue andaligned dark mode icon --- index.html | 1 + package.json | 2 +- src/components/shared/Navbar.jsx | 137 +++++++++++++------------------ 3 files changed, 57 insertions(+), 83 deletions(-) diff --git a/index.html b/index.html index 3e2477b..9170322 100644 --- a/index.html +++ b/index.html @@ -32,6 +32,7 @@
+ \ No newline at end of file diff --git a/package.json b/package.json index 547ece7..b1de06f 100644 --- 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 index fc197d8..f661383 100644 --- a/src/components/shared/Navbar.jsx +++ b/src/components/shared/Navbar.jsx @@ -1,12 +1,12 @@ 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"; const Navbar = () => { const { isDarkMode, toggleTheme } = useContext(Context); const [isSticky, setIsSticky] = useState(false); + const [isCollapsed, setIsCollapsed] = useState(true); const handleScroll = () => { setIsSticky(window.scrollY > 50); @@ -19,76 +19,63 @@ 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 (