From da0d79e95c136b27a4bf5bfc138cc9ed6b6649e7 Mon Sep 17 00:00:00 2001 From: vincanger <70215737+vincanger@users.noreply.github.com> Date: Thu, 30 Nov 2023 16:57:58 +0100 Subject: [PATCH] add menu items to mobile nav --- src/client/components/AppNavBar.tsx | 2 +- src/client/components/DropdownUser.tsx | 81 ++------------------- src/client/components/UserMenuItems.tsx | 85 ++++++++++++++++++++++ src/client/landing-page/LandingPage.tsx | 32 ++++---- src/client/landing-page/contentSections.ts | 4 +- 5 files changed, 110 insertions(+), 94 deletions(-) create mode 100644 src/client/components/UserMenuItems.tsx diff --git a/src/client/components/AppNavBar.tsx b/src/client/components/AppNavBar.tsx index 309edbf..48278d7 100644 --- a/src/client/components/AppNavBar.tsx +++ b/src/client/components/AppNavBar.tsx @@ -55,7 +55,7 @@ export default function AppNavBar() { ) : ( - + )} diff --git a/src/client/components/DropdownUser.tsx b/src/client/components/DropdownUser.tsx index 4798b40..5ce43b5 100644 --- a/src/client/components/DropdownUser.tsx +++ b/src/client/components/DropdownUser.tsx @@ -1,11 +1,9 @@ import { useEffect, useRef, useState } from 'react'; -import { Link } from 'react-router-dom'; // TODO change all Links to wasp router links import { CgProfile } from 'react-icons/cg'; -import { MdOutlineSpaceDashboard } from 'react-icons/md'; -import { TfiDashboard } from 'react-icons/tfi'; -import logout from '@wasp/auth/logout'; +import type { User } from '@wasp/entities' +import { UserMenuItems } from './UserMenuItems'; -const DropdownUser = ({ username, isUserAdmin }: { username: string | undefined, isUserAdmin: boolean }) => { +const DropdownUser = ({ user } : { user: Partial }) => { const [dropdownOpen, setDropdownOpen] = useState(false); const trigger = useRef(null); @@ -44,7 +42,7 @@ const DropdownUser = ({ username, isUserAdmin }: { username: string | undefined, className='flex items-center gap-4 duration-300 ease-in-out text-gray-900 hover:text-yellow-500' > - {username} + {user?.email?.split('@')[0]} -
    -
  • - - - App - -
    • -
  • - - - - - - Account Settings - -
    • -
- {isUserAdmin &&
    -
  • - - - Admin Dashboard - -
    • -
} - + {/* */} diff --git a/src/client/components/UserMenuItems.tsx b/src/client/components/UserMenuItems.tsx new file mode 100644 index 0000000..3e1c2f8 --- /dev/null +++ b/src/client/components/UserMenuItems.tsx @@ -0,0 +1,85 @@ +import { Link } from '@wasp/router'; +import { MdOutlineSpaceDashboard } from 'react-icons/md'; +import { TfiDashboard } from 'react-icons/tfi'; +import logout from '@wasp/auth/logout'; +import type { User } from '@wasp/entities'; + +// TODO: make mobile-friendly +export const UserMenuItems = ({ user }: { user?: Partial }) => { + return ( + <> +
    +
  • + + + App + +
    • +
  • + + + + + + Account Settings + +
    • +
+ {!!user && user.isAdmin && ( +
    +
  • + + + Admin Dashboard + +
    • +
+ )} + + + ); +}; diff --git a/src/client/landing-page/LandingPage.tsx b/src/client/landing-page/LandingPage.tsx index b50b5d1..9612c37 100644 --- a/src/client/landing-page/LandingPage.tsx +++ b/src/client/landing-page/LandingPage.tsx @@ -12,6 +12,7 @@ import DropdownUser from '../components/DropdownUser'; import { useHistory } from 'react-router-dom'; import stripePayment from '@wasp/actions/stripePayment'; import { CUSTOMER_PORTAL_LINK } from '../../shared/const'; +import { UserMenuItems } from '../components/UserMenuItems'; export default function LandingPage() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); @@ -36,6 +37,8 @@ export default function LandingPage() { } } + const NavLogo = () => Open SaaS App; + return (
{/* Header */} @@ -43,7 +46,7 @@ export default function LandingPage() {
@@ -85,13 +88,9 @@ export default function LandingPage() {
- - Your Company - + + Open SaaS +
diff --git a/src/client/landing-page/contentSections.ts b/src/client/landing-page/contentSections.ts index f8f034b..a735ed1 100644 --- a/src/client/landing-page/contentSections.ts +++ b/src/client/landing-page/contentSections.ts @@ -3,8 +3,8 @@ import { TierIds } from '@wasp/shared/const'; export const navigation = [ { name: 'Features', href: '#features' }, { name: 'Pricing', href: '#pricing' }, - { name: 'Documentation', href: 'https://saas-template.gitbook.io/test' }, - { name: 'Blog', href: 'https://saas-template.gitbook.io/posts/' }, + { name: 'Documentation', href: '#' }, + { name: 'Blog', href: '#' }, ]; export const features = [ {