owenrees/echecsfrance
1
0
Fork 0
mirror of https://github.com/TheRealOwenRees/echecsfrance.git synced 2026-07-23 04:26:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve mobile burger menu

Browse Source
This commit is contained in:
Timothy Armes
2023-07-20 17:16:55 +02:00
parent 66a4a03c6a
commit 81c5f0e0e1
4 changed files with 40 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/settings.json
Vendored
+1
View File
@@ -1,6 +1,7 @@
{
"cSpell.words": [
"approximative",
"Armes",
"colour",
"colours",
"contactez",
app/[lang]/components/Hamburger.tsx
+16 -10
View File
@@ -1,7 +1,9 @@
"use client";
import HamburgerMenu from "./HamburgerMenu";
import { useRef, useState } from "react";
import { twMerge } from "tailwind-merge";
import HamburgerMenu from "./HamburgerMenu";
const Hamburger = () => {
const [menuVisible, setMenuVisible] = useState(false);
@@ -15,19 +17,23 @@ const Hamburger = () => {
onClick={() => setMenuVisible(!menuVisible)}
>
<div
className={`h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-in-out dark:bg-white ${
menuVisible ? "translate-x-[1px] translate-y-2.5 rotate-45" : ""
}`}
className={twMerge(
"h-0.5 w-8 bg-gray-600 transition-all duration-300 ease-in-out dark:bg-white",
menuVisible &&
"translate-x-[1px] translate-y-2.5 rotate-45 bg-white",
)}
></div>
<div
className={`h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-linear dark:bg-white ${
menuVisible ? "rotate-0 scale-0 opacity-0" : ""
}`}
className={twMerge(
"h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-linear dark:bg-white",
menuVisible && "scale-0 bg-white opacity-0",
)}
></div>
<div
className={`h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-in-out dark:bg-white ${
menuVisible ? "-translate-y-2.5 -rotate-45" : ""
}`}
className={twMerge(
"h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-in-out dark:bg-white",
menuVisible && "-translate-y-2.5 -rotate-45 bg-white",
)}
></div>
</div>
app/[lang]/components/HamburgerMenu.tsx
+10 -7
View File
@@ -5,6 +5,7 @@ interface HamburgerMenuState {
}
import { Dispatch, RefObject, SetStateAction, useRef, useState } from "react";
import { twMerge } from "tailwind-merge";
import Link from "next-intl/link";
import { useTranslations } from "next-intl";
@@ -51,14 +52,16 @@ const HamburgerMenu = ({
return (
<div
ref={menuRef}
className={`fixed right-0 top-0 ${
menuVisible ? "" : "translate-x-full"
} z-[9999] flex bg-primary-600 transition-transform duration-200 ease-linear dark:bg-gray-600 md:hidden`}
className={twMerge(
"fixed right-0 top-0 z-[9999] h-[calc(100svh-5rem)] w-full",
"flex items-center justify-center bg-primary-600 transition-transform duration-200 ease-linear dark:bg-gray-600 md:hidden",
!menuVisible && "translate-x-full",
)}
onMouseEnter={handleMouseEnterMenu}
onMouseLeave={handleMouseLeaveMenu}
>
<ul className="list-reset mt-16 p-5 text-white">
<li className="py-5">
<ul className="list-reset text-white">
<li className="py-5 text-center text-xl">
<Link
href="/tournois"
className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
@@ -66,7 +69,7 @@ const HamburgerMenu = ({
{t("tournaments")}
</Link>
</li>
<li className="py-5">
<li className="py-5 text-center text-xl">
<Link
href="/qui-sommes-nous"
className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
@@ -74,7 +77,7 @@ const HamburgerMenu = ({
{t("about")}
</Link>
</li>
<li className="py-5">
<li className="py-5 text-center text-xl">
<Link
href="/contactez-nous"
className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
app/[lang]/components/Navbar.tsx
+13 -14
View File
@@ -17,18 +17,17 @@ export default function Navbar() {
className="relative mt-0 h-16 w-full overflow-x-clip border-b-[1px] bg-white px-5 dark:border-gray-700 dark:bg-gray-800"
data-test="navbar"
>
<div className="container mx-auto flex h-full items-center">
<div className="flex w-full justify-center font-extrabold md:w-1/2 md:justify-start">
<Link
className="text-gray-900 no-underline hover:no-underline dark:text-white"
href="/"
>
<span className="font-title text-2xl text-gray-800 dark:text-white">
{t("title")}
</span>
</Link>
</div>
<div className="pb-2 md:hidden" data-test="mobile-menu">
<div className="container mx-auto flex h-full items-center justify-between">
<Link
className="font-extrabold text-gray-900 no-underline hover:no-underline dark:text-white"
href="/"
>
<span className="font-title text-2xl text-gray-800 dark:text-white">
{t("title")}
</span>
</Link>
<div className="md:hidden" data-test="mobile-menu">
<Hamburger />
</div>
@@ -36,9 +35,9 @@ export default function Navbar() {
className="hidden h-full justify-center md:flex md:w-1/2 md:justify-end"
data-test="desktop-menu"
>
<ul className="list-reset flex h-full flex-1 items-center justify-around text-gray-900 no-underline dark:text-white md:flex-none">
<ul className="list-reset flex h-full flex-1 items-center gap-14 text-gray-900 no-underline dark:text-white md:flex-none">
{links.map(({ title, route }) => (
<li key={route} className="mr-10 h-full">
<li key={route} className="h-full">
<Link
className="inline-flex h-full items-center border-b-4 border-t-4 border-transparent transition-all duration-300 ease-in-out hover:border-b-primary-600"
href={route}