From 9b12d79afd9d9980ffe73ad3b104b21e95d0d6ef Mon Sep 17 00:00:00 2001
From: Afonso Santos <afonso.ds33@gmail.com>
Date: Mon, 16 Oct 2023 19:32:57 +0100
Subject: [PATCH] Minimal adjust

---
 .../landing/Header/NavBar/NavBar.tsx          | 172 ++++++------------
 1 file changed, 59 insertions(+), 113 deletions(-)

diff --git a/packages/ui/components/landing/Header/NavBar/NavBar.tsx b/packages/ui/components/landing/Header/NavBar/NavBar.tsx
index 0801c778..4aa72b1e 100644
--- a/packages/ui/components/landing/Header/NavBar/NavBar.tsx
+++ b/packages/ui/components/landing/Header/NavBar/NavBar.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import Link from "next/link";
-import { Grid, Dropdown, Menu, Space } from "antd";
+import { Grid, Space } from "antd";
 
 import { DownOutlined, DashboardOutlined, LogoutOutlined } from "@ant-design/icons";
 
@@ -13,12 +13,10 @@ import { getUserInitials } from "../utils";
 import styles from "./style.module.css";
 
 import { Fragment } from 'react'
-import { Transition, Popover } from '@headlessui/react'
+import { Transition, Menu } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ')
-}
+
 
 const { useBreakpoint } = Grid;
 
