Add underline

pages/search.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
+import cn from 'classnames'
 import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
 import useSearch from '@lib/bigcommerce/products/use-search'
 import { Layout } from '@components/core'
@@ -38,8 +39,13 @@ export default function Home({
               All Categories
             </li>
             {categories.map((cat) => (
-              <li key={cat.path} className="py-1 text-default">
-                <Link href={getCategoryPath(cat.path, brand)}>
+              <li
+                key={cat.path}
+                className={cn('py-1 text-default', {
+                  underline: getSlug(cat.path) === category,
+                })}
+              >
+                <Link href={getCategoryPath(getSlug(cat.path), brand)}>
                   <a>{cat.name}</a>
                 </Link>
               </li>
@@ -50,8 +56,13 @@ export default function Home({
               All Designers
             </li>
             {brands.flatMap(({ node }) => (
-              <li key={node.path} className="py-1 text-default">
-                <Link href={getDesignerPath(node.path, category)}>
+              <li
+                key={node.path}
+                className={cn('py-1 text-default', {
+                  underline: getSlug(node.path) === `brands/${brand}`,
+                })}
+              >
+                <Link href={getDesignerPath(getSlug(node.path), category)}>
                   <a>{node.name}</a>
                 </Link>
               </li>
@@ -122,14 +133,13 @@ function useSearchMeta(asPath: string) {
   return { category, brand }
 }
 
-function getCategoryPath(path: string, designer?: string) {
-  return designer ? `/search/designers/${designer}${path}` : `/search${path}`
-}
+// Remove trailing and leading slash
+const getSlug = (path: string) => path.replace(/^\/|\/$/g, '')
 
-function getDesignerPath(path: string, category?: string) {
-  // Remove the trailing slash and replace /brands with /designers
-  const designer = path.replace(/^\/brands/, '/designers').replace(/\/$/, '')
-  const href = `/search${designer}`
+const getCategoryPath = (slug: string, designer?: string) =>
+  designer ? `/search/designers/${designer}/${slug}` : `/search/${slug}`
 
-  return category ? `${href}/${category}` : href
+const getDesignerPath = (slug: string, category?: string) => {
+  const designer = slug.replace(/^brands/, 'designers')
+  return `/search/${designer}${category ? `/${category}` : ''}`
 }