[portal][ui] change app shell UI

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>

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;

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>
+  );
+}

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;

apps/portal/src/components/questions/NavBar.tsx

@@ -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>
-  );
-}

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;

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;

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>

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">