From 94943d49881cefd7b0ebe09110881a58ae230f3f Mon Sep 17 00:00:00 2001
From: Barni03 <pisbarni@gmail.com>
Date: Sun, 26 Oct 2025 17:46:21 +0100
Subject: [PATCH] Handlenavigate

---
 .../src/components/Footer/Footer.jsx          | 50 ++++++----
 .../src/components/Navbar/Navbar.jsx          | 92 +++++++++++++------
 .../src/pages/Landing/Landingpage.jsx         | 24 +----
 .../utils/HandleNavigate/HandleNavigate.jsx   | 28 ++++++
 4 files changed, 126 insertions(+), 68 deletions(-)
 create mode 100644 SerpentRace_Frontend/src/utils/HandleNavigate/HandleNavigate.jsx

diff --git a/SerpentRace_Frontend/src/components/Footer/Footer.jsx b/SerpentRace_Frontend/src/components/Footer/Footer.jsx
index 1c2f277e..2c04d798 100644
--- a/SerpentRace_Frontend/src/components/Footer/Footer.jsx
+++ b/SerpentRace_Frontend/src/components/Footer/Footer.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react"
-import { Link } from "react-router-dom"
 import Logo from "../../assets/pictures/Logo"
+import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
 
 const ArrowUpIcon = () => <span style={{ fontSize: "1.25rem" }}>↑</span>
 
@@ -8,6 +8,9 @@ const Footer = () => {
   const [isVisible, setIsVisible] = useState(false)
   const footerRef = useRef(null)
 
+  // ✅ Használjuk a navigációs függvényeket
+  const { goLanding, goAbout, goContacts } = HandleNavigate()
+
   useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -16,14 +19,10 @@ const Footer = () => {
       { threshold: 0.3 }
     )
 
-    if (footerRef.current) {
-      observer.observe(footerRef.current)
-    }
+    if (footerRef.current) observer.observe(footerRef.current)
 
     return () => {
-      if (footerRef.current) {
-        observer.unobserve(footerRef.current)
-      }
+      if (footerRef.current) observer.unobserve(footerRef.current)
     }
   }, [])
 
