From 8481ab1044601252d26f41dfa19ba6bc8a65810a Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sun, 9 Oct 2022 11:08:57 +0800
Subject: [PATCH] [portal][ui] change app shell UI

---
 apps/portal/public/favicon.ico                | Bin 9662 -> 9797 bytes
 .../portal/src/components/global/AppShell.tsx |  90 +++++++++++++-----
 .../src/components/global/HomeNavigation.ts   |  21 ++++
 .../components/global/ProductNavigation.tsx   |  72 ++++++++++++++
 .../src/components/offers/OffersNavigation.ts |  22 +++++
 .../src/components/questions/NavBar.tsx       |  56 -----------
 .../questions/QuestionsNavigation.ts          |  15 +++
 .../components/resumes/ResumesNavigation.ts   |  22 +++++
 apps/portal/src/pages/index.tsx               |   4 -
 apps/portal/src/pages/questions/index.tsx     |   6 +-
 10 files changed, 218 insertions(+), 90 deletions(-)
 create mode 100644 apps/portal/src/components/global/HomeNavigation.ts
 create mode 100644 apps/portal/src/components/global/ProductNavigation.tsx
 create mode 100644 apps/portal/src/components/offers/OffersNavigation.ts
 delete mode 100644 apps/portal/src/components/questions/NavBar.tsx
 create mode 100644 apps/portal/src/components/questions/QuestionsNavigation.ts
 create mode 100644 apps/portal/src/components/resumes/ResumesNavigation.ts

diff --git a/apps/portal/public/favicon.ico b/apps/portal/public/favicon.ico
index d3b456c0702274473e7d64cca7f8815d089677c2..2b50a78284f6df84d92268e4a3948a2a7acdf04c 100644
GIT binary patch
literal 9797
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

