feat: add quick nav submenu

package.json

@@ -44,6 +44,7 @@
     "graphql": "^16.2.0",
     "i18n-iso-countries": "^7.5.0",
     "immer": "^10.0.2",
+    "js-cookie": "^3.0.5",
     "lexical": "^0.7.5",
     "mapbox-gl": "^2.7.0",
     "maplibre-gl": "^4.3.2",

src/app/(default)/climb/[[...slug]]/components/PageAlert.tsx

@@ -3,9 +3,11 @@ import { Bulldozer } from '@phosphor-icons/react/dist/ssr'
 
 export const PageAlert: React.FC<{ id: string }> = ({ id }) => (
   <div className='alert alert-warning text-md flex justify-center'>
-    <div className='flex gap-1'>
-      <Bulldozer size={24} className='mr-2' />
-      We're giving this page a facelift.
+    <div className='flex flex-col lg:flex-row items-center gap-2'>
+      <div className='flex items-center'>
+        <Bulldozer size={24} className='mr-2' />
+        We're giving this page a facelift!
+      </div>
       <Link href={`/climbs/${id}`} className='underline font-semibold'>Visit the previous version</Link>
       to make edits.
     </div>

src/app/(default)/components/DesktopHeader.tsx

@@ -1,46 +1,45 @@
 'use client'
 import { signIn, useSession } from 'next-auth/react'
-import { MapTrifold } from '@phosphor-icons/react/dist/ssr'
+import { MapTrifold, Pulse, LineSegments, Planet } from '@phosphor-icons/react/dist/ssr'
 
 import { Logo } from '../header'
 import { XSearchMinimal } from '@/components/search/XSearch'
 import { NavMenuItem, NavMenuItemProps } from '@/components/ui/NavMenuButton'
 import GitHubStars from '@/components/GitHubStars'
 import AuthenticatedProfileNavButton from '../../../components/AuthenticatedProfileNavButton'
 import Link from 'next/link'
+import React from 'react'
 
 export const DesktopHeader: React.FC = () => {
-  const { status } = useSession()
-
   const navListDefault: NavMenuItemProps[] = [
     {
       to: 'https://community.openbeta.io',
       label: 'Forums'
     },
     {
-      to: '/about',
-      label: 'About'
+      to: process.env.NEXT_PUBLIC_DISCORD_INVITE ?? '',
+      label: 'Discord'
     },
     {
       to: 'https://opencollective.com/openbeta/contribute/t-shirt-31745',
       label: 'T-shirts'
     },
+    {
+      to: '/about',
+      label: 'About us'
+    },
+
     {
       to: '/partner-with-us',
       label: 'Become a Partner'
     },
     {
       to: 'https://docs.openbeta.io',
       label: 'Docs'
-    },
-    {
-      onClick: () => { void signIn('auth0', { callbackUrl: '/api/user/me' }) },
-      label: 'Login',
-      type: 'rounded-btn border bg-accent ring-0 border-b-2 border-b-neutral'
     }
   ]
 
-  const unauthenticatedMenu = navListDefault.map(
+  const topLevelNav = navListDefault.map(
     ({ onClick, label, to, type }: NavMenuItemProps, index) => (
       <NavMenuItem
         key={index}
@@ -51,35 +50,114 @@ export const DesktopHeader: React.FC = () => {
       />)
   )
 
-  unauthenticatedMenu.unshift(
-    <GitHubStars key='gh-button' />
+  topLevelNav.push(<GitHubStars />)
+
+  return (
+    <header className='hidden lg:block'>
+      <div className='my-2 flex flex-col items-center'>
+        <div className='self-end flex items-center gap-6 py-2'>{topLevelNav}</div>
+        <div className='flex items-center justify-between gap-6 w-full py-4'>
+          <div className='flex items-center gap-6'>
+            <Logo />
+            <XSearchMinimal />
+            <div className='text-base-300/50 font-thin text-xl'>|</div>
+            <Link href='/maps' className='text-sm flex items-center whitespace-nowrap hover:underline hover:decoration-1 font-semibold gap-2'><MapTrifold size={18} />Maps</Link>
+          </div>
+          <div>
+            <SignupOrLogin />
+          </div>
+        </div>
+        <div className='mt-2 w-full flex flex-col items-center'>
+          <hr className='w-full' />
+          <QuickLinks />
+          <hr className='w-full border-base-content' />
+        </div>
+      </div>
+    </header>
   )
+}
+
+const QuickLinks: React.FC = () => {
+  return (
+    <div className='flex items-center gap-8 py-3'>
+      {[
+        {
+          href: '/pulse',
+          label: 'Pulse',
+          icon: <Pulse size={16} />
+        },
+        {
+          href: '/area/1d33c773-e381-5b8a-a13f-3dfd7991732b/south-africa',
+          label: 'S.Africa',
+          icon: <LineSegments size={16} />
+        },
+        {
+          href: '/area/2996145f-e1ba-5b56-9da8-30c64ccc3776/canada',
+          label: 'Canada',
+          icon: <LineSegments size={16} />
+        },
+        {
+          href: '/area/be9733db-21a2-53ec-86a2-3fb6fab552d9/germany',
+          label: 'Germany',
+          icon: <LineSegments size={16} />
+        },
+        {
+          href: '/area/1db1e8ba-a40e-587c-88a4-64f5ea814b8e/usa',
+          label: 'USA',
+          icon: <LineSegments size={16} />
+        },
+        {
+          href: '/a',
+          label: 'All',
+          icon: <Planet size={16} />
+        }
+      ].map(({ href, label, icon }) => (
+        <Link
+          key={href}
+          href={href}
+          className='text-xs font-semibold text-primary/80 flex items-center whitespace-nowrap hover:underline hover:decoration-1 gap-1.5'
+        >
+          {icon}{label}
+        </Link>
+      ))}
 
-  let nav
-  switch (status) {
-    case 'authenticated':
-      nav = <AuthenticatedProfileNavButton isMobile={false} />
-      break
-    case 'loading':
-      nav = (
-        <>
-          <div className='rounded-full bg-base-200 opacity-10 w-32 h-10' />
-        </>
-      )
-      break
-    default:
-      nav = unauthenticatedMenu
+    </div>
+  )
+}
+
+const SignupOrLogin: React.FC = () => {
+  const { status } = useSession()
+  if (status === 'loading') {
+    return (<button className='btn btn-disabled' disabled>Please wait...</button>)
+  }
+  if (status === 'authenticated') {
+    return <AuthenticatedProfileNavButton isMobile={false} />
   }
 
   return (
-    <header className='hidden lg:flex items-center justify-between h-14'>
-      <div className='flex items-center gap-6'>
-        <Logo />
-        <XSearchMinimal />
-        <span className='text-secondary/80'>|</span>
-        <Link href='/maps' className='flex items-center gap-1.5 whitespace-nowrap hover:underline hover:decoration-1 font-semibold'><MapTrifold size={20} />Maps</Link>
-      </div>
-      <div className='menu menu-horizontal rounded-box gap-2 px-0'>{nav}</div>
-    </header>
+    <div className='flex items-center gap-4'>
+      <SignupButton />
+      <LoginButton />
+    </div>
+  )
+}
+
+export const LoginButton: React.FC = () => {
+  return (
+    <>
+      <button className='btn btn-primary btn-outline' onClick={() => { void signIn() }}>
+        Login
+      </button>
+    </>
+  )
+}
+
+export const SignupButton: React.FC = () => {
+  return (
+    <>
+      <button className='btn btn-accent border-b-2 border-b-neutral' onClick={() => { void signIn('auth0', undefined, { screen_hint: 'signup' }) }}>
+        Sign up
+      </button>
+    </>
   )
 }

src/app/(default)/components/LandingCTA.tsx

@@ -1,99 +1,7 @@
-import clx from 'classnames'
-
-import { LoginButtonClient } from './LoginButton'
-import { ShowEmailJS } from './ShowEmailJS'
-import { ReactNode } from 'react'
-
-export const LandingCTA: React.FC = () => {
-  return (
-    <div className='w-full p-4 md:p-10'>
-      <div className='flex flex-rows flex-wrap gap-6 justify-center'>
-        <Card4All />
-        <Card4Coders />
-        <Leaders />
-        <Donate />
-      </div>
-    </div>
-  )
-}
-
-const Card4Coders: React.FC = () => {
-  return (
-    <Card
-      title='Coders'
-      body={
-        <ul>
-          <li>☑️ Fix a bug.</li>
-          <li>☑️ Use OpenBeta API & data in your projects.</li>
-        </ul>
-      }
-      action={<CodeContributorsAction />}
-    />
-  )
-}
-
 export const CodeContributorsAction: React.FC = () => (
   <>
     <a href='https://docs.openbeta.io/how-to-contribute/overview' className='text-sm underline'>Dev onboarding</a>
     <a className='btn btn-primary btn-sm btn-outline' href='https://github.com/orgs/OpenBeta/'>GitHub</a>
   </>)
 
-const Card4All: React.FC = () => {
-  return (
-    <Card
-      title='Climbers'
-      body={
-        <ul>
-          <li>☑️ Add missing climbs.</li>
-          <li>☑️ Help us make your local climbing area&#39;s pages even better!</li>
-        </ul>
-      }
-      action={<LoginButtonClient className='btn btn-outline bg-accent btn-sm px-4 border-b-neutral border-b-2' label='Login' />}
-    />
-  )
-}
-
-const Leaders: React.FC = () => {
-  return (
-    <Card
-      title='Community Leaders'
-      body='Serve as a core volunteer for 3-6 months. Apply your industry expertise to help shape the future of climbing in the digital age.'
-      action={<ShowEmailJS />}
-    />
-  )
-}
-
 export const DonateButton: React.FC = () => (<a className='btn btn-outline btn-sm bg-emerald-500 border-b-2 px-4' href='https://opencollective.com/openbeta'>Donate</a>)
-
-const Donate: React.FC = () => {
-  return (
-    <Card
-      title='Become a financial supporter'
-      body='OpenBeta is a nonprofit funded by users like you!  If you support our mission to keep climbing knowledge free and open, please consider making a donation today.'
-      action={<DonateButton />}
-    />
-  )
-}
-
-interface CTACardProps {
-  title: string
-  body: string | ReactNode
-  action: React.ReactNode
-  className?: string
-}
-
-const Card: React.FC<CTACardProps> = ({ title, body, action, className }) => {
-  return (
-    <div className='px-4'>
-      <h2 className='px-4 font-medium text-base-200 uppercase'>{title}</h2>
-      <div className={clx('bg-base-200/20 px-4 card max-w-sm bg-base-100 shadow-lg', className)}>
-        <div className='card-body'>
-          <div>{body}</div>
-          <div className='card-actions justify-end items-center gap-x-4 py-2'>
-            {action}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

src/app/(default)/components/LandingHero.tsx

@@ -1,10 +1,20 @@
+import { AppAlert } from '@/components/broadcast/AppAlert'
+import { SignupButton } from './DesktopHeader'
+
 export const LandingHero: React.FC = () => {
   return (
-    <section className='mt-6'>
-      <h1 className='text-2xl tracking-tighter font-bold'>Share your climbing route knowledge!</h1>
-      <div className='font-medium text-neutral/80'>
-        Join us to help improve this comprehensive climbing resource for the community.
-      </div>
+    <section className='mt-4'>
+      <AppAlert
+        message={
+          <>
+            <h1 className='text-xl tracking-tighter font-bold'>Share your climbing route knowledge!</h1>
+            <div className='font-medium text-neutral/80'>
+              <p>Join us to help improve this comprehensive <br /> climbing resource for the community.</p>
+            </div>
+            <SignupButton />
+          </>
+        }
+      />
     </section>
   )
 }

src/app/(default)/components/MobileHeader.tsx

@@ -12,7 +12,7 @@ export const MobileHeader: React.FC = () => {
   const { status } = useSession()
   const nav = status === 'authenticated' ? <AuthenticatedProfileNavButton /> : <LoginButton />
   return (
-    <header className='flex lg:hidden items-center justify-between gap-6'>
+    <header className='flex lg:hidden items-center justify-between gap-6 py-2'>
       <Logo />
       <XSearchMinimal />
       {nav}

src/app/(default)/page.tsx

@@ -18,11 +18,11 @@ export default async function Home (): Promise<any> {
   const history = await getChangeHistoryServerSide()
   return (
     <>
-      <div className='default-page-margins'>
+      <div className='default-page-margins flex flex-col justify-center w-fit'>
         <LandingHero />
-        <hr className='my-4 border-base-content' />
       </div>
       <div className='default-page-margins flex flex-col gap-y-16 mb-16'>
+        <RecentTags />
         <div className='lg:grid lg:grid-cols-3 gap-x-2'>
           <div className='mt-8 lg:mt-0 lg:overflow-y-auto lg:h-[450px] w-full border-2 rounded-box'>
             <Suspense fallback={<LatestContributionsSkeleton />}>
@@ -34,7 +34,6 @@ export default async function Home (): Promise<any> {
             <RecentContributionsMap history={history} />
           </div>
         </div>
-        <RecentTags />
         <InternationalToC />
         <USAToC />
         <FinancialContributors />