diff --git a/src/css/nav.css b/src/css/nav.css index bedc1e1..ab07d0c 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -65,14 +65,13 @@ top: calc((var(--navbar-height) / 2) + var(--globan-height)); box-shadow: none; position: sticky; - height: var(--nav-height--desktop); } } .nav .panels { display: flex; flex-direction: column; - height: inherit; + height: var(--nav-height--desktop); } html.is-clipped--nav { @@ -181,6 +180,7 @@ html.is-clipped--nav { right: 0; bottom: 0; left: 0; + height: 50px; } .nav-panel-explore:not(:first-child) { diff --git a/src/css/vars.css b/src/css/vars.css index 0c19ddf..e77e553 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -317,7 +317,7 @@ --toolbar-height: calc(45 / var(--rem-base) * 1rem); --drawer-height: var(--toolbar-height); --body-top: calc(var(--navbar-height) - var(--globan-height)); - --body-min-height: calc(100vh - var(--body-top)); + --body-min-height: calc((100vh - var(--body-top)) + var(--globan-height)); --nav-height: calc(var(--body-min-height) + var(--toolbar-height)); --nav-height--desktop: var(--body-min-height); --nav-panel-menu-height: calc(100% - var(--drawer-height)); diff --git a/src/js/scroll-header.js b/src/js/scroll-header.js index e385e09..59849ab 100644 --- a/src/js/scroll-header.js +++ b/src/js/scroll-header.js @@ -14,3 +14,20 @@ window.addEventListener('scroll', function () { blueDiv.style.position = 'relative' } }) +window.addEventListener('resize', function () { + //var nav = document.querySelector('.nav') + var euTenders = document.querySelector('.eu-tenders') + var nav = document.querySelector('.nav') + var panels = document.querySelector('.panels') + + //var navHeight = parseFloat(window.getComputedStyle(nav).height) + var euTendersTop = parseFloat(window.getComputedStyle(euTenders).top) + // Calculate the remaining height of the viewport + var remainingHeight = window.innerHeight - euTendersTop + 18 + + // Now you can use remainingHeight for your needs + // For example, you can set it as a CSS variable + document.documentElement.style.setProperty('--nav-height--desktop', `${remainingHeight}px`) + nav.style.height = `${remainingHeight}px` + panels.style.height = `${remainingHeight}px` +}) diff --git a/src/partials/nav-scripts.hbs b/src/partials/nav-scripts.hbs new file mode 100644 index 0000000..f9e60d6 --- /dev/null +++ b/src/partials/nav-scripts.hbs @@ -0,0 +1 @@ + diff --git a/src/partials/nav.hbs b/src/partials/nav.hbs index 7e0f091..9b7b3d8 100644 --- a/src/partials/nav.hbs +++ b/src/partials/nav.hbs @@ -1,3 +1,5 @@ +{{>nav-scripts}} +