[portal][ui] improve product navbar

apps/portal/src/components/global/AppShell.tsx

@@ -109,6 +109,7 @@ export default function AppShell({ children }: Props) {
     navigation: ProductNavigationItems;
     showGlobalNav: boolean;
     title: string;
+    titleHref: string;
   }> = (() => {
     const path = router.pathname;
     if (path.startsWith('/resumes')) {
@@ -190,6 +191,7 @@ export default function AppShell({ children }: Props) {
                 <ProductNavigation
                   items={currentProductNavigation.navigation}
                   title={currentProductNavigation.title}
+                  titleHref={currentProductNavigation.titleHref}
                 />
               </div>
               <div className="ml-2 flex items-center space-x-4 sm:ml-6 sm:space-x-6">

apps/portal/src/components/global/HomeNavigation.ts

@@ -17,6 +17,7 @@ const config = {
   navigation,
   showGlobalNav: true,
   title: 'Tech Interview Handbook',
+  titleHref: '/',
 };
 
 export default config;

apps/portal/src/components/global/ProductNavigation.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import { Fragment } from 'react';
 import { Menu, Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
@@ -8,6 +9,7 @@ type NavigationItem = Readonly<{
   children?: ReadonlyArray<NavigationItem>;
   href: string;
   name: string;
+  target?: '_blank';
 }>;
 
 export type ProductNavigationItems = ReadonlyArray<NavigationItem>;
@@ -15,15 +17,21 @@ export type ProductNavigationItems = ReadonlyArray<NavigationItem>;
 type Props = Readonly<{
   items: ProductNavigationItems;
   title: string;
+  titleHref: string;
 }>;
 
-export default function ProductNavigation({ items, title }: Props) {
+export default function ProductNavigation({ items, title, titleHref }: Props) {
+  const router = useRouter();
+
   return (
-    <nav aria-label="Global" className="flex space-x-8">
+    <nav aria-label="Global" className="flex h-full items-center space-x-8">
-      <span className="text-primary-700 text-sm font-medium">{title}</span>
+      <Link className="text-primary-700 text-sm font-medium" href={titleHref}>
-      <div className="hidden space-x-8 md:flex">
+        {title}
-        {items.map((item) =>
+      </Link>
-          item.children != null && item.children.length > 0 ? (
+      <div className="hidden h-full items-center space-x-8 md:flex">
+        {items.map((item) => {
+          const isActive = router.pathname === item.href;
+          return 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-slate-900 focus:outline-none focus:ring-2 focus:ring-offset-2">
                 <span>{item.name}</span>
@@ -63,12 +71,15 @@ export default function ProductNavigation({ items, title }: Props) {
           ) : (
             <Link
               key={item.name}
-              className="hover:text-primary-600 text-sm font-medium text-slate-900"
+              className={clsx(
+                'hover:text-primary-600 inline-flex h-full items-center border-y-2 border-t-transparent text-sm font-medium text-slate-900',
+                isActive ? 'border-b-primary-500' : 'border-b-transparent',
+              )}
               href={item.href}>
               {item.name}
             </Link>
-          ),
+          );
-        )}
+        })}
       </div>
     </nav>
   );

apps/portal/src/components/offers/OffersNavigation.ts

@@ -9,6 +9,7 @@ const config = {
   navigation,
   showGlobalNav: false,
   title: 'Tech Offers Repo',
+  titleHref: '/offers',
 };
 
 export default config;

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

@@ -1,5 +0,0 @@
-export default function QuestionBankTitle() {
-  return (
-    <h1 className="text-center text-4xl font-bold">Interview Questions</h1>
-  );
-}

apps/portal/src/components/questions/QuestionsNavigation.ts

@@ -1,7 +1,6 @@
 import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
 
 const navigation: ProductNavigationItems = [
-  { href: '/questions', name: 'Home' },
   { href: '/questions', name: 'My Lists' },
   { href: '/questions', name: 'My Questions' },
   { href: '/questions', name: 'History' },
@@ -11,6 +10,7 @@ const config = {
   navigation,
   showGlobalNav: false,
   title: 'Questions Bank',
+  titleHref: '/questions',
 };
 
 export default config;

apps/portal/src/components/resumes/ResumesNavigation.ts

@@ -11,6 +11,7 @@ const navigation: ProductNavigationItems = [
     children: [],
     href: 'https://www.techinterviewhandbook.org/resume/',
     name: 'Resume Guide',
+    target: '_blank',
   },
 ];
 
@@ -18,6 +19,7 @@ const config = {
   navigation,
   showGlobalNav: false,
   title: 'Resumes',
+  titleHref: '/resumes',
 };
 
 export default config;