118 lines
3.0 KiB
HTML
118 lines
3.0 KiB
HTML
{%- assign page_paths = site.header_pages | default: default_paths -%}
|
|
|
|
<header class="header-navbar">
|
|
<div class="nav-container container">
|
|
<a href="/_layouts/landing.html" class="nav-logo">
|
|
<img
|
|
src="/assets/base/caution-logo/caution-icon-black.svg"
|
|
alt="Caution logo"
|
|
/>
|
|
</a>
|
|
|
|
<nav class="nav-menu">
|
|
<div class="nav-dropdown">
|
|
<button class="nav-dropdown-toggle">
|
|
Caution
|
|
<img
|
|
src="/assets/base/dropdown.svg"
|
|
alt="Dropdown caret"
|
|
class="nav-caret-icon"
|
|
/>
|
|
</button>
|
|
<ul class="nav-dropdown-menu">
|
|
<li><a href="#">About</a></li>
|
|
<li><a href="#">Team</a></li>
|
|
<li><a href="#">R&D</a></li>
|
|
<li><a href="#">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<a class="nav-link" href="#">Disaster Recovery</a>
|
|
<a class="nav-link" href="/_layouts/Pricing.html">Pricing</a>
|
|
<a class="nav-link" href="#">Docs</a>
|
|
</nav>
|
|
|
|
<div class="nav-cta">
|
|
<a href="#" class="btn btn-primary">Get started →</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- <header>
|
|
<div class="menu">
|
|
<div class="left-menu">
|
|
<a id="home-link" href="/index.html">
|
|
<img class="menu-logo" src="/assets/base/caution-logo/caution-icon-black.svg"
|
|
alt="Caution triangle logo with black text" />
|
|
</a>
|
|
</div>
|
|
<div class="right-menu">
|
|
<ul class="header-page-links show">
|
|
{%- for path in page_paths -%}
|
|
{%- assign my_page = site.pages | where: "path", path | first -%}
|
|
{%- if my_page.title -%}
|
|
{%- if my_page.title != 'Home' -%}
|
|
<li><a href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a></li>
|
|
{%- endif -%}
|
|
{%- endif -%}
|
|
{%- endfor -%}
|
|
<li class="show">
|
|
<a href="#" class="btn btn-primary">Get started →</a>
|
|
</li>
|
|
|
|
</ul>
|
|
<input type="checkbox" id="menu-toggle" />
|
|
|
|
<label for="menu-toggle" class="hamburger-menu">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</label>
|
|
|
|
<div class="menu-content">
|
|
<div class="inner-menu-content">
|
|
{% include nav-links.html %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
let pathSegment = window.location.pathname.split('/')[1];
|
|
|
|
if (pathSegment.endsWith('.html')) {
|
|
pathSegment = pathSegment.replace('.html', '');
|
|
}
|
|
|
|
const navLinks = document.querySelectorAll('.header-page-links li a');
|
|
|
|
navLinks.forEach(link => {
|
|
let linkPath = link.getAttribute('href').replace('/', '').replace('.html', '');
|
|
|
|
if (linkPath === pathSegment) {
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
|
|
let prevScrollPos = window.scrollY;
|
|
const hamburgerMenu = document.querySelector('.menu-content');
|
|
|
|
window.addEventListener('scroll', () => {
|
|
const currentScrollPos = window.scrollY;
|
|
|
|
if (currentScrollPos > prevScrollPos) {
|
|
document.getElementById('menu-toggle').checked = false;
|
|
}
|
|
prevScrollPos = currentScrollPos;
|
|
});
|
|
|
|
</script>
|
|
|
|
</header>
|
|
|
|
-->
|