Skip to content
This repository was archived by the owner on Feb 27, 2024. It is now read-only.

Commit b3cc008

Browse files
dcooneydcooney
committed
Adjustments for active link classes.
1 parent ea015e5 commit b3cc008

File tree

11 files changed

+115
-91
lines changed

11 files changed

+115
-91
lines changed

‎api/wordpress/_global/getMenus.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import filterByLocation from '@/api/wordpress/menus/filterByLocation'
1313
*/
1414
export default async function getMenus(locations = []) {
1515
if (!locations.length > 0) {
16-
return [] // exit if empty
16+
return [] // Exit if empty.
1717
}
1818
const query = gql`
1919
query menuQuery {

‎api/wordpress/_global/getPostTypeStaticProps.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ export default async function getPostTypeStaticProps(
5454
}
5555

5656
// Get WP Nav Menus.
57-
props.menus = await getMenus(config.navMenus)
57+
const menus = await getMenus(config.navMenus)
58+
props.menus = menus
5859

5960
// Add Algolia env vars.
6061
props.algolia = {

‎components/atoms/Logo/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export {default} from './Logo.js'
1+
export {default} from './Logo'

‎components/common/ActiveLink.js

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎components/molecules/Navigation/Navigation.js

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
1-
import ActiveLink from '@/components/common/ActiveLink'
1+
import isLinkActive from '@/functions/isLinkActive'
22
import cn from 'classnames'
3+
import Link from 'next/link'
4+
import {useRouter} from 'next/router'
35
import styles from './Navigation.module.css'
46

57
/**
68
* Render the Navigation Component.
79
*
810
* @author WebDevStudios
9-
* @param {object} props props.
10-
* @param {array} props.menu Array of menu items.
11+
* @param {object} props Navigation props.
12+
* @param {array} props.menu Array of menu items.
1113
* @param {string} props.className Optional classname for the element.
1214
* @return {Element} The Navigation component.
1315
*/
1416
export default function Navigation({menu, className}) {
17+
const {asPath} = useRouter()
1518
return (
1619
<>
1720
{!!menu?.length && (
@@ -22,24 +25,34 @@ export default function Navigation({menu, className}) {
2225
item.children && item.children.length > 0 ? item.children : ''
2326
return (
2427
<li key={index}>
25-
<ActiveLink href={item.path} activeClassName={styles.active}>
26-
<a target={item.target ? item.target : '_self'}>
28+
<Link href={item.path}>
29+
<a
30+
target={item.target ? item.target : '_self'}
31+
className={cn(
32+
'nav-item',
33+
isLinkActive(asPath, item.path) && styles.active
34+
)}
35+
>
2736
{item.label}
2837
</a>
29-
</ActiveLink>
38+
</Link>
3039
{children && (
3140
<ul>
3241
{children.map((item, index) => {
3342
return (
3443
<li key={index}>
35-
<ActiveLink
36-
href={item.path}
37-
activeClassName={styles.active}
38-
>
39-
<a target={item.target ? item.target : '_self'}>
44+
<Link href={item.path}>
45+
<a
46+
target={item.target ? item.target : '_self'}
47+
className={cn(
48+
'nav-item',
49+
isLinkActive(asPath, item.path) &&
50+
styles.active
51+
)}
52+
>
4053
{item.label}
4154
</a>
42-
</ActiveLink>
55+
</Link>
4356
</li>
4457
)
4558
})}

‎components/molecules/Navigation/Navigation.module.css

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,6 @@
2626
}
2727
}
2828

29-
& a.active {
30-
}
31-
3229
&:hover,
3330
&:focus-within {
3431
& > ul {

‎components/organisms/Footer/Footer.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import Link from 'next/link'
1+
import {MenuContext} from '@/components/common/MenuProvider'
22
import config from '@/functions/config'
3+
import cn from 'classnames'
4+
import Link from 'next/link'
35
import {useContext} from 'react'
46
import styles from './Footer.module.css'
5-
import {MenuContext} from '@/components/common/MenuProvider'
6-
import ActiveLink from '@/components/common/ActiveLink'
7-
import cn from 'classnames'
87

98
// TODO: Create Storybook for this component.
109

1110
/**
12-
* Render the footer as a component.
11+
* Render Footer component.
1312
*/
1413
export default function Footer() {
1514
const {menus} = useContext(MenuContext)
@@ -21,11 +20,11 @@ export default function Footer() {
2120
{menus?.footer_menu.map((item, index) => {
2221
return (
2322
<li key={index}>
24-
<ActiveLink href={item.path} activeClassName={styles?.active}>
23+
<Link href={item.path}>
2524
<a target={item.target ? item.target : '_self'}>
2625
{item.label}
2726
</a>
28-
</ActiveLink>
27+
</Link>
2928
</li>
3029
)
3130
})}

‎components/organisms/Header/Header.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,17 @@ import Logo from '@/components/atoms/Logo'
22
import {MenuContext} from '@/components/common/MenuProvider'
33
import AlgoliaSearch from '@/components/molecules/AlgoliaSearch'
44
import Navigation from '@/components/molecules/Navigation'
5-
import cn from 'classnames'
6-
import {useContext, useState} from 'react'
5+
import {useContext} from 'react'
76
import styles from './Header.module.css'
87

98
// TODO: Create Storybook for this component.
109
// TODO: Create mobile menu.
1110

1211
/**
13-
* Render the header as a component.
12+
* Render Header component.
1413
*/
1514
export default function Header() {
1615
const {menus} = useContext(MenuContext)
17-
const [isOpen, setOpen] = useState(false)
1816
return (
1917
<header className={styles.header}>
2018
<div className="container flex items-center justify-end">
@@ -31,7 +29,7 @@ export default function Header() {
3129
<Navigation
3230
menu={menus?.primary_menu}
3331
styles={styles}
34-
className={cn(styles.primaryMenu, isOpen && styles.open)}
32+
className={styles.primaryMenu}
3533
/>
3634
</div>
3735
</header>

‎functions/isLinkActive.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/**
2+
* Check if link is the active page.
3+
*
4+
* @author WebDevStudios
5+
* @see https://nextjs.org/docs/api-reference/next/router#router-object
6+
* @param {string} asPath The path shown in the browser without the configured basePath or locale.
7+
* @param {string} path The name to search.
8+
* @return {boolean} Is path active.
9+
*/
10+
export default function isLinkActive(asPath, path) {
11+
if (!asPath || !path) {
12+
return false
13+
}
14+
15+
// TODO: Add functionality to check if link is in the full URL path.
16+
// e.g. /portfolio /portfolio/cambells-soup
17+
18+
return asPath === stripTrailingSlash(path)
19+
}
20+
21+
/**
22+
* Remove the last trailing slash from a URL path.
23+
*
24+
* @author WebDevStudios
25+
* @param {string} str The string to search and remove trailing slash.
26+
* @return {string} The formatted string.
27+
*/
28+
function stripTrailingSlash(str) {
29+
if (str.substr(-1) === '/' && str.length > 1) {
30+
return str.substr(0, str.length - 1)
31+
}
32+
return str
33+
}

‎public/robots.txt

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1+
# *
12
User-agent: *
23
Allow: /
4+
5+
# Host
36
Host: https://the-nextjs-starter.vercel.app/
7+
8+
# Sitemaps
49
Sitemap: https://the-nextjs-starter.vercel.app/sitemap.xml

0 commit comments

Comments
 (0)