-
Notifications
You must be signed in to change notification settings - Fork 499
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
dschlabach
committed
Nov 25, 2024
1 parent
bf17b98
commit fc87105
Showing
1 changed file
with
116 additions
and
122 deletions.
There are no files selected for viewing
238 changes: 116 additions & 122 deletions
238
apps/web/src/components/base-org/shared/TopNavigation/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,140 +1,134 @@ | ||
| "use client"; | ||
| 'use client'; | ||
|
|
||
| import { Suspense } from "react"; | ||
| import Image, { StaticImageData } from "next/image"; | ||
| import Link from "next/link"; | ||
| import { usePathname } from "next/navigation"; | ||
| import AnalyticsProvider from "apps/web/contexts/Analytics"; | ||
| import logo from "apps/web/src/components/base-org/shared/TopNavigation/assets/logo.svg"; | ||
| import MenuDesktop from "apps/web/src/components/base-org/shared/TopNavigation/MenuDesktop"; | ||
| import MenuMobile from "apps/web/src/components/base-org/shared/TopNavigation/MenuMobile"; | ||
| import { DynamicWrappedGasPriceDropdown } from "apps/web/src/components/base-org/shared/TopNavigation/GasPriceDropdown"; | ||
| import { Suspense } from 'react'; | ||
| import Image, { StaticImageData } from 'next/image'; | ||
| import Link from 'next/link'; | ||
| import { usePathname } from 'next/navigation'; | ||
| import AnalyticsProvider from 'apps/web/contexts/Analytics'; | ||
| import logo from 'apps/web/src/components/base-org/shared/TopNavigation/assets/logo.svg'; | ||
| import MenuDesktop from 'apps/web/src/components/base-org/shared/TopNavigation/MenuDesktop'; | ||
| import MenuMobile from 'apps/web/src/components/base-org/shared/TopNavigation/MenuMobile'; | ||
| import { DynamicWrappedGasPriceDropdown } from 'apps/web/src/components/base-org/shared/TopNavigation/GasPriceDropdown'; | ||
| import { | ||
| ConnectWalletButtonVariants, | ||
| DynamicWrappedConnectWalletButton, | ||
| } from "apps/web/src/components/ConnectWalletButton/ConnectWalletButton"; | ||
| ConnectWalletButtonVariants, | ||
| DynamicWrappedConnectWalletButton, | ||
| } from 'apps/web/src/components/ConnectWalletButton/ConnectWalletButton'; | ||
|
|
||
| export type SubItem = { | ||
| name: string; | ||
| href: string; | ||
| name: string; | ||
| href: string; | ||
| }; | ||
|
|
||
| export type TopNavigationLink = { | ||
| name: string; | ||
| href: string; | ||
| subItems: SubItem[]; | ||
| analyticContext: string; | ||
| name: string; | ||
| href: string; | ||
| subItems: SubItem[]; | ||
| analyticContext: string; | ||
| }; | ||
|
|
||
| const links: TopNavigationLink[] = [ | ||
| { | ||
| name: "Build", | ||
| analyticContext: "build", | ||
| href: "/build", | ||
| subItems: [ | ||
| { | ||
| name: "Get Started", | ||
| href: "/build", | ||
| }, | ||
| { name: "Docs", href: "https://docs.base.org" }, | ||
| { name: "Learn", href: "https://docs.base.org/base-learn/docs/welcome" }, | ||
| { name: "Status Page", href: "https://status.base.org" }, | ||
| { name: "Block Explorer", href: "https://base.blockscout.com" }, | ||
| { name: "Bug Bounty", href: "https://hackerone.com/coinbase" }, | ||
| { name: "Github", href: "https://github.com/base-org" }, | ||
| ], | ||
| }, | ||
| { | ||
| name: "Explore", | ||
| analyticContext: "explore", | ||
| href: "/ecosystem", | ||
| subItems: [ | ||
| { name: "Apps", href: "/ecosystem" }, | ||
| { name: "Bridge", href: "https://bridge.base.org" }, | ||
| ], | ||
| }, | ||
| { | ||
| name: "Community", | ||
| analyticContext: "community", | ||
| href: "/", | ||
| subItems: [ | ||
| { | ||
| name: "Grants", | ||
| href: "https://paragraph.xyz/@grants.base.eth/calling-based-builders", | ||
| }, | ||
| { | ||
| name: "Events", | ||
| href: "https://lu.ma/BaseMeetups", | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| name: "About", | ||
| analyticContext: "about", | ||
| href: "/about", | ||
| subItems: [ | ||
| { name: "Vision", href: "/about" }, | ||
| { name: "Blog", href: "https://base.mirror.xyz/" }, | ||
| { name: "Jobs", href: "/jobs" }, | ||
| { name: "Media Kit", href: "https://github.com/base-org/brand-kit" }, | ||
| ], | ||
| }, | ||
| { | ||
| name: "Socials", | ||
| analyticContext: "socials", | ||
| href: "#socials", | ||
| subItems: [ | ||
| { name: "X", href: "https://x.com/base" }, | ||
| { name: "Farcaster", href: "https://warpcast.com/base" }, | ||
| { name: "Github", href: "https://github.com/base-org" }, | ||
| { name: "Discord", href: "https://discord.com/invite/buildonbase" }, | ||
| ], | ||
| }, | ||
| { | ||
| name: 'Build', | ||
| analyticContext: 'build', | ||
| href: '/build', | ||
| subItems: [ | ||
| { | ||
| name: 'Get Started', | ||
| href: '/build', | ||
| }, | ||
| { name: 'Docs', href: 'https://docs.base.org' }, | ||
| { name: 'Learn', href: 'https://docs.base.org/base-learn/docs/welcome' }, | ||
| { name: 'Status Page', href: 'https://status.base.org' }, | ||
| { name: 'Block Explorer', href: 'https://base.blockscout.com' }, | ||
| { name: 'Bug Bounty', href: 'https://hackerone.com/coinbase' }, | ||
| { name: 'Github', href: 'https://github.com/base-org' }, | ||
| ], | ||
| }, | ||
| { | ||
| name: 'Explore', | ||
| analyticContext: 'explore', | ||
| href: '/ecosystem', | ||
| subItems: [ | ||
| { name: 'Apps', href: '/ecosystem' }, | ||
| { name: 'Bridge', href: 'https://bridge.base.org' }, | ||
| ], | ||
| }, | ||
| { | ||
| name: 'Community', | ||
| analyticContext: 'community', | ||
| href: '/', | ||
| subItems: [ | ||
| { | ||
| name: 'Grants', | ||
| href: 'https://paragraph.xyz/@grants.base.eth/calling-based-builders', | ||
| }, | ||
| { | ||
| name: 'Events', | ||
| href: 'https://lu.ma/BaseMeetups', | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| name: 'About', | ||
| analyticContext: 'about', | ||
| href: '/about', | ||
| subItems: [ | ||
| { name: 'Vision', href: '/about' }, | ||
| { name: 'Blog', href: 'https://base.mirror.xyz/' }, | ||
| { name: 'Jobs', href: '/jobs' }, | ||
| { name: 'Media Kit', href: 'https://github.com/base-org/brand-kit' }, | ||
| ], | ||
| }, | ||
| { | ||
| name: 'Socials', | ||
| analyticContext: 'socials', | ||
| href: '#socials', | ||
| subItems: [ | ||
| { name: 'X', href: 'https://x.com/base' }, | ||
| { name: 'Farcaster', href: 'https://warpcast.com/base' }, | ||
| { name: 'Github', href: 'https://github.com/base-org' }, | ||
| { name: 'Discord', href: 'https://discord.com/invite/buildonbase' }, | ||
| ], | ||
| }, | ||
| ]; | ||
|
|
||
| const cryptoExcludedPaths = ["/jobs", "/about", "/ecosystem", "/build"]; | ||
| const cryptoExcludedPaths = ['/jobs', '/about', '/ecosystem', '/build']; | ||
|
|
||
| export default function TopNavigation() { | ||
| const pathname = usePathname(); | ||
| const showGasDropdownAndConnectWallet = !cryptoExcludedPaths.includes( | ||
| pathname ?? "", | ||
| ); | ||
| return ( | ||
| <AnalyticsProvider context="navbar"> | ||
| <nav className="fixed top-0 z-50 w-full shrink-0 px-[1rem] py-4 md:px-[1.5rem] lg:px-[2rem]"> | ||
| <div className="flex w-full items-center justify-between gap-2"> | ||
| {/* Logo and Gas price section */} | ||
| <div className="relative z-20 flex items-center gap-4 md:min-w-[16rem]"> | ||
| <Link href="/" className="flex min-h-[3rem] min-w-[3rem]"> | ||
| <Image src={logo as StaticImageData} alt="Base Logo" /> | ||
| </Link> | ||
| {showGasDropdownAndConnectWallet && ( | ||
| <DynamicWrappedGasPriceDropdown /> | ||
| )} | ||
| </div> | ||
| const pathname = usePathname(); | ||
| const showGasDropdownAndConnectWallet = !cryptoExcludedPaths.includes(pathname ?? ''); | ||
| return ( | ||
| <AnalyticsProvider context="navbar"> | ||
| <nav className="fixed top-0 z-50 w-full shrink-0 px-[1rem] py-4 md:px-[1.5rem] lg:px-[2rem]"> | ||
| <div className="flex w-full items-center justify-between gap-2"> | ||
| {/* Logo and Gas price section */} | ||
| <div className="relative z-20 flex items-center gap-4 md:min-w-[16rem]"> | ||
| <Link href="/" className="flex min-h-[3rem] min-w-[3rem]"> | ||
| <Image src={logo as StaticImageData} alt="Base Logo" /> | ||
| </Link> | ||
| {showGasDropdownAndConnectWallet && <DynamicWrappedGasPriceDropdown />} | ||
| </div> | ||
|
|
||
| <div className="hidden md:inline-block"> | ||
| <MenuDesktop links={links} /> | ||
| </div> | ||
| <div className="hidden md:inline-block"> | ||
| <MenuDesktop links={links} /> | ||
| </div> | ||
|
|
||
| <div className="mr-auto inline-block md:hidden"> | ||
| <MenuMobile links={links} /> | ||
| </div> | ||
| <div className="mr-auto inline-block md:hidden"> | ||
| <MenuMobile links={links} /> | ||
| </div> | ||
|
|
||
| {/* Connect Wallet button */} | ||
| <div className="flex items-end justify-end md:min-w-[16rem]"> | ||
| {showGasDropdownAndConnectWallet && ( | ||
| <Suspense> | ||
| <DynamicWrappedConnectWalletButton | ||
| connectWalletButtonVariant={ | ||
| ConnectWalletButtonVariants.BaseOrg | ||
| } | ||
| /> | ||
| </Suspense> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </nav> | ||
| </AnalyticsProvider> | ||
| ); | ||
| {/* Connect Wallet button */} | ||
| <div className="flex items-end justify-end md:min-w-[16rem]"> | ||
| {showGasDropdownAndConnectWallet && ( | ||
| <Suspense> | ||
| <DynamicWrappedConnectWalletButton | ||
| connectWalletButtonVariant={ConnectWalletButtonVariants.BaseOrg} | ||
| /> | ||
| </Suspense> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </nav> | ||
| </AnalyticsProvider> | ||
| ); | ||
| } |