From 1f43a1bad839eb0d0540c4ef9401d972507097dc Mon Sep 17 00:00:00 2001 From: Anton Kupriianov Date: Wed, 30 Apr 2025 15:45:44 -0700 Subject: [PATCH] fix navbar and hero on homepage --- src/components/Hero.jsx | 25 ++- src/components/Navbar.jsx | 126 ++++++++++++--- src/scss/components/{Hero.scss => _hero.scss} | 71 ++++++++- src/scss/components/_navbar.scss | 143 +++++++++++++++++- 4 files changed, 333 insertions(+), 32 deletions(-) rename src/scss/components/{Hero.scss => _hero.scss} (81%) diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index b6f7ac3..718b553 100644 --- a/src/components/Hero.jsx +++ b/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() {
+
+

+ BATTLESNAKE +

+

+ Enter the digital arena and code your way to victory +

+ +
+ +
+
+
- -
- -
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 3b48d56..f507995 100644 --- a/src/components/Navbar.jsx +++ b/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); - console.log("User display name:", user.displayName); + //checking user response + // 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 ( -