fix: add donation & github links to menu (#942)

package.json

@@ -11,7 +11,7 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
     "@google-cloud/storage": "^6.11.0",
-    "@headlessui/react": "^1.6.4",
+    "@headlessui/react": "^1.7.15",
     "@heroicons/react": "2.0.13",
     "@hookform/resolvers": "^3.1.1",
     "@lexical/react": "^0.7.5",

src/components/DesktopAppBar.tsx

@@ -50,17 +50,25 @@ export default function DesktopAppBar ({ showFilterBar = true }: DesktopAppBarPr
 const navListDefault: JSX.Element[] = [
   {
     action: async () => await signIn('auth0', { callbackUrl: '/api/user/me' }),
-    title: 'Become A Contributor',
+    title: 'Login',
     variant: ButtonVariant.SOLID_PRIMARY
   },
   {
     route: '/about',
     title: 'About'
   },
+  {
+    route: 'https://opencollective.com/openbeta/contribute/t-shirt-31745',
+    title: 'T-shirts'
+  },
   {
     route: 'https://docs.openbeta.io',
     title: 'Docs'
   },
+  {
+    route: 'https://github.com/OpenBeta/open-tacos',
+    title: 'GitHub'
+  },
   {
     route: 'https://discord.gg/ptpnWWNkJx',
     title: 'Discord',

src/components/MobileAppBar.tsx

@@ -11,6 +11,7 @@ import { signIn, signOut, useSession } from 'next-auth/react'
 import ProfileNavButton from './ProfileNavButton'
 import NewPost from './NewPost'
 import { XSearchMobile } from './search/XSearch'
+import { MouseEventHandler } from 'react'
 
 interface HeaderProps {
   includeFilters: boolean
@@ -44,7 +45,7 @@ const AuthenticatedNav = (): JSX.Element => (
 
 const LoginButton = (): JSX.Element => (
   <Button
-    label={<span><span className='inline md:hidden'>Login</span><span className='hidden md:inline text-sm'>Become A Contributor</span></span>}
+    label='Login'
     onClick={async () => await signIn('auth0', { callbackUrl: '/api/user/me' })}
     variant={ButtonVariant.SOLID_PRIMARY}
   />)
@@ -74,28 +75,40 @@ const More = (): JSX.Element => {
         <Button label={<Bars3Icon className='text-white w-8 h-8' />} />
       </Popover.Button>
 
-      <Popover.Panel className='absolute z-20 right-0 mt-2 p-6 bg-white rounded-md'>
+      <Popover.Panel className='absolute z-20 right-0 mt-2 p-6 bg-white rounded-md w-full max-w-md'>
         <div className='grid'>
           {status === 'authenticated'
-            ? <Button
-                size='lg'
-                onClick={async () => {
-                  sessionStorage.setItem('editMode', 'false')
-                  await signOut({ callbackUrl: `${window.origin}/api/auth/logout` })
-                }}
-                label='Logout'
-              />
-            : <Button size='lg' onClick={async () => await signIn()} label='Login' />}
-          <Button size='lg' href='/about' label='About' />
-          <Button size='lg' href='https://openbeta.io/blog' label='Blog' />
-          <Button
-            size='lg'
-            href='https://discord.gg/ptpnWWNkJx'
-            label='Discord'
-            variant={ButtonVariant.SOLID_SECONDARY}
-          />
+            ? (
+              <>
+                <a className='btn btn-ghost no-animation btn-block' href='/api/user/me?preview=1'><span className='pl-10'>Dashboard</span> <sup className='ml-2 badge badge-sm badge-primary'>Beta</sup></a>
+                <a className='btn btn-ghost no-animation btn-block' href='/account/editProfile'>Account settings</a>
+                <a className='btn btn-ghost no-animation btn-block' href='/' onClick={logoutHandler}>Logout</a>
+              </>)
+            : <a className='btn btn-accent no-animation btn-block' href='/' onClick={signInHandler}>Login</a>}
+          <hr />
+          <a className='btn btn-ghost no-animation btn-block text-accent' href='https://opencollective.com/openbeta/contribute/t-shirt-31745'>Get your OpenBeta T-shirts</a>
+          <hr />
+          <a className='btn btn-ghost no-animation btn-block' href='/about'>About</a>
+          <a className='btn btn-ghost no-animation btn-block' href='https://docs.openbeta.io'>Documentation</a>
+          <a className='btn btn-ghost no-animation btn-block' href='https://openbeta.io/blog'>Blog</a>
+          <hr />
+          <a className='btn btn-ghost no-animation btn-block' href='https://github.com/OpenBeta/open-tacos'>GitHub</a>
+          <a className='btn btn-outline no-animation btn-block' href='https://discord.gg/ptpnWWNkJx'>Discord community</a>
         </div>
       </Popover.Panel>
     </Popover>
   )
 }
+
+const logoutHandler: MouseEventHandler = async (event) => {
+  event.stopPropagation()
+  event.preventDefault()
+  sessionStorage.setItem('editMode', 'false')
+  await signOut({ callbackUrl: `${window.origin}/api/auth/logout` })
+}
+
+const signInHandler: MouseEventHandler = async (event) => {
+  event.stopPropagation()
+  event.preventDefault()
+  await signIn('auth0')
+}

src/components/ProfileNavButton.tsx

@@ -1,9 +1,10 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useSession, signOut } from 'next-auth/react'
-import { UserCircleIcon, ChatBubbleOvalLeftEllipsisIcon } from '@heroicons/react/24/outline'
+import { UserCircleIcon, ChatBubbleOvalLeftEllipsisIcon, Cog6ToothIcon, ChartBarIcon, GiftIcon } from '@heroicons/react/24/outline'
 
 import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem, DropdownSeparator } from './ui/DropdownMenu'
+import GitHubIcon from '../assets/icons/github.inline.svg'
 
 interface ProfileNavButtonProps {
   isMobile?: boolean
@@ -37,24 +38,24 @@ export default function ProfileNavButton ({ isMobile = true }: ProfileNavButtonP
 
           <DropdownContent>
             <DropdownItem
-              icon={<UserCircleIcon className='w-4 h-4' />}
-              text={<><span className='font-medium'>Profile </span><sup className='badge badge-sm badge-info'>Beta</sup></>}
+              icon={<ChartBarIcon className='w-4 h-4' />}
+              text={<><span className='font-medium'>Dashboard </span><sup className='badge badge-sm badge-primary'>Beta</sup></>}
               onSelect={async () => await router.push('/api/user/me?preview=1')}
             />
 
             <DropdownItem
               icon={<UserCircleIcon className='w-4 h-4' />}
-              text='Classic Profile'
+              text='Profile'
               onSelect={async () => await router.push('/api/user/me')}
             />
 
             <DropdownSeparator />
 
-            <DropdownItem text='About' onSelect={async () => await router.push('/about')} />
-            <DropdownItem text='Documentation' onSelect={async () => await router.push('https://docs.openbeta.io')} />
-            <DropdownItem text='Blog' onSelect={async () => await router.push('https://openbeta.io/blog')} />
-
-            <DropdownSeparator />
+            <DropdownItem
+              icon={<Cog6ToothIcon className='w-4 h-4' />}
+              text='Account settings'
+              onSelect={async () => await router.push('/account/editProfile')}
+            />
 
             <DropdownItem
               text='Logout'
@@ -63,6 +64,27 @@ export default function ProfileNavButton ({ isMobile = true }: ProfileNavButtonP
                 await signOut({ callbackUrl: `${window.origin}/api/auth/logout` })
               }}
             />
+            <DropdownSeparator />
+
+            <DropdownItem text='About' onSelect={async () => await router.push('/about')} />
+            <DropdownItem text='Documentation' onSelect={async () => await router.push('https://docs.openbeta.io')} />
+            <DropdownItem text='Blog' onSelect={async () => await router.push('https://openbeta.io/blog')} />
+
+            <DropdownSeparator />
+
+            <DropdownItem
+              icon={<GiftIcon className='w-4 h-4' />}
+              text='Get your OpenBeta T-shirts'
+              className='text-accent'
+              onSelect={async () => await router.push('https://opencollective.com/openbeta/contribute/t-shirt-31745')}
+            />
+            <DropdownSeparator />
+
+            <DropdownItem
+              icon={<GitHubIcon className='w-4 h-4' />}
+              text='GitHub'
+              onSelect={async () => await router.push('https://github.com/OpenBeta/open-tacos')}
+            />
             <DropdownItem
               icon={<ChatBubbleOvalLeftEllipsisIcon className='w-4 h-4' />}
               text='Discord community'

src/components/layout.tsx

@@ -21,6 +21,7 @@ function Layout ({
   return (
     <>
       <div className={rootContainerClass}>
+
         <Header showFilterBar={showFilterBar} />
         {hero}
         <main className={contentContainerClass}>

src/components/users/account/NavBar.tsx

@@ -1,8 +1,15 @@
 import { useRouter } from 'next/router'
 import clx from 'classnames'
 import { ArrowLeftIcon } from '@heroicons/react/24/outline'
+import { signOut } from 'next-auth/react'
+import { MouseEventHandler } from 'react'
 
-const Links = [
+interface NavItem {
+  path: string
+  label: string
+}
+
+const Links: NavItem[] = [
   {
     path: '/account/editProfile',
     label: 'Profile'
@@ -21,14 +28,38 @@ export const NavBar: React.FC = () => {
       </div>
       <div className='lg:ml-4 mt-12 flex flex-col gap-2 max-w-xs'>
         <div className='font-semibold text-base-content/70 text-sm'>ACCOUNT SETTINGS</div>
-        {Links.map(({ path, label }) => {
-          return (<a key={path} href={path} className={clx('px-4 py-2 rounded-r-lg lg:rounded-r-none rounded-l-lg', router.asPath === path ? 'bg-base-100' : 'hover:bg-base-100/40')}>{label}</a>)
-        })}
+        {Links.map(({ path, label }) => (<MenuItem key={path} path={path} label={label} pagePath={router.asPath} />))}
+        <hr className='border-base-300' />
+
+        <MenuItem
+          path='/'
+          label='Logout' onClick={async (event) => {
+            event.stopPropagation()
+            event.preventDefault()
+            await signOut({ callbackUrl: `${window.origin}/api/auth/logout` })
+          }}
+        />
       </div>
     </div>
   )
 }
 
+const MenuItem: React.FC<NavItem & { pagePath?: string, onClick?: MouseEventHandler }> = ({ path, label, pagePath, onClick }) => {
+  return (
+    <a
+      href={path}
+      className={clx('px-4 py-2 rounded-r-lg lg:rounded-r-none rounded-l-lg', pagePath === path ? 'bg-base-100' : 'hover:bg-base-100/40')}
+      onClick={(event) => {
+        if (onClick != null) {
+          onClick(event)
+        }
+      }}
+
+    >{label}
+    </a>
+  )
+}
+
 export const ReturnToPublicProfile: React.FC = () => {
   return <a className='flex gap-2 items-center btn btn-sm btn-outline no-animation' href='/api/user/me'><ArrowLeftIcon className='w-5 h-5' />Go to your public profile</a>
 }

src/components/users/account/UpdateProfileForm.tsx

@@ -76,7 +76,7 @@ export const UpdateProfileForm: React.FC = () => {
     if (session.status === 'unauthenticated') {
       void signIn('auth0') // send users to Auth0 login screen
     }
-  })
+  }, [session])
 
   useEffect(() => {
     const event = (e: Event): void => {

yarn.lock

@@ -1306,10 +1306,10 @@
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.1.1.tgz#076d78ce99822258cf813ecc1e7fa460fa74d052"
   integrity sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg==
 
-"@headlessui/react@^1.6.4":
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.4.tgz#ba7f50fda20667276ee84fcd4c2a459aa26187e3"
-  integrity sha512-D8n5yGCF3WIkPsjEYeM8knn9jQ70bigGGb5aUvN6y4BGxcT3OcOQOKcM3zRGllRCZCFxCZyQvYJF6ZE7bQUOyQ==
+"@headlessui/react@^1.7.15":
+  version "1.7.15"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.15.tgz#53ef6ae132af81b8f188414767b6e79ebf8dc73f"
+  integrity sha512-OTO0XtoRQ6JPB1cKNFYBZv2Q0JMqMGNhYP1CjPvcJvjz8YGokz8oAj89HIYZGN0gZzn/4kk9iUpmMF4Q21Gsqw==
   dependencies:
     client-only "^0.0.1"