@primer/gatsby-theme-doctocat 4.6.1 → 4.6.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @primer/gatsby-theme-doctocat
 
+## 4.6.2
+
+### Patch Changes
+
+- [`545c1ef`](https://github.com/primer/doctocat/commit/545c1ef96087e3da1990c206e484f0bd06e5eb39) [#618](https://github.com/primer/doctocat/pull/618) Thanks [@josepmartins](https://github.com/josepmartins)! - Add missing `pathPrefix`` to the selected state in Underlinenav items
+
 ## 4.6.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/gatsby-theme-doctocat",
-  "version": "4.6.1",
+  "version": "4.6.2",
   "main": "index.js",
   "license": "MIT",
   "scripts": {

package/src/components/header.js

@@ -5,6 +5,7 @@ import {Link as GatsbyLink} from 'gatsby'
 import React from 'react'
 import primerNavItems from '../primer-nav.yml'
 import useSiteMetadata from '../use-site-metadata'
+import usePathPrefix from '../use-path-prefix'
 import MobileSearch from './mobile-search'
 import NavDrawer, {useNavDrawerState} from './nav-drawer'
 import Search from './search'
@@ -17,6 +18,7 @@ function Header({isSearchEnabled, path}) {
   const [isNavDrawerOpen, setIsNavDrawerOpen] = useNavDrawerState(theme.breakpoints[2])
   const [isMobileSearchOpen, setIsMobileSearchOpen] = React.useState(false)
   const siteMetadata = useSiteMetadata()
+  const pathPrefix = usePathPrefix()
 
   return (
     <ThemeProvider>
@@ -92,7 +94,7 @@ function Header({isSearchEnabled, path}) {
           </Box>
           <Box>
             <Box sx={{display: ['none', null, null, 'flex'], alignItems: 'center'}}>
-              <PrimerNavItems path={path} siteMetadata={siteMetadata} items={primerNavItems} />
+              <PrimerNavItems path={path} siteMetadata={siteMetadata} pathPrefix={pathPrefix} items={primerNavItems} />
               {isSearchEnabled ? (
                 <Box sx={{display: ['none', null, null, 'block'], ml: 3}}>
                   <Search />
@@ -138,7 +140,11 @@ Header.defaultProps = {
   isSearchEnabled: true
 }
 
-function PrimerNavItems({siteMetadata, items, path}) {
+function PrimerNavItems({siteMetadata, items, path, pathPrefix}) {
+  console.log('header url', siteMetadata.header.url)
+  console.log('pathPrefix', pathPrefix)
+  console.log('path', path)
+
   return (
     <>
       <VisuallyHidden>
@@ -150,7 +156,7 @@ function PrimerNavItems({siteMetadata, items, path}) {
             <UnderlineNav.Link
               key={index}
               href={item.url}
-              selected={item.url === siteMetadata.header.url + path}
+              selected={item.url === siteMetadata.header.url + pathPrefix + path}
               sx={{fontSize: 2, lineHeight: 'condensed'}}
             >
               {item.title}

package/src/use-path-prefix.js

@@ -0,0 +1,14 @@
+import {useStaticQuery, graphql} from 'gatsby'
+
+function usePathPrefix() {
+  const data = useStaticQuery(graphql`
+    {
+      site {
+        pathPrefix
+      }
+    }
+  `)
+  return data.site.pathPrefix
+}
+
+export default usePathPrefix