@@ -36,24 +34,6 @@ const Entry = ({ href, text }: EntryProps) => (
 interface UserDropDownProps {
   logout: () => void;
 }
-// const EventosDropDown = () => (
-//   <ul>
-//     <li className="flex items-center  text-base justify-start gap-x-2">
-//       <Menu>
-//         <Menu.Item>
-//           <a href="/web/dojocon">Dojo Con</a>
-//         </Menu.Item>
-//         <Menu.Item>
-//           <a href="/web/codercamp">Coder Camp</a>
-//         </Menu.Item>
-//         {/* <Menu.Item>
-//         <a href="/web/dojocare">Dojo Care</a>
-//       </Menu.Item> */}
-//       </Menu>
-//     </li>
-//   </ul>
-// );
-
 
 const UserDropDown = ({ logout }: UserDropDownProps) => (
   <ul>
@@ -94,107 +74,73 @@ function NavBar({ landing = true }: any) {
   const [userDropdownVisible, setUserDropdownVisible] = useState(false);
   const [eventosDropdownVisible, setEventosDropdownVisible] = useState(false);
 
+  const closeEventsDropdown = () => {
+    setEventosDropdownVisible(false);
+  }
+
   const closeUserDropdown = () => {
     setUserDropdownVisible(false);
   };
+
   if (screens.md) {
     return (
       <ul className="flex items-center gap-5 text-base uppercase text-black md:flex">
         {MENU_ENTRIES.map(({ key, text }) => (
           <Entry href={key} text={text} />
         ))}
-
-        <Popover as="div" className=" relative inline-block text-left">
-          {({ open }) => (
-            <>
-              <div>
-                <Popover.Button className=" cursor-pointer dark:text-white inline-flex justify-center gap-x-0.5 rounded-md bg-white px-2 py-1 text-sm uppercase text-black border border-transparent  md:flex"
-                  onClick={() => {
-                    setEventosDropdownVisible(!eventosDropdownVisible);
-                    closeUserDropdown();
-                  }}
-                >
-                  <span className="hover:text-primary flex items-center gap-5 text-base uppercase text-black md:flex">
-                    Eventos
-                  </span>
-
-                </Popover.Button>
-              </div>
-              <Transition
-                as={Fragment}
-                show={open}
-                enter="transition ease-out duration-300"
-                enterFrom="opacity-0 -translate-y-2"
-                enterTo="opacity-100 translate-y-0"
-                leave="transition ease-in duration-200"
-                leaveFrom="opacity-100 translate-y-0"
-                leaveTo="opacity-0 -translate-y-2"
-              >
-                <Popover.Panel static className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                  <div className="py-1">
-                    <Popover.Button>
-                      <a
-                        href="/web/dojocon"
-                        className={classNames('flex items-center text-base', 'block px-4 py-2 text-sm')}
-                      >
-                        Dojo Con
-                      </a>
-                    </Popover.Button>
-                    <Popover.Button>
-                      <a
-                        href="/web/codercamp"
-                        className={classNames('flex items-center text-base', 'block px-4 py-2 text-sm')}
-                      >
-                        Coder Camp
-                      </a>
-                    </Popover.Button>
-                    <Popover.Button>
-                      <a
-                        href="/web/dojocare"
-                        className={classNames('flex items-center text-base', 'block px-4 py-2 text-sm')}
-                      >
-                        Dojo Care
-                      </a>
-                    </Popover.Button>
-                  </div>
-                </Popover.Panel>
-              </Transition>
-            </>
+        <div className="relative inline-block text-left">
+          <div className="cursor-pointer flex items-center gap-x-1.5"
+            onClick={() => {
+              setEventosDropdownVisible(!eventosDropdownVisible);
+              closeUserDropdown();
+            }}>
+            Eventos
+            <ChevronDownIcon className="-mr-1 h-5 w-5 text-gray-400" aria-hidden="true" />
+          </div>
+          {eventosDropdownVisible && (
+            <div className="absolute right-0 z-10 mt-2 w-40 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 text-base uppercase text-black focus:outline-none">
+              <a href="/web/dojocon" className="block px-3 py-2 text-xs">Dojo Con</a>
+              <a href="/web/codercamp" className="block px-3 py-2 text-xs">Coder Camp</a>
+              {/* <a href="/web/dojocare" className="block px-3 py-2 text-xs">Dojo Care</a> */}
+            </div>
           )}
-        </Popover>
-
-
-        {user ? (
-          <li
-            className="text-bold cursor-pointer"
-            onClick={() => setUserDropdownVisible(!userDropdownVisible)}
-          >
-            {user.photo ? (
-              /* eslint-disable @next/next/no-img-element */
-              <img
-                className="z-50 rounded-full"
-                src={user.photo}
-                width={50}
-                height={50}
-              />
-            ) : (
-              <div className="border-primary relative z-50 select-none rounded-full border-2 px-2 py-1 text-lg">
-                {getUserInitials(user)}
-              </div>
-            )}
-            <div
-              className={`absolute z-10 mt-2 ${userDropdownVisible
-                ? "opacity-100"
-                : "invisible -translate-y-full opacity-0"
-                } -translate-x-1/4 transform px-4 py-2 transition-all duration-300`}
+        </div>
+        {
+          user ? (
+            <li
+              className="text-bold cursor-pointer"
+              onClick={() => {
+                setUserDropdownVisible(!userDropdownVisible)
+                closeEventsDropdown()
+              }}
             >
-              <UserDropDown logout={logout} />
-            </div>
-          </li>
-        ) : (
-          <LoginButton isLoading={isLoading} />
-        )}
-      </ul>
+              {user.photo ? (
+                /* eslint-disable @next/next/no-img-element */
+                <img
+                  className="z-50 rounded-full"
+                  src={user.photo}
+                  width={50}
+                  height={50}
+                />
+              ) : (
+                <div className="border-primary relative z-50 select-none rounded-full border-2 px-2 py-1 text-lg">
+                  {getUserInitials(user)}
+                </div>
+              )}
+              <div
+                className={`absolute z-10 mt-2 ${userDropdownVisible
+                  ? "opacity-100"
+                  : "invisible -translate-y-full opacity-0"
+                  } -translate-x-1/4 transform px-4 py-2 transition-all duration-300`}
+              >
+                <UserDropDown logout={logout} />
+              </div>
+            </li>
+          ) : (
+            <LoginButton isLoading={isLoading} />
+          )
+        }
+      </ul >
     );
   }