Updated Navbar (#546)

Solved issue #523 
I have made the navbar responsive, thus for smaller screens I have added
the hamburger style to make sure the user can access the links.


https://github.com/user-attachments/assets/b4f4c988-10ee-4ef1-bf34-83e47650033a

src/Component/Navbar.jsx

@@ -3,7 +3,7 @@
 import React, { useState } from "react";
 import "./style.css";
 import { GiCrossMark } from "react-icons/gi";
-import { FaGithub, FaLaptop, FaHome, FaRegSun } from "react-icons/fa";
+import { FaGithub, FaLaptop, FaHome, FaRegSun, FaBars } from "react-icons/fa";
 import { BsFiletypeDoc } from "react-icons/bs";
 import { Link, useNavigate } from "react-router-dom";
 
@@ -12,121 +12,93 @@ function Navbar() {
   function handleRedirect() {
     navigate("/");
   }
-  let [slidebarClick, setSlidebarClick] = useState(false);
-
-  // function slidebarClicked(e){
-  // // slidebarClick=slidebarClick?false:true;
-  // // slidebarClick=slidebarClick?false:true;
-  // // if(slidebarClick==false).?
-
-  // console.log(slidebarClick)
-
-  // }
+  const [slidebarClick, setSlidebarClick] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   const toggleDarkMode = () => setSlidebarClick(!slidebarClick);
+  const toggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen);
 
-  // </div>
   return (
     <>
       <nav className="Navbar">
         <div
           className="nav-icons"
-          style={{ cursor: "none", fontSize: "2em" }}
-          onClick={toggleDarkMode}>
+          style={{ cursor: "pointer", fontSize: "2em" , marginRight:"10em"}}
+          onClick={toggleDarkMode}
+        >
           {slidebarClick ? <GiCrossMark /> : <FaRegSun />}
         </div>
         <div
           className="left-sight"
           onClick={handleRedirect}
-          style={{ textAlign: "center", fontSize: "2em", cursor: "none" }}>
+          style={{ textAlign: "center", fontSize: "2em", cursor: "pointer" }}
+        >
           CareerZunction
         </div>
         <div className="right-sight">
           <div className="cart-item">
-            <Link to="/" className="link">
-              {" "}
-              Home
-            </Link>
+            <Link to="/" className="link">Home</Link>
           </div>
           <div className="cart-item">
-            <Link to="/intern" className="link">
-              {" "}
-              Internships
-            </Link>
+            <Link to="/intern" className="link">Internships</Link>
           </div>
           <div className="cart-item">
-            <Link to="/Blog" className="link">
-              Blog
-            </Link>
+            <Link to="/Blog" className="link">Blog</Link>
           </div>
           <div className="cart-item">
-            <Link to="/docs" className="link">
-              {" "}
-              Documentation
-            </Link>
+            <Link to="/docs" className="link">Documentation</Link>
           </div>
           <div className="cart-item">
             <Link
               to="https://github.com/HimanshuNarware/CareerZunction_Intern"
-              className="link">
-              {" "}
+              className="link"
+            >
               GitHub
             </Link>
           </div>
           <div className="cart-item">
-            <Link to="/Contributors" className="link">
-              {" "}
-              Contributors
-            </Link>
+            <Link to="/Contributors" className="link">Contributors</Link>
           </div>
           <div className="cart-item">
-            <Link to="/Contact" className="link">
-              {" "}
-              Contact Us
-            </Link>
+            <Link to="/Contact" className="link">Contact Us</Link>
           </div>
         </div>
+        <div className="hamburger" onClick={toggleMobileMenu}>
+          {isMobileMenuOpen ? <GiCrossMark /> : <FaBars />}
+        </div>
       </nav>
 
-      <div className="sidebar ">
-        <div className="sidebar-options">
-          {
-            <Link to="/">
-              <FaHome />
-            </Link>
-          }
+      <div className={`sidebar ${isMobileMenuOpen ? "open" : ""}`}>
+        <div className="close-button" onClick={toggleMobileMenu}>
+          <GiCrossMark />
         </div>
-        <div className="sidebar-options">
-          {
-            <Link to="/intern">
-              <FaLaptop />
-            </Link>
-          }
+        <div className="sidebar-item">
+          <Link to="/" className="link">Home</Link>
         </div>
-        <div className="sidebar-optionss">{<Link to="/Blog"></Link>}</div>
-        <div className="sidebar-options">
-          {
-            <Link to="/docs">
-              <BsFiletypeDoc />
-            </Link>
-          }
+        <div className="sidebar-item">
+          <Link to="/intern" className="link">Internships</Link>
         </div>
-        <div className="sidebar-options">
-          {
-            <Link
-              to="https://github.com/HimanshuNarware/CareerZunction_Intern"
-              target="_blank">
-              <FaGithub />
-            </Link>
-          }
+        <div className="sidebar-item">
+          <Link to="/Blog" className="link">Blog</Link>
         </div>
-        <div className="sidebar-optionss">
-          {<Link to="/Contact" target="_blank"></Link>}
+        <div className="sidebar-item">
+          <Link to="/docs" className="link">Documentation</Link>
+        </div>
+        <div className="sidebar-item">
+          <Link
+            to="https://github.com/HimanshuNarware/CareerZunction_Intern"
+            className="link"
+          >
+            GitHub
+          </Link>
+        </div>
+        <div className="sidebar-item">
+          <Link to="/Contributors" className="link">Contributors</Link>
+        </div>
+        <div className="sidebar-item">
+          <Link to="/Contact" className="link">Contact Us</Link>
         </div>
       </div>
-
-
-
     </>
   );
 }