Adjustmentas drop down

coderdojobraga · Oct 15, 2023 · 2afae46 · 2afae46
1 parent 27a71d4
commit 2afae46
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 26 deletions.
diff --git a/packages/ui/components/landing/Header/NavBar/NavBar.tsx b/packages/ui/components/landing/Header/NavBar/NavBar.tsx
@@ -12,6 +12,13 @@ import { getUserInitials } from "../utils";
 
 import styles from "./style.module.css";
 
+import { Fragment } from 'react'
+import { Transition, Popover } from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ')
+}
 
 const { useBreakpoint } = Grid;
 
@@ -29,23 +36,23 @@ 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 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) => (
@@ -85,19 +92,77 @@ function NavBar({ landing = true }: any) {
   const { user, isLoading, logout } = useAuth();
 
   const [userDropdownVisible, setUserDropdownVisible] = useState(false);
+  const [eventosDropdownVisible, setEventosDropdownVisible] = useState(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} />
         ))}
 
-        <Dropdown  arrow={false} overlay={EventosDropDown} placement="bottomRight">
-          <Space>
-            Eventos <DownOutlined />
-          </Space>
-        </Dropdown>
+        <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>
+            </>
+          )}
+        </Popover>
+
 
         {user ? (
           <li
@@ -129,8 +194,6 @@ function NavBar({ landing = true }: any) {
         ) : (
           <LoginButton isLoading={isLoading} />
         )}
-
-
       </ul>
     );
   }

diff --git a/packages/ui/components/landing/Header/config.ts b/packages/ui/components/landing/Header/config.ts
@@ -5,7 +5,5 @@ export const MENU_ENTRIES = [
   { key: "/web/team", text: "Equipa" },
   // { key: "/web/hall-of-fame", text: "Hall of Fame" },
   { key: "/web/faqs", text: "Faqs" },
-  // { key: "/web/dojocon", text: "DojoCon" },
-  { key: "/web/codercamp", text: "Coder Camp" },
   { key: "/blog", text: "Blog" },
 ];