diff --git a/material-overrides/assets/stylesheets/wormhole.css b/material-overrides/assets/stylesheets/wormhole.css index 30d5ce73..3877da20 100644 --- a/material-overrides/assets/stylesheets/wormhole.css +++ b/material-overrides/assets/stylesheets/wormhole.css @@ -423,17 +423,23 @@ } /* --- To better handle page reloads and minimize flickering */ - :not(.js-loading) .md-nav { + :not(.js-loading) .md-nav, + :not(.js-loading) .md-tabs__list { opacity: 1; } - .js-loading nav.md-nav { + .js-loading nav.md-nav, + .js-loading .md-tabs__list { display: none !important; } .nav__item--section:not(.expanded) > nav.md-nav { display: none; } + + .md-header--shadow { + min-height: 107px; + } /* --- */ .nav__item--section diff --git a/material-overrides/main.html b/material-overrides/main.html index 06c662b5..44117733 100644 --- a/material-overrides/main.html +++ b/material-overrides/main.html @@ -118,9 +118,34 @@ }); } + getTopNavigationState = () => { + const path = window.location.pathname; + // If on a reference page, highlight the reference top level nav item + if (path.includes('products/reference')) { + const tabs = document.querySelectorAll('.md-tabs__item'); + + tabs.forEach(tab => { + // Remove the active class from the active tab + if (tab.classList.contains('md-tabs__item--active')) { + tab.classList.remove('md-tabs__item--active'); + } + + // Add the active class to the tab that contains 'Reference' + if (tab.children[0].innerText.includes('Reference')) { + tab.classList.add('md-tabs__item--active'); + } + }); + } + } + document.addEventListener('DOMContentLoaded', () => { + // Handle left navigation state document.querySelectorAll('.nav__item--section').forEach(setupSection); applyInitialState(); + + // Handle top navigation state + getTopNavigationState(); + document.documentElement.classList.remove('js-loading'); });