fix: add active state to nav links (#2189)

nftstorage · Sep 21, 2022 · ad7e99f · ad7e99f
1 parent d46a0c2
commit ad7e99f
Showing 1 changed file with 17 additions and 5 deletions.
diff --git a/packages/website/components/navbar.js b/packages/website/components/navbar.js
@@ -29,7 +29,7 @@ export default function Navbar({ bgColor = 'bg-nsorange', logo, user }) {
   const queryClient = useQueryClient()
   const { handleClearUser } = useUser()
   const [isMenuOpen, setMenuOpen] = useState(false)
-  const { query } = useRouter()
+  const { query, asPath } = useRouter()
   const version = /** @type {string} */ (query.version)
 
   const logout = useCallback(async () => {
@@ -86,19 +86,22 @@ export default function Navbar({ bgColor = 'bg-nsorange', logo, user }) {
         link: {
           pathname: '/stats',
           query: version ? { version } : null,
+          activeClass: '!text-forest',
         },
         name: 'Stats',
       },
       {
         link: {
           pathname: '/faq',
           query: version ? { version } : null,
+          activeClass: '!text-blue',
         },
         name: 'FAQ',
       },
       {
         link: {
           pathname: BLOG_URL,
+          activeClass: '!text-forest',
         },
         name: 'Blog',
       },
@@ -164,8 +167,13 @@ export default function Navbar({ bgColor = 'bg-nsorange', logo, user }) {
         </Link>
         <div className="flex items-center">
           <div className="desktop-nav-items">
-            {ITEMS.map((item, index) =>
-              item.mobileOnly ? null : (
+            {ITEMS.map((item, index) => {
+              const isActive =
+                item.link &&
+                item.link.pathname !== '/' &&
+                asPath.startsWith(item.link.pathname)
+
+              return item.mobileOnly ? null : (
                 <div
                   className="select-none"
                   key={`nav-link-${index}`}
@@ -174,9 +182,13 @@ export default function Navbar({ bgColor = 'bg-nsorange', logo, user }) {
                   <Link
                     href={item.link || ''}
                     key={item.name}
+                    aria-current={isActive ? 'page' : undefined}
                     className={clsx(
                       'text-xl text-black no-underline underline-hover align-middle',
-                      { mr4: index === ITEMS.length - 1 }
+                      {
+                        mr4: index === ITEMS.length - 1,
+                        [item.link?.activeClass || '!text-white']: isActive,
+                      }
                     )}
                     onClick={item.tracking ? item.tracking : onLinkClick}
                   >
@@ -189,7 +201,7 @@ export default function Navbar({ bgColor = 'bg-nsorange', logo, user }) {
                   )}
                 </div>
               )
-            )}
+            })}
             {user ? (
               <Button
                 onClick={logout}