Battlesnake/frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance Hero and Navbar components with cyberpunk effects and animations. Implement matrix rain background in Hero, add glitch effect to Navbar, and update styles. Remove unused assignment page styles.

Browse source
This commit is contained in:
Anton Kupriianov 2025-04-28 11:20:03 -07:00
parent 17f33651a6
commit 526b7bec18
12 changed files with 952 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

83
src/components/Navbar.jsx
View file

@ -1,36 +1,93 @@
import React from "react";
import React, { useState, useEffect } from "react";
import "../scss/styles.scss";
import "../scss/components/_navbar.scss";
import { Link } from "react-router-dom";
const Navbar = () => {
const [glitchEffect, setGlitchEffect] = useState(false);
const [activeLink, setActiveLink] = useState("/");
useEffect(() => {
// Set active link based on current path
setActiveLink(window.location.pathname);
// Random glitch effect
const glitchInterval = setInterval(() => {
setGlitchEffect(true);
setTimeout(() => setGlitchEffect(false), 200);
}, 3000);
return () => clearInterval(glitchInterval);
}, []);
return (
<nav className="navbar">
<div className="navbar__logo">MyApp</div>
<nav className={`navbar ${glitchEffect ? "navbar--glitch" : ""}`}>
<div className="navbar__logo">
<div className="navbar__logo-scanner"></div>
<span className="navbar__logo-text">
BATTLE<span className="navbar__logo-text">SNAKE</span>
</span>
</div>
<ul className="navbar__links">
<li>
<Link to="/" className="navbar__link">
Home
<Link
to="/"
className={`navbar__link ${
activeLink === "/" ? "navbar__link--active" : ""
}`}
>
<span className="navbar__link-icon">⚡</span>
<span className="navbar__link-text">HOME</span>
<span className="navbar__link-hover"></span>
</Link>
</li>
<li>
<Link to="/notebook" className="navbar__link">
NoteBook
<Link
to="/notebook"
className={`navbar__link ${
activeLink === "/notebook" ? "navbar__link--active" : ""
}`}
>
<span className="navbar__link-icon">📓</span>
<span className="navbar__link-text">NOTEBOOK</span>
<span className="navbar__link-hover"></span>
</Link>
</li>
<li>
<Link to="/assignment" className="navbar__link">
Assignment
<Link
to="/assignment"
className={`navbar__link ${
activeLink === "/assignment" ? "navbar__link--active" : ""
}`}
>
<span className="navbar__link-icon">🎯</span>
<span className="navbar__link-text">ASSIGNMENT</span>
<span className="navbar__link-hover"></span>
</Link>
</li>
<li>
<Link to="/editor" className="navbar__link">
Editor
<Link
to="/editor"
className={`navbar__link ${
activeLink === "/editor" ? "navbar__link--active" : ""
}`}
>
<span className="navbar__link-icon">💻</span>
<span className="navbar__link-text">EDITOR</span>
<span className="navbar__link-hover"></span>
</Link>
</li>
<li>
<Link to="/login" className="navbar__link">
Login
<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>