literal 9662
zcmeI2%}Z557{;f6qIFO~tME^0(ZYpMi#~`*h`^AD0*My62nvc^L<u2RvQR_JBn>r1
z%}PbRXi`}jMJ<Y;FQ)q(c@BqZX3orXXzqoS*Z1D>Ju|=eoo7D0D8#19cU_&R{M;fs
zwhOUY2(hDLl_s&TVrWmkwh6Iy=Z0-G2=U-%mkhCyQn!3F{xrIUu;ZEKq4DVKs9y;G
z#O=PSU=QW5mfDB#S5xgn_!kC7szy7${KFl0s*2s0|8dViP4kxr$7-4%^97slAC}i!
zFUrs}49{OVdtNpjIwBi(?N04<<8j&Dc0;ZVPdL}fb^p)qJK)B+$bmVzdOSnsqkH$u
zb4@3ce!za9z9IP?+Ffho%0JsTl(L5MUpUp0@S*M|zS5<uX&#u1yt=sZXSE-~&$=Ur
zJf^Acd#SeY+7|E1|6*i1?Z=lNdWU9EcN<Igci@JepsQ@V`Z|yQ(XG33rgu<&m|jS2
zw6iDSan(Q8D)>#BQJMIjb7q?Zl^;5PH98|d&#p+hvaYqI`=jz;{T|tM`C1b9ern!Y
zBh=le_T=Zh+3Ey-)ELY^%4=F)H4pOlw6&-4Kg+L^T-GO^{gDf5@1lEhXMLWARv%8L
z3@WGTy^f!;zn0%7d1M(-KVR+edFbD^1~{&dxAC)|?@MbkPgi8LdDI_ggeivO`FIz8
z^oP0l^rUPY+r-3ntXpW$rhgx9#=7z|J~RiOcUZ^FN%b7V$NTc5Z&MB?wt@CiQhS?r
zkc$sDV?+3LIbdC4UsdmGV2AEuru;Y$Wb*N${8$g~Cg)Nu;I5P1TcLMq2JE(TD+WJm
z^lkBF$`1z20dfE@JPd7lb&tib>Im8)J8JJzbF#zx=!UVO`r-39tFsKe4~E<^*r$*G
zTYikC?nk_<;jWj>E$_7tH)D(7SJweJQGe*)=dM8}A72DN#>?(S;K!Q9T7ap0s%aj4
zxEWg%zp5cH^4zlB*|NEi$;TJP|8;&<t970MwtEkA@Zn}`QT)0!04`{UYawqxB@_Kv
zXRmB+K4Z0(V<(coznTv>TI1Lc`sQoZLnk`JXDB?&SZkdpH@yqL%8>Uygr7O(?Wg39
z<#jdnX^X|paeY{IvFs<7*D?9D#p1@exKI1A>SAN^oAyr~r>QL_|ChPvHC_LYGmACN
zuluadq!UwnEd7}7J|<36dn|r@o^4|CX^+8Q#J<BEWAGPMd*tx1`HR>yS$lZ?AJBgv
HrvkqLky{gH

diff --git a/apps/portal/src/components/global/AppShell.tsx b/apps/portal/src/components/global/AppShell.tsx
index fde9d3b6..c94c1f58 100644
--- a/apps/portal/src/components/global/AppShell.tsx
+++ b/apps/portal/src/components/global/AppShell.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import { signIn, signOut, useSession } from 'next-auth/react';
 import type { ReactNode } from 'react';
 import { Fragment, useState } from 'react';
@@ -13,6 +14,14 @@ import {
   XMarkIcon,
 } from '@heroicons/react/24/outline';
 
+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 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' },
@@ -39,14 +48,15 @@ function ProfileJewel() {
 
   if (session == null) {
     return (
-      <a
+      <Link
+        className="text-sm font-medium"
         href="/api/auth/signin"
         onClick={(event) => {
           event.preventDefault();
           signIn();
         }}>
         Sign in
-      </a>
+      </Link>
     );
   }
 
@@ -65,7 +75,7 @@ function ProfileJewel() {
   return (
     <Menu as="div" className="relative flex-shrink-0">
       <div>
-        <Menu.Button className="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+        <Menu.Button className="focus:ring-primary-500 flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-offset-2">
           <span className="sr-only">Open user menu</span>
           {session?.user?.image == null ? (
             <span>Render some icon</span>
@@ -110,18 +120,41 @@ function ProfileJewel() {
 
 export default function AppShell({ children }: Props) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const router = useRouter();
+
+  const currentProductNavigation: Readonly<{
+    navigation: ProductNavigationItems;
+    title: string;
+  }> = (() => {
+    const path = router.pathname;
+    if (path.startsWith('/resumes')) {
+      return ResumesNavigation;
+    }
+
+    if (path.startsWith('/offers')) {
+      return OffersNavigation;
+    }
+
+    if (path.startsWith('/questions')) {
+      return QuestionsNavigation;
+    }
+
+    return HomeNavigation;
+  })();
 
   return (
     <div className="flex h-full min-h-screen">
       {/* Narrow sidebar */}
-      <div className="hidden w-28 overflow-y-auto bg-indigo-700 md:block">
+      <div className="hidden w-28 overflow-y-auto border-r border-slate-200 bg-white md:block">
         <div className="flex w-full flex-col items-center py-6">
           <div className="flex flex-shrink-0 items-center">
-            <img
-              alt="Your Company"
-              className="h-8 w-auto"
-              src="https://tailwindui.com/img/logos/mark.svg?color=white"
-            />
+            <Link href="/">
+              <img
+                alt="Tech Interview Handbook"
+                className="h-8 w-auto"
+                src="/logo.svg"
+              />
+            </Link>
           </div>
           <div className="mt-6 w-full flex-1 space-y-1 px-2">
             {sidebarNavigation.map((item) => (
@@ -130,8 +163,8 @@ export default function AppShell({ children }: Props) {
                 aria-current={item.current ? 'page' : undefined}
                 className={clsx(
                   item.current
-                    ? 'bg-indigo-800 text-white'
-                    : 'text-indigo-100 hover:bg-indigo-800 hover:text-white',
+                    ? 'bg-primary-50 text-slate-700'
+                    : 'text-slate-700 hover:bg-slate-200',
                   'group flex w-full flex-col items-center rounded-md p-3 text-xs font-medium',
                 )}
                 href={item.href}>
@@ -139,8 +172,8 @@ export default function AppShell({ children }: Props) {
                   aria-hidden="true"
                   className={clsx(
                     item.current
-                      ? 'text-white'
-                      : 'text-indigo-300 group-hover:text-white',
+                      ? 'text-primary-500'
+                      : 'text-slate-500 group-hover:text-slate-700',
                     'h-6 w-6',
                   )}
                 />
@@ -177,7 +210,7 @@ export default function AppShell({ children }: Props) {
               leave="transition ease-in-out duration-300 transform"
               leaveFrom="translate-x-0"
               leaveTo="-translate-x-full">
-              <Dialog.Panel className="relative flex w-full max-w-xs flex-1 flex-col bg-indigo-700 pt-5 pb-4">
+              <Dialog.Panel className="relative flex w-full max-w-xs flex-1 flex-col bg-white pt-5 pb-4">
                 <Transition.Child
                   as={Fragment}
                   enter="ease-in-out duration-300"
@@ -200,11 +233,13 @@ export default function AppShell({ children }: Props) {
                   </div>
                 </Transition.Child>
                 <div className="flex flex-shrink-0 items-center px-4">
-                  <img
-                    alt="Your Company"
-                    className="h-8 w-auto"
-                    src="https://tailwindui.com/img/logos/mark.svg?color=white"
-                  />
+                  <Link href="/">
+                    <img
+                      alt="Tech Interview Handbook"
+                      className="h-8 w-auto"
+                      src="/logo.svg"
+                    />
+                  </Link>
                 </div>
                 <div className="mt-5 h-0 flex-1 overflow-y-auto px-2">
                   <nav className="flex h-full flex-col">
@@ -215,8 +250,8 @@ export default function AppShell({ children }: Props) {
                           aria-current={item.current ? 'page' : undefined}
                           className={clsx(
                             item.current
-                              ? 'bg-indigo-800 text-white'
-                              : 'text-indigo-100 hover:bg-indigo-800 hover:text-white',
+                              ? 'bg-primary-50 text-slate-700'
+                              : 'text-slate-700 hover:bg-slate-200',
                             'group flex items-center rounded-md py-2 px-3 text-sm font-medium',
                           )}
                           href={item.href}>
@@ -224,8 +259,8 @@ export default function AppShell({ children }: Props) {
                             aria-hidden="true"
                             className={clsx(
                               item.current
-                                ? 'text-white'
-                                : 'text-indigo-300 group-hover:text-white',
+                                ? 'text-primary-500'
+                                : 'text-slate-500 group-hover:text-slate-700',
                               'mr-3 h-6 w-6',
                             )}
                           />
@@ -249,14 +284,19 @@ export default function AppShell({ children }: Props) {
         <header className="w-full">
           <div className="relative z-10 flex h-16 flex-shrink-0 border-b border-gray-200 bg-white shadow-sm">
             <button
-              className="border-r border-gray-200 px-4 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden"
+              className="focus:ring-primary-500 border-r border-gray-200 px-4 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset md:hidden"
               type="button"
               onClick={() => setMobileMenuOpen(true)}>
               <span className="sr-only">Open sidebar</span>
               <Bars3BottomLeftIcon aria-hidden="true" className="h-6 w-6" />
             </button>
             <div className="flex flex-1 justify-between px-4 sm:px-6">
-              <div className="flex flex-1 items-center">Some menu items</div>
+              <div className="flex flex-1 items-center">
+                <ProductNavigation
+                  items={currentProductNavigation.navigation}
+                  title={currentProductNavigation.title}
+                />
+              </div>
               <div className="ml-2 flex items-center space-x-4 sm:ml-6 sm:space-x-6">
                 <ProfileJewel />
               </div>
diff --git a/apps/portal/src/components/global/HomeNavigation.ts b/apps/portal/src/components/global/HomeNavigation.ts
new file mode 100644
index 00000000..6196edd6
--- /dev/null
+++ b/apps/portal/src/components/global/HomeNavigation.ts
@@ -0,0 +1,21 @@
+import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
+
+const navigation: ProductNavigationItems = [
+  {
+    children: [
+      { href: '/resumes', name: 'View Resumes' },
+      { href: '/resumes/submit', name: 'Submit Resume' },
+    ],
+    href: '#',
+    name: 'Resumes',
+  },
+  { href: '/questions', name: 'Question Bank' },
+  { href: '/offers', name: 'Offers' },
+];
+
+const config = {
+  navigation,
+  title: 'Tech Interview Handbook',
+};
+
+export default config;
diff --git a/apps/portal/src/components/global/ProductNavigation.tsx b/apps/portal/src/components/global/ProductNavigation.tsx
new file mode 100644
index 00000000..58f383d9
--- /dev/null
+++ b/apps/portal/src/components/global/ProductNavigation.tsx
@@ -0,0 +1,72 @@
+import clsx from 'clsx';
+import { Fragment } from 'react';
+import { Menu, Transition } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
+
+type NavigationItem = Readonly<{
+  children?: ReadonlyArray<NavigationItem>;
+  href: string;
+  name: string;
+}>;
+
+export type ProductNavigationItems = ReadonlyArray<NavigationItem>;
+
+type Props = Readonly<{
+  items: ProductNavigationItems;
+  title: string;
+}>;
+
+export default function ProductNavigation({ items, title }: Props) {
+  return (
+    <nav aria-label="Global" className="flex space-x-10">
+      <span className="text-primary-700 text-sm font-medium">{title}</span>
+      {items.map((item) =>
+        item.children != null && item.children.length > 0 ? (
+          <Menu key={item.name} as="div" className="relative text-left">
+            <Menu.Button className="focus:ring-primary-600 flex items-center rounded-md text-sm font-medium text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2">
+              <span>{item.name}</span>
+              <ChevronDownIcon
+                aria-hidden="true"
+                className="ml-1 h-5 w-5 text-gray-500"
+              />
+            </Menu.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-100"
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="transform opacity-100 scale-100"
+              leave="transition ease-in duration-75"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95">
+              <Menu.Items className="absolute left-0 z-10 mt-2 w-40 origin-top-left rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                <div className="py-1">
+                  {item.children.map((child) => (
+                    <Menu.Item key={child.name}>
+                      {({ active }) => (
+                        <a
+                          className={clsx(
+                            active ? 'bg-gray-100' : '',
+                            'block px-4 py-2 text-sm text-gray-700',
+                          )}
+                          href={child.href}>
+                          {child.name}
+                        </a>
+                      )}
+                    </Menu.Item>
+                  ))}
+                </div>
+              </Menu.Items>
+            </Transition>
+          </Menu>
+        ) : (
+          <a
+            key={item.name}
+            className="text-sm font-medium text-gray-900"
+            href={item.href}>
+            {item.name}
+          </a>
+        ),
+      )}
+    </nav>
+  );
+}
diff --git a/apps/portal/src/components/offers/OffersNavigation.ts b/apps/portal/src/components/offers/OffersNavigation.ts
new file mode 100644
index 00000000..056fd334
--- /dev/null
+++ b/apps/portal/src/components/offers/OffersNavigation.ts
@@ -0,0 +1,22 @@
+import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
+
+const navigation: ProductNavigationItems = [
+  {
+    children: [
+      { href: '#', name: 'Technical Support' },
+      { href: '#', name: 'Sales' },
+      { href: '#', name: 'General' },
+    ],
+    href: '#',
+    name: 'Inboxes',
+  },
+  { children: [], href: '#', name: 'Reporting' },
+  { children: [], href: '#', name: 'Settings' },
+];
+
+const config = {
+  navigation,
+  title: 'Offers',
+};
+
+export default config;
diff --git a/apps/portal/src/components/questions/NavBar.tsx b/apps/portal/src/components/questions/NavBar.tsx
deleted file mode 100644
index 99b76457..00000000
--- a/apps/portal/src/components/questions/NavBar.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import Link from 'next/link';
-
-const navigation = [
-  { href: '/questions/landing', name: '*Landing*' },
-  { href: '/questions', name: 'Home' },
-  { href: '#', name: 'My Lists' },
-  { href: '#', name: 'My Questions' },
-  { href: '#', name: 'History' },
-];
-
-export default function NavBar() {
-  return (
-    <header className="bg-indigo-600">
-      <nav aria-label="Top" className="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex w-full items-center justify-between border-b border-indigo-500 py-3 lg:border-none">
-          <div className="flex items-center">
-            <a className="flex items-center" href="/questions">
-              <span className="sr-only">TIH Question Bank</span>
-              <img alt="TIH Logo" className="h-10 w-auto" src="/logo.svg" />
-              <span className="ml-4 font-bold text-white">
-                TIH Question Bank
-              </span>
-            </a>
-            <div className="ml-8 hidden space-x-6 lg:block">
-              {navigation.map((link) => (
-                <Link
-                  key={link.name}
-                  className="font-sm text-sm text-white hover:text-indigo-50"
-                  href={link.href}>
-                  {link.name}
-                </Link>
-              ))}
-            </div>
-          </div>
-          <div className="ml-8 space-x-4">
-            <a
-              className="inline-block rounded-md border border-transparent bg-indigo-500 py-2 px-4 text-base font-medium text-white hover:bg-opacity-75"
-              href="#">
-              Sign in
-            </a>
-          </div>
-        </div>
-        <div className="flex flex-wrap justify-center space-x-6 py-4 lg:hidden">
-          {navigation.map((link) => (
-            <Link
-              key={link.name}
-              className="text-base font-medium text-white hover:text-indigo-50"
-              href={link.href}>
-              {link.name}
-            </Link>
-          ))}
-        </div>
-      </nav>
-    </header>
-  );
-}
diff --git a/apps/portal/src/components/questions/QuestionsNavigation.ts b/apps/portal/src/components/questions/QuestionsNavigation.ts
new file mode 100644
index 00000000..275bc051
--- /dev/null
+++ b/apps/portal/src/components/questions/QuestionsNavigation.ts
@@ -0,0 +1,15 @@
+import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
+
+const navigation: ProductNavigationItems = [
+  { href: '/questions', name: 'Home' },
+  { href: '#', name: 'My Lists' },
+  { href: '#', name: 'My Questions' },
+  { href: '#', name: 'History' },
+];
+
+const config = {
+  navigation,
+  title: 'Questions Bank',
+};
+
+export default config;
diff --git a/apps/portal/src/components/resumes/ResumesNavigation.ts b/apps/portal/src/components/resumes/ResumesNavigation.ts
new file mode 100644
index 00000000..b339b449
--- /dev/null
+++ b/apps/portal/src/components/resumes/ResumesNavigation.ts
@@ -0,0 +1,22 @@
+import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
+
+const navigation: ProductNavigationItems = [
+  {
+    children: [
+      { href: '#', name: 'Technical Support' },
+      { href: '#', name: 'Sales' },
+      { href: '#', name: 'General' },
+    ],
+    href: '#',
+    name: 'Inboxes',
+  },
+  { children: [], href: '#', name: 'Reporting' },
+  { children: [], href: '#', name: 'Settings' },
+];
+
+const config = {
+  navigation,
+  title: 'Resumes',
+};
+
+export default config;
diff --git a/apps/portal/src/pages/index.tsx b/apps/portal/src/pages/index.tsx
index 2d3ab330..c5bf7af5 100644
--- a/apps/portal/src/pages/index.tsx
+++ b/apps/portal/src/pages/index.tsx
@@ -1,5 +1,3 @@
-import { Button, Spinner } from '@tih/ui';
-
 export default function HomePage() {
   return (
     <main className="flex-1 overflow-y-auto">
@@ -8,8 +6,6 @@ export default function HomePage() {
           <h1 className="text-primary-600 text-center text-4xl font-bold">
             Homepage
           </h1>
-          <Button label="Button text" size="md" variant="primary" />
-          <Spinner size="md" />
         </div>
       </div>
     </main>
diff --git a/apps/portal/src/pages/questions/index.tsx b/apps/portal/src/pages/questions/index.tsx
index cf6611e3..ee7b3512 100644
--- a/apps/portal/src/pages/questions/index.tsx
+++ b/apps/portal/src/pages/questions/index.tsx
@@ -3,7 +3,6 @@ import { useMemo, useState } from 'react';
 import ContributeQuestionCard from '~/components/questions/ContributeQuestionCard';
 import type { FilterOptions } from '~/components/questions/filter/FilterSection';
 import FilterSection from '~/components/questions/filter/FilterSection';
-import NavBar from '~/components/questions/NavBar';
 import QuestionOverviewCard from '~/components/questions/QuestionOverviewCard';
 import QuestionSearchBar from '~/components/questions/QuestionSearchBar';
 
@@ -98,10 +97,7 @@ export default function QuestionsHomePage() {
 
   return (
     <main className="flex flex-1 flex-col items-stretch overflow-y-auto">
-      <div className="pb-4">
-        <NavBar></NavBar>
-      </div>
-      <div className="flex">
+      <div className="flex pt-4">
         <section className="w-[300px] border-r px-4">
           <h2 className="text-xl font-semibold">Filter by</h2>
           <div className="divide-y divide-slate-200">