Handlenavigate

2025-10-26 17:46:21 +01:00
parent 18110ba410
commit 94943d4988
4 changed files with 126 additions and 68 deletions
@@ -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 />
@@ -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>
@@ -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>
@@ -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("/"),
+  }
+}