From a375ef19734e821eb7d83add1854f3c81a8748ac Mon Sep 17 00:00:00 2001
From: 0xMasayoshi <0xMasayoshi@protonmail.com>
Date: Wed, 7 Aug 2024 15:54:06 +0700
Subject: [PATCH] chore: update header

---
 .../src/app/(evm)/_common/header-elements.ts  |  94 ---------------
 .../src/app/(evm)/_common/header-elements.tsx |  68 +++++++++++
 apps/web/src/app/_common/header-elements.ts   |   7 +-
 packages/ui/src/components/navigation.tsx     | 107 +++++++++++++++++-
 pnpm-lock.yaml                                |   4 +
 5 files changed, 175 insertions(+), 105 deletions(-)
 delete mode 100644 apps/web/src/app/(evm)/_common/header-elements.ts
 create mode 100644 apps/web/src/app/(evm)/_common/header-elements.tsx

diff --git a/apps/web/src/app/(evm)/_common/header-elements.ts b/apps/web/src/app/(evm)/_common/header-elements.ts
deleted file mode 100644
index ae9a05b80f..0000000000
--- a/apps/web/src/app/(evm)/_common/header-elements.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import {
-  type NavigationElement,
-  NavigationElementDropdown,
-  NavigationElementType,
-} from '@sushiswap/ui'
-import { EXPLORE_NAVIGATION_LINKS } from 'src/app/_common/header-elements'
-
-const TOOLS_NAVIGATION_LINKS: NavigationElementDropdown['items'] = [
-  {
-    title: 'Analytics',
-    href: '/analytics',
-    description: 'Find the best opportunities',
-  },
-  {
-    title: 'Blog',
-    href: '/blog',
-    description:
-      'Stay up to date with the latest product developments at Sushi.',
-  },
-  {
-    title: 'Academy',
-    href: '/academy',
-    description: 'Everything you need to get up to speed with DeFi.',
-  },
-  {
-    title: 'Forum & Proposals',
-    href: 'https://forum.sushi.com',
-    description: 'View and discuss proposals for SushiSwap.',
-  },
-  {
-    title: 'Participate',
-    href: 'https://snapshot.org/#/sushigov.eth',
-    description:
-      'As a Sushi holder, you can vote on proposals to shape the future of SushiSwap.',
-  },
-]
-
-const PARTNER_NAVIGATION_LINKS: NavigationElementDropdown['items'] = [
-  {
-    title: 'Partner with Sushi',
-    href: '/partner',
-    description: 'Incentivize your token with Sushi rewards.',
-  },
-  {
-    title: 'List enquiry',
-    href: '/tokenlist-request',
-    description: 'Get your token on our default token list.',
-  },
-]
-
-export const headerElements: NavigationElement[] = [
-  {
-    title: 'Explore',
-    items: EXPLORE_NAVIGATION_LINKS,
-    show: 'mobile',
-    type: NavigationElementType.Dropdown,
-  },
-  {
-    title: 'Swap',
-    href: '/swap',
-    show: 'desktop',
-    type: NavigationElementType.Single,
-  },
-  {
-    title: 'Pools',
-    href: '/pool',
-    show: 'desktop',
-    type: NavigationElementType.Single,
-  },
-  {
-    title: 'Bonds',
-    href: '/bonds',
-    show: 'desktop',
-    type: NavigationElementType.Single,
-  },
-  {
-    title: 'Stake',
-    href: '/stake',
-    show: 'desktop',
-    type: NavigationElementType.Single,
-  },
-  {
-    title: 'More',
-    items: TOOLS_NAVIGATION_LINKS,
-    show: 'desktop',
-    type: NavigationElementType.Dropdown,
-  },
-  {
-    title: 'Partners',
-    items: PARTNER_NAVIGATION_LINKS,
-    show: 'desktop',
-    type: NavigationElementType.Dropdown,
-  },
-]
diff --git a/apps/web/src/app/(evm)/_common/header-elements.tsx b/apps/web/src/app/(evm)/_common/header-elements.tsx
new file mode 100644
index 0000000000..e0778c1a3f
--- /dev/null
+++ b/apps/web/src/app/(evm)/_common/header-elements.tsx
@@ -0,0 +1,68 @@
+import {
+  type NavigationElement,
+  NavigationElementDropdown,
+  NavigationElementType,
+  NavigationMenuLink,
+  OnramperButton,
+  navigationMenuTriggerStyle,
+} from '@sushiswap/ui'
+import { EXPLORE_NAVIGATION_LINKS } from 'src/app/_common/header-elements'
+
+const MORE_NAVIGATION_LINKS: NavigationElementDropdown['items'] = [
+  {
+    title: 'Pay',
+    href: 'https://pay.sushi.com',
+    description:
+      'Stream or create a vesting schedule with any ERC20 to any wallet.',
+  },
+  {
+    title: 'Bonds',
+    href: 'https://sushi.com/bonds',
+    description:
+      'Buy discounted tokens with vesting to support projects in a sustainable manner.',
+  },
+]
+
+export const headerElements: NavigationElement[] = [
+  {
+    title: 'Explore',
+    items: EXPLORE_NAVIGATION_LINKS,
+    show: 'mobile',
+    type: NavigationElementType.Dropdown,
+  },
+  {
+    title: 'Swap',
+    href: '/swap',
+    show: 'desktop',
+    type: NavigationElementType.Single,
+  },
+  {
+    title: 'Pools',
+    href: '/explore/pool',
+    show: 'desktop',
+    type: NavigationElementType.Single,
+  },
+  {
+    title: 'Stake',
+    href: '/stake',
+    show: 'desktop',
+    type: NavigationElementType.Single,
+  },
+  {
+    type: NavigationElementType.Custom,
+    item: (
+      <OnramperButton>
+        <NavigationMenuLink className={navigationMenuTriggerStyle}>
+          Buy Crypto
+        </NavigationMenuLink>
+      </OnramperButton>
+    ),
+    show: 'desktop',
+  },
+  {
+    title: 'More',
+    items: MORE_NAVIGATION_LINKS,
+    show: 'desktop',
+    type: NavigationElementType.Dropdown,
+  },
+]
diff --git a/apps/web/src/app/_common/header-elements.ts b/apps/web/src/app/_common/header-elements.ts
index e3a864106a..b5f92a3625 100644
--- a/apps/web/src/app/_common/header-elements.ts
+++ b/apps/web/src/app/_common/header-elements.ts
@@ -8,7 +8,7 @@ export const EXPLORE_NAVIGATION_LINKS: NavigationElementDropdown['items'] = [
   },
   {
     title: 'Pools',
-    href: '/pools',
+    href: '/explore/pools',
     description: 'Earn fees by providing liquidity.',
   },
   {
@@ -21,11 +21,6 @@ export const EXPLORE_NAVIGATION_LINKS: NavigationElementDropdown['items'] = [
     href: '/stake',
     description: 'Earn protocol fees by staking SUSHI.',
   },
-  {
-    title: 'Analytics',
-    href: '/analytics',
-    description: 'Find the best opportunities',
-  },
   {
     title: 'Blog',
     href: '/blog',
diff --git a/packages/ui/src/components/navigation.tsx b/packages/ui/src/components/navigation.tsx
index 4ec91e5edc..43fc7c592b 100644
--- a/packages/ui/src/components/navigation.tsx
+++ b/packages/ui/src/components/navigation.tsx
@@ -14,6 +14,47 @@ import {
   NavigationMenuTrigger,
 } from './navigation-menu'
 
+const PROTOCOL_NAVIGATION_LINKS: NavigationElementDropdown['items'] = [
+  {
+    title: 'Blog',
+    href: 'https://sushi.com/blog',
+    description:
+      'Stay up to date with the latest product developments at Sushi.',
+  },
+  {
+    title: 'Forum & Proposals',
+    href: 'https://forum.sushi.com',
+    description: 'View and discuss proposals for SushiSwap.',
+  },
+  {
+    title: 'Vote',
+    href: 'https://snapshot.org/#/sushigov.eth',
+    description:
+      'As a Sushi holder, you can vote on proposals to shape the future of SushiSwap.',
+  },
+]
+
+const PARTNER_NAVIGATION_LINKS: NavigationElementDropdown['items'] = [
+  {
+    title: 'Partner with Sushi',
+    href: 'http://sushi.com/partner',
+    description: 'Incentivize your token with Sushi rewards.',
+  },
+  {
+    title: 'List enquiry',
+    href: 'http://sushi.com/tokenlist-request',
+    description: 'Get your token on our default token list.',
+  },
+]
+
+const SUPPORT_NAVIGATION_LINKS: NavigationElementDropdown['items'] = [
+  {
+    title: 'Academy',
+    href: 'https://sushi.com/academy',
+    description: 'Everything you need to get up to speed with DeFi.',
+  },
+]
+
 const navigationContainerVariants = cva(
   'px-4 sticky flex items-center flex-grow gap-4 top-0 z-50 min-h-[56px] max-h-[56px] h-[56px]',
   {
@@ -41,7 +82,6 @@ const NavigationContainer: React.FC<NavContainerProps> = ({
 }) => {
   return (
     <div className={navigationContainerVariants({ variant })}>
-      <SushiIcon width={24} height={24} />
       <div className="flex items-center justify-between flex-grow gap-4">
         {children}
       </div>
@@ -152,7 +192,7 @@ const Navigation: React.FC<NavProps> = ({
           return DropdownItem(el)
         case NavigationElementType.Custom:
           return (
-            <div className={navigationElementShowMap[el.show]}>el.item</div>
+            <div className={navigationElementShowMap[el.show]}>{el.item}</div>
           )
       }
     })
@@ -160,9 +200,66 @@ const Navigation: React.FC<NavProps> = ({
 
   return (
     <NavigationContainer variant={variant}>
-      <NavigationMenu>
-        <NavigationMenuList>{leftElements}</NavigationMenuList>
-      </NavigationMenu>
+      <div className="flex space-x-1">
+        <NavigationMenu>
+          <NavigationMenuList>
+            <NavigationMenuItem>
+              <NavigationMenuTrigger>
+                <SushiIcon width={24} height={24} />
+              </NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <ul className="w-[400px] flex flex-col gap-4 p-4">
+                  <div className="flex flex-col gap-2 pt-3">
+                    <span className="font-semibold px-3">Protocol</span>
+                    <div>
+                      {PROTOCOL_NAVIGATION_LINKS.map((component) => (
+                        <NavigationListItem
+                          key={component.title}
+                          title={component.title}
+                          href={component.href}
+                        >
+                          {component.description}
+                        </NavigationListItem>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    <span className="font-semibold px-3">Partnership</span>
+                    <div>
+                      {PARTNER_NAVIGATION_LINKS.map((component) => (
+                        <NavigationListItem
+                          key={component.title}
+                          title={component.title}
+                          href={component.href}
+                        >
+                          {component.description}
+                        </NavigationListItem>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    <span className="font-semibold px-3">Support</span>
+                    <div>
+                      {SUPPORT_NAVIGATION_LINKS.map((component) => (
+                        <NavigationListItem
+                          key={component.title}
+                          title={component.title}
+                          href={component.href}
+                        >
+                          {component.description}
+                        </NavigationListItem>
+                      ))}
+                    </div>
+                  </div>
+                </ul>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+        <NavigationMenu>
+          <NavigationMenuList>{leftElements}</NavigationMenuList>
+        </NavigationMenu>
+      </div>
       <div className="flex items-center gap-2">
         {rightElement ? rightElement : null}
       </div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9c0927ff4f..eeb3dc2a93 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1498,6 +1498,10 @@ importers:
         specifier: 3.23.8
         version: 3.23.8
 
+  packages/sushi/dist/_cjs: {}
+
+  packages/sushi/dist/_esm: {}
+
   packages/telemetry:
     devDependencies:
       '@tsconfig/esm':