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

Avatar with drop down menu for accessing zones and signing out

Browse Source
This commit is contained in:
Timothy Armes
2024-04-12 14:54:44 +02:00
parent 860644bd9f
commit cfbba733c2
14 changed files with 255 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[locale]/(main)/components/HamburgerMenu.tsx
+26 -18
View File
@@ -3,11 +3,13 @@ import { useTranslations } from "next-intl";
import { twMerge } from "tailwind-merge";
import { burgerMenuIsOpenAtom } from "@/atoms";
import { useAuthMenuOptions } from "@/hooks/useAuthMenuOptions";
import { Link } from "@/utils/navigation";
const HamburgerMenu = () => {
const t = useTranslations("Nav");
const [burgerMenuIsOpen, setBurgerMenuIsOpen] = useAtom(burgerMenuIsOpenAtom);
const menuItems = useAuthMenuOptions();
const closeMenu = () => setBurgerMenuIsOpen(false);
@@ -20,35 +22,41 @@ const HamburgerMenu = () => {
)}
>
<ul className="list-reset text-white">
<li className="py-5 text-center text-xl">
<Link
onClick={closeMenu}
href="/tournaments"
className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
>
<li className="py-3 text-center text-xl">
<Link onClick={closeMenu} href="/tournaments">
{t("tournaments")}
</Link>
</li>
<li className="py-5 text-center text-xl">
<Link
onClick={closeMenu}
href="/clubs"
className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
>
<li className="py-3 text-center text-xl">
<Link onClick={closeMenu} href="/clubs">
{t("clubs")}
</Link>
</li>
<li className="py-5 text-center text-xl">
<Link
onClick={closeMenu}
href="/elo"
className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
>
<li className="py-3 text-center text-xl">
<Link onClick={closeMenu} href="/elo">
{t("elo")}
</Link>
</li>
<hr className="my-5" />
{menuItems.map(({ title, onClick, className, disabled }, i) => (
<li key={i} className="py-3 text-center text-xl">
<button
type="button"
disabled={disabled}
className={className}
onClick={() => {
onClick();
closeMenu();
}}
>
{title}
</button>
</li>
))}
</ul>
</div>
);