fix navbar and hero on homepage
This commit is contained in:
Anton Kupriianov
parent
7eec9b4821
commit
1f43a1bad8
4 changed files with 333 additions and 32 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<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
|
||||
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>
|
||||
{user ? (
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleLogout();
|
||||
}}
|
||||
className={`navbar__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);
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue