From 3ccea65d2a14ddbd4dcb66d5aed863fb873a1bbd Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Sun, 9 Oct 2022 13:51:22 +0800 Subject: [PATCH] [portal][ui] make product navigation appear in mobile menu --- .../portal/src/components/global/AppShell.tsx | 136 ++---------------- .../src/components/global/GlobalNavigation.ts | 24 ++++ .../src/components/global/HomeNavigation.ts | 4 +- .../components/global/MobileNavigation.tsx | 132 +++++++++++++++++ .../components/global/ProductNavigation.tsx | 99 ++++++------- 5 files changed, 223 insertions(+), 172 deletions(-) create mode 100644 apps/portal/src/components/global/GlobalNavigation.ts create mode 100644 apps/portal/src/components/global/MobileNavigation.tsx diff --git a/apps/portal/src/components/global/AppShell.tsx b/apps/portal/src/components/global/AppShell.tsx index c94c1f58..c0fb33a1 100644 --- a/apps/portal/src/components/global/AppShell.tsx +++ b/apps/portal/src/components/global/AppShell.tsx @@ -4,36 +4,19 @@ import { useRouter } from 'next/router'; import { signIn, signOut, useSession } from 'next-auth/react'; import type { ReactNode } from 'react'; import { Fragment, useState } from 'react'; -import { Dialog, Menu, Transition } from '@headlessui/react'; -import { - Bars3BottomLeftIcon, - BriefcaseIcon, - CurrencyDollarIcon, - DocumentTextIcon, - HomeIcon, - XMarkIcon, -} from '@heroicons/react/24/outline'; +import { Menu, Transition } from '@headlessui/react'; +import { Bars3BottomLeftIcon } from '@heroicons/react/24/outline'; +import GlobalNavigation from '~/components/global/GlobalNavigation'; import HomeNavigation from '~/components/global/HomeNavigation'; import OffersNavigation from '~/components/offers/OffersNavigation'; import QuestionsNavigation from '~/components/questions/QuestionsNavigation'; import ResumesNavigation from '~/components/resumes/ResumesNavigation'; +import MobileNavigation from './MobileNavigation'; import type { ProductNavigationItems } from './ProductNavigation'; import ProductNavigation from './ProductNavigation'; -const sidebarNavigation = [ - { current: false, href: '/', icon: HomeIcon, name: 'Home' }, - { current: false, href: '/resumes', icon: DocumentTextIcon, name: 'Resumes' }, - { - current: false, - href: '/questions', - icon: BriefcaseIcon, - name: 'Questions', - }, - { current: false, href: '/offers', icon: CurrencyDollarIcon, name: 'Offers' }, -]; - type Props = Readonly<{ children: ReactNode; }>; @@ -157,23 +140,18 @@ export default function AppShell({ children }: Props) {
- {sidebarNavigation.map((item) => ( + {GlobalNavigation.map((item) => (
{/* Mobile menu */} - - - -
- - -
- - - -
- -
- -
- - Tech Interview Handbook - -
-
- -
- - - -
-
- + {/* Content area */}
diff --git a/apps/portal/src/components/global/GlobalNavigation.ts b/apps/portal/src/components/global/GlobalNavigation.ts new file mode 100644 index 00000000..d60463ef --- /dev/null +++ b/apps/portal/src/components/global/GlobalNavigation.ts @@ -0,0 +1,24 @@ +import { + BriefcaseIcon, + CurrencyDollarIcon, + DocumentTextIcon, +} from '@heroicons/react/24/outline'; + +type GlobalNavigationItem = Readonly<{ + href: string; + icon: (props: React.ComponentProps<'svg'>) => JSX.Element; + name: string; +}>; +export type GlobalNavigationItems = ReadonlyArray; + +const globalNavigation: GlobalNavigationItems = [ + { href: '/offers', icon: CurrencyDollarIcon, name: 'Offers' }, + { + href: '/questions', + icon: BriefcaseIcon, + name: 'Questions', + }, + { href: '/resumes', icon: DocumentTextIcon, name: 'Resumes' }, +]; + +export default globalNavigation; diff --git a/apps/portal/src/components/global/HomeNavigation.ts b/apps/portal/src/components/global/HomeNavigation.ts index 6196edd6..bed3b924 100644 --- a/apps/portal/src/components/global/HomeNavigation.ts +++ b/apps/portal/src/components/global/HomeNavigation.ts @@ -1,6 +1,8 @@ import type { ProductNavigationItems } from '~/components/global/ProductNavigation'; const navigation: ProductNavigationItems = [ + { href: '/offers', name: 'Offers' }, + { href: '/questions', name: 'Question Bank' }, { children: [ { href: '/resumes', name: 'View Resumes' }, @@ -9,8 +11,6 @@ const navigation: ProductNavigationItems = [ href: '#', name: 'Resumes', }, - { href: '/questions', name: 'Question Bank' }, - { href: '/offers', name: 'Offers' }, ]; const config = { diff --git a/apps/portal/src/components/global/MobileNavigation.tsx b/apps/portal/src/components/global/MobileNavigation.tsx new file mode 100644 index 00000000..8ce0591f --- /dev/null +++ b/apps/portal/src/components/global/MobileNavigation.tsx @@ -0,0 +1,132 @@ +import clsx from 'clsx'; +import Link from 'next/link'; +import { Fragment } from 'react'; +import { Dialog, Transition } from '@headlessui/react'; +import { XMarkIcon } from '@heroicons/react/24/outline'; +import { HorizontalDivider } from '@tih/ui'; + +import type { GlobalNavigationItems } from './GlobalNavigation'; +import type { ProductNavigationItems } from './ProductNavigation'; + +type Props = Readonly<{ + globalNavigationItems: GlobalNavigationItems; + isShown?: boolean; + productNavigationItems: ProductNavigationItems; + productTitle: string; + setIsShown: (isShown: boolean) => void; +}>; + +export default function MobileNavigation({ + globalNavigationItems, + isShown, + productNavigationItems, + productTitle, + setIsShown, +}: Props) { + return ( + + + +
+ +
+ + + +
+ +
+ +
+ + Tech Interview Handbook + +
+
+
{productTitle}
+ +
+ + + +
+
+ + ); +} diff --git a/apps/portal/src/components/global/ProductNavigation.tsx b/apps/portal/src/components/global/ProductNavigation.tsx index 58f383d9..e34cadd7 100644 --- a/apps/portal/src/components/global/ProductNavigation.tsx +++ b/apps/portal/src/components/global/ProductNavigation.tsx @@ -1,4 +1,5 @@ import clsx from 'clsx'; +import Link from 'next/link'; import { Fragment } from 'react'; import { Menu, Transition } from '@headlessui/react'; import { ChevronDownIcon } from '@heroicons/react/20/solid'; @@ -18,55 +19,57 @@ type Props = Readonly<{ export default function ProductNavigation({ items, title }: Props) { return ( -