vertical-navigation-with-tertiary-pins.html

---
categories: [Navigation]
css-extra: false
layout: layout-fixed
resource: true
full-page: true
hide-icons: false
submenus: true
nav-tertiary: true
collapsible-menus: true
title: Vertical Navigation with Tertiary Navigation (pinnable)
url-js-extra: ['https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js', 'https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js']
---
{% include widgets/navigation/vertical-navigation.html %}
<script>
  const currentUrl = new URL(window.location.href);
  const currentEnvironment = currentUrl.searchParams.get('environment');

  if (currentEnvironment === 'regressions') {
    let verticalNavEl = document.querySelector('div.nav-pf-vertical');
    let ipsumEl = document.querySelector('[data-target="#ipsum-secondary"]');
    let tertiaryNavItemEl = document.querySelector('.list-group-item.active.tertiary-nav-item-pf')
    verticalNavEl.className = `${verticalNavEl.className} nav-pf-vertical-with-submenus hidden-icons-pf hover-secondary-nav-pf hover-tertiary-nav-pf`;
    ipsumEl.className = `${ipsumEl.className} is-hover`;
    tertiaryNavItemEl.className = `${tertiaryNavItemEl.className} is-hover`;
  }
</script>