chore: update header

sushi-labs · Aug 7, 2024 · a375ef1 · a375ef1
1 parent 6c6415a
commit a375ef1
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 105 deletions.
diff --git a/apps/web/src/app/(evm)/_common/header-elements.ts b/apps/web/src/app/(evm)/_common/header-elements.ts
diff --git a/apps/web/src/app/(evm)/_common/header-elements.tsx 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
@@ -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
@@ -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,17 +192,74 @@ 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>
           )
       }
     })
   }, [_leftElements])
 
   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