@@ -40,10 +39,18 @@ const Footer = () => {
       <div className="max-w-6xl mx-auto flex flex-wrap justify-between items-start gap-8 px-4">
         {/* Logó */}
         <div className="flex flex-col items-center">
-          <a href="/" className="hover:scale-105 hover:brightness-110">
+          <button
+            onClick={goLanding}
+            className="hover:scale-105 hover:brightness-110 transition-transform"
+          >
             <Logo size={100} />
-          </a>
-          <span className="font-extrabold text-xl mt-2 tracking-wide">SerpentRace</span>
+          </button>
+          <button
+            onClick={goLanding}
+            className="font-extrabold text-xl mt-2 tracking-wide text-white hover:text-green-500 transition-colors"
+          >
+            SerpentRace
+          </button>
         </div>
 
         {/* Oldalak */}
@@ -51,15 +58,24 @@ const Footer = () => {
           <span className="text-lg font-semibold text-green-600 underline underline-offset-4 mb-2 drop-shadow-sm">
             Oldalak
           </span>
-          <a href="/" className="hover:underline hover:text-green-500">
+          <button
+            onClick={goLanding}
+            className="text-left hover:underline hover:text-green-500 transition-colors"
+          >
             Főoldal
-          </a>
-          <a href="/about" className="hover:underline hover:text-green-500">
+          </button>
+          <button
+            onClick={goAbout}
+            className="text-left hover:underline hover:text-green-500 transition-colors"
+          >
             Rólunk
-          </a>
-          <a href="/contacts" className="hover:underline hover:text-green-500">
+          </button>
+          <button
+            onClick={goContacts}
+            className="text-left hover:underline hover:text-green-500 transition-colors"
+          >
             Kapcsolat
-          </a>
+          </button>
         </div>
 
         {/* Közösség */}
@@ -103,7 +119,7 @@ const Footer = () => {
       {isVisible && (
         <button
           onClick={scrollToTop}
-          className="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white p-3 rounded-full shadow-lg hover:scale-110"
+          className="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white p-3 rounded-full shadow-lg hover:scale-110 transition-transform"
           aria-label="Ugrás az oldal tetejére"
         >
           <ArrowUpIcon />
diff --git a/SerpentRace_Frontend/src/components/Navbar/Navbar.jsx b/SerpentRace_Frontend/src/components/Navbar/Navbar.jsx
index 68d471aa..6e13b38e 100644
--- a/SerpentRace_Frontend/src/components/Navbar/Navbar.jsx
+++ b/SerpentRace_Frontend/src/components/Navbar/Navbar.jsx
@@ -1,20 +1,26 @@
 import React, { useState } from "react"
 import Logo from "../../assets/pictures/Logo"
-import { Link, useNavigate } from "react-router-dom"
+import { Link } from "react-router-dom"
+import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"// ✅ importáld a navigációs hookot
 
-const navLinkClass = "px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10"
+const navLinkClass =
+  "px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10"
 const navLinkClassPlay =
   "px-4 py-2 rounded-lg text-white bg-white/12 hover:bg-white/20 transition-all duration-200"
 
 const Navbar = () => {
   const [menuOpen, setMenuOpen] = useState(false)
-  const navigate = useNavigate()
-  const isLoggedIn = Boolean(localStorage.getItem("authLevel") && localStorage.getItem("username"))
+  const isLoggedIn = Boolean(
+    localStorage.getItem("authLevel") && localStorage.getItem("username")
+  )
 
+  // ✅ Használjuk a HandleNavigate hookot
+  const { goLanding, goAbout, goHome, goLogin, goContacts } = HandleNavigate()
+
+  // ✅ Logout logika
   const handleLogout = () => {
-    localStorage.removeItem("authLevel")
-    localStorage.removeItem("username")
-    navigate("/")
+    localStorage.clear()
+    goLanding()
   }
 
   return (
@@ -23,41 +29,56 @@ const Navbar = () => {
         <div className="flex justify-between h-16 items-center">
           {/* Logo + Brand */}
           <div className="flex-shrink-0 flex items-center gap-2">
-            <Link to="/" className="flex items-center mt-1 h-9">
+            <button onClick={goLanding} className="flex items-center mt-1 h-9">
               <Logo size={36} />
-            </Link>
-            <Link to="/" className="flex items-center h-9 text-white font-bold text-2xl tracking-tight">
+            </button>
+            <button
+              onClick={goLanding}
+              className="flex items-center h-9 text-white font-bold text-2xl tracking-tight"
+            >
               SerpentRace
-            </Link>
+            </button>
           </div>
 
           {/* Desktop Menu */}
           <div className="hidden md:flex items-center space-x-6">
             {/* Bal oldali linkek */}
-            <Link to="/" className={navLinkClass}>Főoldal</Link>
-            <Link to="/about" className={navLinkClass}>Rólunk</Link>
-            <Link to="/contacts" className={navLinkClass}>Kapcsolat</Link>
+            <button onClick={goLanding} className={navLinkClass}>
+              Főoldal
+            </button>
+            <button onClick={goAbout} className={navLinkClass}>
+              Rólunk
+            </button>
+            <button onClick={goContacts} className={navLinkClass}>
+              Kapcsolat
+            </button>
 
             {/* Csak bejelentkezve */}
             {isLoggedIn && (
               <>
-                <Link to="/decks" className={navLinkClass}>Paklik</Link>
-                <Link to="/report" className={navLinkClass}>Statisztikák</Link>
+                <Link to="/decks" className={navLinkClass}>
+                  Paklik
+                </Link>
+                <Link to="/report" className={navLinkClass}>
+                  Statisztikák
+                </Link>
               </>
             )}
 
             {/* Játék gomb */}
-            <Link to="/home" className={navLinkClassPlay}>Játék</Link>
+            <button onClick={goHome} className={navLinkClassPlay}>
+              Játék
+            </button>
 
             {/* Jobb oldali akciók */}
             {!isLoggedIn ? (
               <div className="flex items-center space-x-4">
-                <Link
-                  to="/login"
+                <button
+                  onClick={goLogin}
                   className="px-4 py-2 rounded-lg hover:bg-white/20 text-white font-semibold transition-all"
                 >
                   Bejelentkezés
-                </Link>
+                </button>
 
                 {/* Elválasztó vonal */}
                 <div className="w-px h-10 bg-white/100"></div>
@@ -108,9 +129,19 @@ const Navbar = () => {
                 xmlns="http://www.w3.org/2000/svg"
               >
                 {menuOpen ? (
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
                 ) : (
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8h16M4 16h16" />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 8h16M4 16h16"
+                  />
                 )}
               </svg>
             </button>
@@ -121,26 +152,27 @@ const Navbar = () => {
       {/* Mobile Menu */}
       {menuOpen && (
         <div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
-          <Link to="/" onClick={() => setMenuOpen(false)} className={navLinkClass}>Főoldal</Link>
-          <Link to="/about" onClick={() => setMenuOpen(false)} className={navLinkClass}>Rólunk</Link>
-          <Link to="/contacts" onClick={() => setMenuOpen(false)} className={navLinkClass}>Kapcsolat</Link>
+          <button onClick={() => { goLanding(); setMenuOpen(false) }} className={navLinkClass}>Főoldal</button>
+          <button onClick={() => { goAbout(); setMenuOpen(false) }} className={navLinkClass}>Rólunk</button>
+          <button onClick={() => { goContacts(); setMenuOpen(false) }} className={navLinkClass}>Kapcsolat</button>
+
           {isLoggedIn && (
             <>
               <Link to="/decks" onClick={() => setMenuOpen(false)} className={navLinkClass}>Paklik</Link>
               <Link to="/report" onClick={() => setMenuOpen(false)} className={navLinkClass}>Statisztikák</Link>
             </>
           )}
-          <Link to="/home" onClick={() => setMenuOpen(false)} className={navLinkClassPlay}>Játék</Link>
+
+          <button onClick={() => { goHome(); setMenuOpen(false) }} className={navLinkClassPlay}>Játék</button>
 
           {!isLoggedIn ? (
             <div className="flex flex-col space-y-2">
-              <Link
-                to="/login"
-                onClick={() => setMenuOpen(false)}
+              <button
+                onClick={() => { goLogin(); setMenuOpen(false) }}
                 className="block px-3 py-2 rounded-lg hover:bg-white/20 text-white font-semibold transition-all"
               >
                 Bejelentkezés
-              </Link>
+              </button>
 
               {/* Elválasztó vonal mobilon */}
               <div className="w-full h-px bg-white/30"></div>
diff --git a/SerpentRace_Frontend/src/pages/Landing/Landingpage.jsx b/SerpentRace_Frontend/src/pages/Landing/Landingpage.jsx
index 3b1f8a8a..21f3bf83 100644
--- a/SerpentRace_Frontend/src/pages/Landing/Landingpage.jsx
+++ b/SerpentRace_Frontend/src/pages/Landing/Landingpage.jsx
@@ -7,28 +7,10 @@ import Navbar from "../../components/Navbar/Navbar"
 import Footer from "../../components/Footer/Footer.jsx"
 import Background from "../../assets/backgrounds/Background.jsx"
 import LandingPage from "../../components/Landingpage/LandingPage.jsx"
+import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate.jsx"
 
 export default function LandingPageMain() {
-  const navigate = useNavigate();
-
-  const handleNavigateToPlay = () => {
-    navigate("/login", { preventScrollReset: false });
-    window.scrollTo(0, 0);
-  };
-
-  const handleNavigateToAuth = () => {
-    navigate("/companies", { preventScrollReset: false });
-    window.scrollTo(0, 0);
-  };
-
-  const handleNavigateToGame = () => {
-    navigate("/home", { preventScrollReset: false });
-    window.scrollTo(0, 0);
-  };
-
-  const handleNavigateToContacts = () => {
-    navigate("/contacts"); 
-  };
+  const { goHome, goLogin, goContacts, goAuth,  } = HandleNavigate()
 
   return (
     <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
@@ -39,7 +21,7 @@ export default function LandingPageMain() {
         <Navbar />
       </div>
       <main className="flex-1 flex flex-col items-center justify-start py-15 min-h-0 mt-[64px]">
-        <LandingPage onNavigateToContacts={handleNavigateToContacts} onNavigateToPlay={handleNavigateToPlay} onNavigateToAuth={handleNavigateToAuth} onNavigateToGame={handleNavigateToGame} />
+        <LandingPage onNavigateToContacts={goContacts} onNavigateToPlay={goLogin} onNavigateToAuth={goAuth} onNavigateToGame={goHome} />
       </main>
       <Footer />
     </div>
diff --git a/SerpentRace_Frontend/src/utils/HandleNavigate/HandleNavigate.jsx b/SerpentRace_Frontend/src/utils/HandleNavigate/HandleNavigate.jsx
new file mode 100644
index 00000000..3e35b5d4
--- /dev/null
+++ b/SerpentRace_Frontend/src/utils/HandleNavigate/HandleNavigate.jsx
@@ -0,0 +1,28 @@
+// src/hooks/useAppNavigation.jsx
+import { useNavigate } from "react-router-dom"
+
+/**
+ * Egy általános navigációs helper hook, amit bármelyik komponensben használhatsz.
+ * Minden funkció automatikusan a megfelelő útvonalra visz és visszagörget az oldal tetejére.
+ */
+export default function HandleNavigate() {
+  const navigate = useNavigate()
+
+  const scrollTop = () => window.scrollTo(0, 0)
+
+  const goTo = (path, preventScrollReset = false) => {
+    navigate(path, { preventScrollReset })
+    scrollTop()
+  }
+
+  return {
+    goTo, // általános útvonalváltó
+    goHome: () => goTo("/home"),
+    goLogin: () => goTo("/login"),
+    goAuth: () => goTo("/register"),
+    goCompanies: () => goTo("/companies"),
+    goContacts: () => goTo("/contacts"),
+    goAbout: () => goTo("/about"),
+    goLanding: () => goTo("/"),
+  }
+}