// Custom Vanilla JS to highlight the user's current location in the navigation bar and the sub-nav navigation bar function setActive(thisLink, linkText) {

let thisAnchor = thisLink.querySelector('a');

thisLink.classList.add('active');
thisAnchor.insertAdjacentHTML('beforeend', ' <span class="sr-only">(current)</span>');

}

function highlightSubNav(pathname) {

const subNavItems = document.querySelectorAll('.js-sub-nav-item');

for ( let link of subNavItems) {
  const anchor = link.querySelector('a');
  const href = anchor.getAttribute('href').replace(/\.\.\//g, '');
  const linkText = anchor.textContent;
  const urlMatchesLink = pathname.indexOf(href) !== -1;

  urlMatchesLink ?
    setActive(link, linkText)
  : null;
}

}

function highlightNav() {

const pathname = window.location.pathname;
const locationIsContactHash = window.location.hash === '#contact';
const locationIsHome = window.location.pathname === '/';

document.getElementById('subNavNav') ?
  highlightSubNav(pathname)
: null;

const navigationItems = document.querySelectorAll('.js-nav-item');

for ( let link of navigationItems ) {
  const linkAnchor = link.querySelector('a');
  const linkHrefValue = linkAnchor.getAttribute('href').replace(/\.\.\//g, '');
  const linkTextValue = linkAnchor.textContent;
  const linkIsHome = linkTextValue.toLowerCase() === 'home';
  const urlMatchesLink = pathname.indexOf(linkHrefValue) !== -1;

  if ( locationIsHome || locationIsContactHash ) {
    linkIsHome ? setActive(link, linkTextValue) : null;
  } else {
    urlMatchesLink && !linkIsHome ? setActive(link, linkTextValue) : null;
  }
}

} // // USEAGE: // // document.addEventListener('DOMContentLoaded', function() { // highlightNav(); // }); // export default highlightNav;