add dropdown

coderdojobraga · Oct 14, 2023 · 27a71d4 · 27a71d4
1 parent bd08d0f
commit 27a71d4
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 13 deletions.
diff --git a/packages/ui/components/landing/Header/NavBar/NavBar.tsx b/packages/ui/components/landing/Header/NavBar/NavBar.tsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
 import Link from "next/link";
-import { Grid } from "antd";
+import { Grid, Dropdown, Menu, Space } from "antd";
 
-import { DashboardOutlined, LogoutOutlined } from "@ant-design/icons";
+import { DownOutlined, DashboardOutlined, LogoutOutlined } from "@ant-design/icons";
 
 import { ThemeToggle, useAuth } from "@coderdojobraga/ui";
 import MobileNavBar from "../MobileNavBar/MobileNavBar";
@@ -12,6 +12,7 @@ import { getUserInitials } from "../utils";
 
 import styles from "./style.module.css";
 
+
 const { useBreakpoint } = Grid;
 
 interface EntryProps {
@@ -28,10 +29,28 @@ 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>
-    <li className="flex items-center justify-start gap-x-2">
+    <li className="flex items-center text-base justify-start gap-x-2">
       <DashboardOutlined />
       <Link href="/dashboard">Dashboard</Link>
     </li>
@@ -69,11 +88,17 @@ function NavBar({ landing = true }: any) {
 
   if (screens.md) {
     return (
-      <ul className="flex items-center gap-8 text-sm uppercase text-black md:flex">
+      <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>
+
         {user ? (
           <li
             className="text-bold cursor-pointer"
@@ -93,11 +118,10 @@ function NavBar({ landing = true }: any) {
               </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`}
+              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>
@@ -106,14 +130,13 @@ function NavBar({ landing = true }: any) {
           <LoginButton isLoading={isLoading} />
         )}
 
-        <li>
-          <ThemeToggle visible={!landing} />
-        </li>
+
       </ul>
     );
   }
 
   return <MobileNavBar landing={landing} />;
 }
 
+
 export default NavBar;
diff --git a/packages/ui/components/landing/Header/config.ts b/packages/ui/components/landing/Header/config.ts
@@ -5,7 +5,7 @@ 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/dojocon", text: "DojoCon" },
   { key: "/web/codercamp", text: "Coder Camp" },
   { key: "/blog", text: "Blog" },
 ];