diff --git a/.eslintrc.json b/.eslintrc.json index 93f7788..4e419a9 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,6 +1,13 @@ { "extends": [ + "next", "next/core-web-vitals", "plugin:cypress/recommended" - ] + ], + "globals": { + "React": "readonly" + }, + "rules": { + "no-unused-vars": "warn" + } } diff --git a/TODO b/TODO index 3bfc305..7afb942 100644 --- a/TODO +++ b/TODO @@ -1,28 +1,33 @@ -improve hamburger menu - button and menu +//TODO readme +---------------------------------------------------------------- -need a 'return to top' arrow button on smaller screens +//TODO hover on table needs fixing - this only seemed to happen once I moved the logic into its own hook <- error is occurring on all hovers at the moment. Client/SSR issue? -mobile map needs improving +//TODO font size on mobile screen -multi-language i18n support - https://nextjs.org/docs/app/building-your-application/routing/internationalization +//TODO need a 'return to top' arrow button on smaller screens -tests for tournois, testing the loading of map and table, then counting the markers +//TODO mobile map needs improving -logo for navbar and favicon +//TODO multi-language i18n support - https://nextjs.org/docs/app/building-your-application/routing/internationalization -hover on table needs fixing - this only seemed to happen once I moved the logic into its own hook <- error is occurring on all hovers at the moment. Client/SSR issue? +//TODO tests for tournois, testing the loading of map and table, then counting the markers -document my new hook <- consider removing as I believe this is the reason hover is broken +//TODO logo for navbar and favicon -error handling +//TODO document my new hook <- consider removing as I believe this is the reason hover is broken -e2e tests for tournament page: +//TODO error handling + +//TODO e2e tests for tournament page: - make sure number of markers = tournamentData.length -about page +//TODO about page -contact page needs working mailer +//TODO contact page needs working mailer -SEO +//TODO SEO -consider offering GraphQL support +//TODO consider offering GraphQL support + +//TODO move smaller ui components into a new folder, and make them reusable - such as using generic prop names diff --git a/app/globals.css b/app/globals.css index d29b10b..ce7a2fc 100644 --- a/app/globals.css +++ b/app/globals.css @@ -25,33 +25,3 @@ body { ) rgb(var(--background-start-rgb)); } -.toggle { - height: 2em; - width: 3em; - border-radius: 50px; - margin: auto; - background-image: linear-gradient(aqua, skyblue); - position: relative; - cursor: pointer; -} -.toggle-dark { - height: 2em; - width: 3em; - border-radius: 50px; - margin: auto; - background-image: linear-gradient(midnightblue, rebeccapurple); - position: relative; - cursor: pointer; -} -.theme-icon{ - margin-left: 0.2em; - height: 2em; - width: 1.2em; - color: yellow; -} - -.theme-icon-dark{ - height: 2em; - width: 1.2em; - margin-left: auto; -} \ No newline at end of file diff --git a/components/Hamburger.tsx b/components/Hamburger.tsx index 36f3c9c..abbace3 100644 --- a/components/Hamburger.tsx +++ b/components/Hamburger.tsx @@ -1,20 +1,41 @@ "use client"; import HamburgerMenu from "@/components/HamburgerMenu"; -import { useState } from "react"; +import { useRef, useState } from "react"; -// TODO make hamburger menu slide in from the right instead of conditional rendering const Hamburger = () => { const [menuVisible, setMenuVisible] = useState(false); + const hamburgerButtonRef = useRef(null); return ( <> - {" "} -
setMenuVisible(!menuVisible)}> -
-
-
+
setMenuVisible(!menuVisible)} + > +
+
+
- {menuVisible && } + { + + } ); }; diff --git a/components/HamburgerMenu.tsx b/components/HamburgerMenu.tsx index 00b5df3..37ce2c1 100644 --- a/components/HamburgerMenu.tsx +++ b/components/HamburgerMenu.tsx @@ -1,18 +1,84 @@ +interface HamburgerMenuState { + menuVisible: boolean; + setMenuVisible: Dispatch>; + hamburgerButtonRef: RefObject; +} + import Link from "next/link"; import ThemeSwitcher from "@/components/ThemeSwitcher"; +import { Dispatch, RefObject, SetStateAction, useRef, useState } from "react"; +import useHamburgerClose from "@/hooks/useHamburgerClose"; + +const HamburgerMenu = ({ + menuVisible, + setMenuVisible, + hamburgerButtonRef, +}: HamburgerMenuState) => { + const [mouseOverMenu, setMouseOverMenu] = useState(false); + const timeoutRef = useRef(); + const menuRef = useRef(null); + + const menuTimeout = () => { + timeoutRef.current = setTimeout(() => { + setMenuVisible(false); + setMouseOverMenu(false); + }, 2000); + }; + + const handleMouseEnterMenu = () => { + setMouseOverMenu(true); + clearTimeout(timeoutRef.current); + }; + + const handleMouseLeaveMenu = () => { + setMouseOverMenu(false); + clearTimeout(timeoutRef.current); + }; + + useHamburgerClose({ + menuVisible, + setMenuVisible, + menuRef, + hamburgerButtonRef, + mouseOverMenu, + setMouseOverMenu, + timeoutRef, + menuTimeout, + }); -const HamburgerMenu = () => { return ( -
-
    +
    +
    • - Tournois + + Tournois +
    • - Qui Sommes-Nous + + Qui Sommes-Nous +
    • - Contactez-Nous + + Contactez-Nous +
    • diff --git a/components/Navbar.tsx b/components/Navbar.tsx index fc714cb..fae9465 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -4,7 +4,7 @@ import Hamburger from "@/components/Hamburger"; export default function Navbar() { return ( -