Made Navbar Responsive (#13)

src/components/hero/Herosection.css

@@ -1,26 +1,16 @@
 .hero-container {
   display: flex;
-  flex-direction: row;
   justify-content: space-around;
   align-items: center;
   font-family: "Roboto", sans-serif;
-  font-size: 1.5rem;
   background: var(--background-light);
-  height: 88vh;
+  padding: 5%;
 }
 
-.left {
-
-
-  display: flex;
-
-  justify-content: center;
-  align-items: center;
-  background-color: var(--background-light);
-}
 
 .left img {
-
+  max-width: 75%; 
+  height: auto;    
   border-radius: 50%;
 }
 
@@ -64,4 +54,4 @@
 
 .socials > a {
   color: var(--text-dark);
-}
+}

src/components/nav/Navbar.css

@@ -5,24 +5,48 @@
   justify-content: space-around;
   align-items: center;
   background: var(--background-light);
-
-
 }
 
-.navigation img {
+.navigation .logo {
   cursor: pointer;
 }
 
+.menu-button {
+  display: none;
+  cursor: pointer;
+  font-size: 24px;
+}
+
+.menu-button.open {
+  display: block;
+}
+
 .nav-links {
   display: flex;
   justify-content: space-around;
   align-items: center;
   width: 50%;
   list-style: none;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 50%;
+  list-style: none;
 }
 
-.nav-links li {
- padding: 10px 25px;
+.nav-links.open {
+  flex-direction: column;
+  position: absolute;
+  top: 90px;
+  left: 0;
+  background: var(--background-light);
+  width: 100%;
+  padding: 20px;
+  border: 1px solid var(--button-color);
+}
+
+.nav-links li{
+  padding: 10px 25px;
 
   background: var(--button-color);
   border-radius: 8px;
@@ -31,17 +55,25 @@
   font-weight: 500;
   color: #eeeeee;
 }
-
-.material-symbols-outlined {
-  font-variation-settings: "FILL" 100, "wght" 400, "GRAD" 0, "opsz" 48;
-}
 @media screen and (max-width: 800px) {
-  .navigation {
+  .menu-button {
+    display: block;
+  }
+
+  .nav-links {
+    display: none;
+  }
+
+  .nav-links.open {
     display: flex;
-    border-bottom: 1px solid rgba(48, 48, 48, 0.125);  
-      flex-direction: column;
-
-
   }
-
+  .nav-links li{
+    margin: 2%;
+    padding: 5px 10px;
+    background: var(--button-color);
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 500;
+    color: #eeeeee;
+  }
 }

src/components/nav/Navbar.jsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
-import { MdDarkMode, MdWbSunny } from "react-icons/md";
+import React, { useEffect, useState } from "react";
+import { MdDarkMode, MdWbSunny, MdMenu, MdClose } from "react-icons/md";
 import { Link } from "react-router-dom";
 import Dark64 from "./../../assets/GitHub-Dark-64px.png";
 import Light64 from "./../../assets/GitHub-Light-64px.png";
@@ -8,10 +8,15 @@ import "./Navbar.css";
 const Navbar = () => {
   const [theme, setTheme] = useState("light-theme");
   const [logo, setLogo] = useState(Dark64);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   const toggleTheme = () => {
-    theme === "light-theme" ? setTheme("dark-theme") : setTheme("light-theme");
-    logo === Light64 ? setLogo(Dark64) : setLogo(Light64);
+    setTheme((prevTheme) => (prevTheme === "light-theme" ? "dark-theme" : "light-theme"));
+    setLogo((prevLogo) => (prevLogo === Light64 ? Dark64 : Light64));
+  };
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
   };
 
   useEffect(() => {
@@ -20,8 +25,11 @@ const Navbar = () => {
 
   return (
     <div className="navigation">
-      <img src={logo} alt="logo" />
-      <ul className="nav-links">
+      <img src={logo} alt="logo" className="logo" />
+      <div className={`menu-button ${isMenuOpen ? "open" : ""}`} onClick={toggleMenu}>
+        {isMenuOpen ? <MdClose size={24} /> : <MdMenu size={24} />}
+      </div>
+      <ul className={`nav-links ${isMenuOpen ? "open" : ""}`}>
         <Link to="/" style={{ textDecoration: "none" }}>
           <li className="links">Home</li>
         </Link>
@@ -32,11 +40,7 @@ const Navbar = () => {
           <li className="links">Contributions</li>
         </Link>
         <li onClick={() => toggleTheme()}>
-          {theme === "light-theme" ? (
-            <MdDarkMode size={20} />
-          ) : (
-            <MdWbSunny size={20} />
-          )}
+          {theme === "light-theme" ? <MdDarkMode size={20} /> : <MdWbSunny size={20} />}
         </li>
       </ul>
     </div>