ourworld_web/hero_web_try1
26
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
despiegk 2025-08-03 07:43:34 +02:00
parent 8efd162ac3
commit 51900b05bf
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Navigation.jsx
View File

@ -1,8 +1,18 @@
import React from 'react'; import React, { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
const Navigation = () => { const Navigation = () => {
const location = useLocation(); const location = useLocation();
const [isScrolled, setIsScrolled] = useState(false);
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 0);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const navItems = [ const navItems = [
{ path: '/', label: 'HOME' }, { path: '/', label: 'HOME' },
@ -13,10 +23,10 @@ const Navigation = () => {
]; ];
return ( return (
<nav className="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-md border-b border-white/10"> <nav className={`fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-md border-b border-white/10 transition-all duration-300 ${isScrolled ? 'py-3' : 'py-4'}`}>
<div className="max-w-7xl mx-auto px-6 py-4"> <div className="max-w-7xl mx-auto px-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Link to="/" className="text-2xl font-bold text-white"> <Link to="/" className={`font-bold text-white transition-all duration-300 ${isScrolled ? 'text-xl' : 'text-2xl'}`}>
HERO HERO
</Link> </Link>
<div className="hidden md:flex space-x-8"> <div className="hidden md:flex space-x-8">