Avatar with drop down menu for accessing zones and signing out

src/app/[locale]/(main)/components/HamburgerMenu.tsx

@@ -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>
   );

src/app/[locale]/(main)/components/Navbar.tsx

@@ -15,10 +15,7 @@ export default function Navbar() {
   ] as const;
 
   return (
-    <nav
-      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"
-    >
+    <nav 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">
       <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"
@@ -33,10 +30,7 @@ export default function Navbar() {
           <Hamburger />
         </div>
 
-        <div
-          className="hidden h-full justify-center md:flex md:w-1/2 md:justify-end"
-          data-test="desktop-menu"
-        >
+        <div className="hidden h-full justify-center md:flex md:w-1/2 md:justify-end">
           <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="h-full">