fix navbar and hero on homepage

src/components/Hero.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import "../scss/components/Hero.scss";
+import "../scss/components/_hero.scss";
 
 function Hero() {
   const canvasRef = useRef(null);
@@ -125,6 +125,22 @@ function Hero() {
       <div className="hero-glitch-lines"></div>
 
       <div className="hero-content">
+        <div className="hero-text-container">
+          <h1 className="hero-title">
+            BATTLE<span className="hero-title-highlight">SNAKE</span>
+          </h1>
+          <p className="hero-subtitle">
+            Enter the digital arena and code your way to victory
+          </p>
+
+          <div className="hero-cta-container">
+            <button className="hero-cta">
+              <span className="hero-cta-text">START BATTLE</span>
+              <span className="hero-cta-glitch"></span>
+            </button>
+          </div>
+        </div>
+
         <div className="hero-logo-container">
           <img
             src="/images/battlesnake-neon-logo.GIF"
@@ -133,13 +149,6 @@ function Hero() {
           />
           <div className="hero-logo-glow"></div>
         </div>
-
-        <div className="hero-cta-container">
-          <button className="hero-cta">
-            <span className="hero-cta-text">START BATTLE</span>
-            <span className="hero-cta-glitch"></span>
-          </button>
-        </div>
       </div>
 
       <div className="cyberpunk-cursor"></div>

src/components/Navbar.jsx

@@ -1,12 +1,32 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import "../scss/styles.scss";
 import "../scss/components/_navbar.scss";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 const Navbar = () => {
   const [glitchEffect, setGlitchEffect] = useState(false);
   const [activeLink, setActiveLink] = useState("/");
   const [user, setUser] = useState(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef(null);
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    // Implement client-side logout without calling the backend
+    // This clears the user state in the frontend
+    setUser(null);
+
+    // Clear any authentication cookies if they exist
+    document.cookie.split(";").forEach((cookie) => {
+      const [name] = cookie.trim().split("=");
+      document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+    });
+
+    // Redirect to home page
+    navigate("/");
+
+    console.log("Logged out successfully");
+  };
 
   useEffect(() => {
     // Set active link based on current path
@@ -17,6 +37,19 @@ const Navbar = () => {
       setGlitchEffect(true);
       setTimeout(() => setGlitchEffect(false), 200);
     }, 3000);
+
+    // Close menu when clicking outside
+    const handleClickOutside = (event) => {
+      if (
+        menuRef.current &&
+        !menuRef.current.contains(event.target) &&
+        menuOpen
+      ) {
+        setMenuOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
     async function fetchUser() {
       const res = await fetch("http://localhost:8080/auth/current_user", {
         credentials: "include", // very important
@@ -24,8 +57,9 @@ const Navbar = () => {
       if (res.ok) {
         console.log("User response:", res);
         const user = await res.json();
-        console.log("User:", user);
+        //checking user response
-        console.log("User display name:", user.displayName);
+        // console.log("User:", user);
+        // console.log("User display name:", user.displayName);
 
         setUser(user);
       } else {
@@ -34,11 +68,22 @@ const Navbar = () => {
     }
     fetchUser();
 
-    return () => clearInterval(glitchInterval);
+    return () => {
+      clearInterval(glitchInterval);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
   }, []);
 
+  const toggleMenu = () => {
+    setMenuOpen(!menuOpen);
+  };
+
   return (
-    <nav className={`navbar ${glitchEffect ? "navbar--glitch" : ""}`}>
+    <nav
+      className={`navbar ${glitchEffect ? "navbar--glitch" : ""} ${
+        menuOpen ? "navbar--menu-open" : ""
+      }`}
+    >
       <div className="navbar__logo">
         <div className="navbar__logo-scanner"></div>
         <span className="navbar__logo-text">
@@ -46,6 +91,18 @@ const Navbar = () => {
         </span>
       </div>
 
+      <div className="navbar__hamburger" onClick={toggleMenu}>
+        <div
+          className={`navbar__hamburger-line ${menuOpen ? "active" : ""}`}
+        ></div>
+        <div
+          className={`navbar__hamburger-line ${menuOpen ? "active" : ""}`}
+        ></div>
+        <div
+          className={`navbar__hamburger-line ${menuOpen ? "active" : ""}`}
+        ></div>
+      </div>
+
       {user && (
         <div className="navbar__greeting">
           <span className="navbar__greeting-text">WELCOME</span>
@@ -53,7 +110,10 @@ const Navbar = () => {
         </div>
       )}
 
-      <ul className="navbar__links">
+      <ul
+        className={`navbar__links ${menuOpen ? "navbar__links--open" : ""}`}
+        ref={menuRef}
+      >
         <li>
           <Link
             to="/"
@@ -105,16 +165,31 @@ const Navbar = () => {
           </Link>
         </li>
         <li>
-          <Link
+          {user ? (
-            to="/login"
+            <a
-            className={`navbar__link ${
+              href="#"
-              activeLink === "/login" ? "navbar__link--active" : ""
+              onClick={(e) => {
-            }`}
+                e.preventDefault();
-          >
+                handleLogout();
-            <span className="navbar__link-icon">🔒</span>
+              }}
-            <span className="navbar__link-text">LOGIN</span>
+              className={`navbar__link`}
-            <span className="navbar__link-hover"></span>
+            >
-          </Link>
+              <span className="navbar__link-icon">🔓</span>
+              <span className="navbar__link-text">LOGOUT</span>
+              <span className="navbar__link-hover"></span>
+            </a>
+          ) : (
+            <Link
+              to="/login"
+              className={`navbar__link ${
+                activeLink === "/login" ? "navbar__link--active" : ""
+              }`}
+            >
+              <span className="navbar__link-icon">🔒</span>
+              <span className="navbar__link-text">LOGIN</span>
+              <span className="navbar__link-hover"></span>
+            </Link>
+          )}
         </li>
       </ul>
     </nav>
@@ -123,3 +198,20 @@ const Navbar = () => {
 
 export default Navbar;
 //{user ? user.displayName : "NOTEBOOK"}
+
+//server side logout (was not working properly, so implemented client side logout)
+// const handleLogout = async () => {
+//   try {
+//     const res = await fetch("http://localhost:8080/auth/logout", {
+//       method: "GET",
+//       credentials: "include",
+//     });
+
+//     if (res.ok) {
+//       setUser(null);
+// } else {
+//   console.error("Logout failed");
+// }
+// } catch (error) {
+// console.error("Error during logout:", error);
+// }

src/scss/components/_hero.scss

@@ -145,28 +145,89 @@ $cyber-black: #1a1a1a;
   &-content {
     position: relative;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     z-index: 2;
     width: 100%;
     max-width: 1200px;
     padding: 2rem;
     // Add a subtle backdrop filter to make content more readable against the matrix rain
     backdrop-filter: blur(2px);
+    
+    @media (max-width: 768px) {
+      flex-direction: column-reverse;
+      gap: 2rem;
+    }
   }
 
+  // Text container styling
+  &-text-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding-right: 2rem;
+    
+    @media (max-width: 768px) {
+      align-items: center;
+      text-align: center;
+      padding-right: 0;
+    }
+  }
+  
+  // Title styling
+  &-title {
+    font-size: 3.5rem;
+    font-weight: bold;
+    color: white;
+    margin-bottom: 1rem;
+    letter-spacing: 4px;
+    text-shadow: 0 0 10px rgba($neon-blue, 0.7);
+    animation: flicker 3s infinite alternate;
+    
+    &-highlight {
+      color: $neon-pink;
+      text-shadow: 0 0 10px rgba($neon-pink, 0.7);
+    }
+    
+    @media (max-width: 768px) {
+      font-size: 2.5rem;
+    }
+  }
+  
+  // Subtitle styling
+  &-subtitle {
+    font-size: 1.2rem;
+    color: rgba(white, 0.8);
+    margin-bottom: 2rem;
+    max-width: 500px;
+    line-height: 1.6;
+    letter-spacing: 1px;
+    
+    @media (max-width: 768px) {
+      font-size: 1rem;
+    }
+  }
+  
   // Logo styling
   &-logo-container {
     position: relative;
-    margin-bottom: 3rem;
+    flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
+    max-width: 50%;
+    
+    @media (max-width: 768px) {
+      max-width: 80%;
+      margin-bottom: 1rem;
+    }
   }
 
   &-logo {
-    max-width: 80%;
+    max-width: 100%;
     height: auto;
     border-radius: 8px;
     filter: drop-shadow(0 0 10px rgba($neon-blue, 0.7))
@@ -191,8 +252,8 @@ $cyber-black: #1a1a1a;
 
   // CTA button styling
   &-cta-container {
-    margin-top: 2rem;
     position: relative;
+    margin-top: 1rem;
   }
 
   &-cta {

src/scss/components/_navbar.scss

@@ -6,6 +6,9 @@ $neon-yellow: #f7f500;
 $dark-bg: #0d0221;
 $cyber-black: #1a1a1a;
 
+// Breakpoints
+$mobile-breakpoint: 768px;
+
 @keyframes scanline {
   0% {
     transform: translateY(-100%);
@@ -105,6 +108,29 @@ $cyber-black: #1a1a1a;
   }
 }
 
+@keyframes hamburger-pulse {
+  0% {
+    box-shadow: 0 0 5px $neon-pink, 0 0 10px $neon-pink;
+  }
+  50% {
+    box-shadow: 0 0 8px $neon-pink, 0 0 15px $neon-pink, 0 0 20px $neon-pink;
+  }
+  100% {
+    box-shadow: 0 0 5px $neon-pink, 0 0 10px $neon-pink;
+  }
+}
+
+@keyframes menu-reveal {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @keyframes neon-flicker {
   0%,
   19.999%,
@@ -156,6 +182,7 @@ $cyber-black: #1a1a1a;
   width: 100%;
   border-bottom: 1px solid $neon-pink;
   backdrop-filter: blur(5px);
+  transition: all 0.3s ease;
 
   // Glitch effect for the navbar
   &--glitch {
@@ -194,6 +221,53 @@ $cyber-black: #1a1a1a;
     }
   }
 
+  &__hamburger {
+    display: none;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 30px;
+    height: 22px;
+    cursor: pointer;
+    z-index: 1001;
+    position: relative;
+
+    @media (max-width: $mobile-breakpoint) {
+      display: flex;
+    }
+
+    &-line {
+      width: 100%;
+      height: 3px;
+      background-color: white;
+      border-radius: 2px;
+      position: relative;
+      transition: all 0.3s ease;
+      box-shadow: 0 0 5px $neon-pink, 0 0 10px $neon-pink;
+
+      &.active {
+        &:nth-child(1) {
+          transform: translateY(9.5px) rotate(45deg);
+        }
+
+        &:nth-child(2) {
+          opacity: 0;
+          transform: translateX(-20px);
+        }
+
+        &:nth-child(3) {
+          transform: translateY(-9.5px) rotate(-45deg);
+        }
+      }
+    }
+
+    &:hover {
+      .navbar__hamburger-line {
+        animation: hamburger-pulse 1.5s infinite;
+        box-shadow: 0 0 10px $neon-blue, 0 0 20px $neon-blue;
+      }
+    }
+  }
+
   &__greeting {
     display: flex;
     flex-direction: column;
@@ -208,6 +282,10 @@ $cyber-black: #1a1a1a;
     transform: translateX(-50%);
     overflow: hidden;
 
+    @media (max-width: $mobile-breakpoint) {
+      display: none;
+    }
+
     &-text {
       color: $neon-blue;
       font-size: 0.9rem;
@@ -241,14 +319,50 @@ $cyber-black: #1a1a1a;
     gap: 1.5rem;
     margin: 0;
     padding: 0;
+    transition: all 0.3s ease;
 
-    @media (max-width: 768px) {
+    @media (max-width: $mobile-breakpoint) {
+      position: fixed;
+      top: 0;
+      right: -100%;
+      width: 250px;
+      height: 100vh;
+      background-color: rgba($cyber-black, 0.95);
       flex-direction: column;
-      gap: 0.8rem;
+      gap: 1.5rem;
+      padding: 5rem 2rem 2rem;
+      z-index: 1000;
+      box-shadow: -5px 0 15px rgba($neon-purple, 0.5);
+      border-left: 1px solid $neon-pink;
+      backdrop-filter: blur(10px);
+      overflow-y: auto;
+      transition: right 0.4s cubic-bezier(0.77, 0.2, 0.05, 1);
+    }
+
+    &--open {
+      @media (max-width: $mobile-breakpoint) {
+        right: 0;
+
+        li {
+          animation: menu-reveal 0.5s ease forwards;
+          opacity: 0;
+
+          @for $i from 1 through 10 {
+            &:nth-child(#{$i}) {
+              animation-delay: 0.1s * $i;
+            }
+          }
+        }
+      }
     }
 
     li {
       position: relative;
+      width: 100%;
+
+      @media (max-width: $mobile-breakpoint) {
+        margin-bottom: 0.5rem;
+      }
     }
   }
 
@@ -265,6 +379,13 @@ $cyber-black: #1a1a1a;
     transition: all 0.3s ease;
     letter-spacing: 1px;
 
+    @media (max-width: $mobile-breakpoint) {
+      width: 100%;
+      padding: 0.8rem 1rem;
+      border: 1px solid rgba($neon-blue, 0.3);
+      margin-bottom: 0.5rem;
+    }
+
     &-icon {
       margin-right: 0.5rem;
       font-size: 1.2rem;
@@ -314,4 +435,22 @@ $cyber-black: #1a1a1a;
       }
     }
   }
+
+  // Mobile menu open state
+  &--menu-open {
+    @media (max-width: $mobile-breakpoint) {
+      &::after {
+        content: "";
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 999;
+        backdrop-filter: blur(3px);
+        animation: menu-reveal 0.3s ease forwards;
+      }
+    }
+  }
 }