fix filters and nav into alpine again
This commit is contained in:
parent
1d39e3445e
commit
5ab10f2264
SSH key fingerprint:
SHA256:kOXg1R6c11XW3/Pt9dbLdQvOJGFAy+B2K6v6PtRWBGQ
2 changed files with 64 additions and 111 deletions
|
|
@ -1,96 +0,0 @@
|
|||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Mobile navigation toggle functionality
|
||||
const navToggle = document.getElementById('navToggle');
|
||||
const navMenu = document.getElementById('navMenu');
|
||||
const headerNav = document.getElementById('headerNav');
|
||||
const topLine = document.getElementById('topLine');
|
||||
const middleLine = document.getElementById('middleLine');
|
||||
const bottomLine = document.getElementById('bottomLine');
|
||||
|
||||
let isMenuOpen = false;
|
||||
|
||||
// Toggle mobile menu
|
||||
navToggle.addEventListener('click', function () {
|
||||
isMenuOpen = !isMenuOpen;
|
||||
|
||||
// Toggle menu visibility classes
|
||||
if (isMenuOpen) {
|
||||
navMenu.classList.remove('nav__menu-hidden');
|
||||
navMenu.classList.add('nav__menu-active');
|
||||
navToggle.setAttribute('aria-expanded', 'true');
|
||||
|
||||
// Animate hamburger to X
|
||||
topLine.classList.add('svg-line-top');
|
||||
middleLine.classList.add('svg-line-center');
|
||||
bottomLine.classList.add('svg-line-bottom');
|
||||
} else {
|
||||
navMenu.classList.remove('nav__menu-active');
|
||||
navMenu.classList.add('nav__menu-hidden');
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
|
||||
// Animate X back to hamburger
|
||||
topLine.classList.remove('svg-line-top');
|
||||
middleLine.classList.remove('svg-line-center');
|
||||
bottomLine.classList.remove('svg-line-bottom');
|
||||
}
|
||||
});
|
||||
|
||||
// Close menu when clicking on menu items (mobile)
|
||||
const menuItems = navMenu.querySelectorAll('.menu__item-link');
|
||||
menuItems.forEach(function (item) {
|
||||
item.addEventListener('click', function () {
|
||||
if (window.innerWidth < 992 && isMenuOpen) {
|
||||
// Trigger the toggle to close menu
|
||||
navToggle.click();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Header scroll behavior
|
||||
let isAtTop = true;
|
||||
|
||||
function handleScroll() {
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
const newAtTop = scrollTop <= 200;
|
||||
|
||||
if (newAtTop !== isAtTop) {
|
||||
isAtTop = newAtTop;
|
||||
|
||||
if (isAtTop) {
|
||||
headerNav.classList.remove('header-nav--fixed');
|
||||
headerNav.classList.add('header-nav--top');
|
||||
} else {
|
||||
headerNav.classList.remove('header-nav--top');
|
||||
headerNav.classList.add('header-nav--fixed');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let scrollThrottle = false;
|
||||
window.addEventListener('scroll', function () {
|
||||
if (!scrollThrottle) {
|
||||
requestAnimationFrame(function () {
|
||||
handleScroll();
|
||||
scrollThrottle = false;
|
||||
});
|
||||
scrollThrottle = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Handle window resize to ensure proper menu state
|
||||
window.addEventListener('resize', function () {
|
||||
if (window.innerWidth >= 992 && isMenuOpen) {
|
||||
// Reset menu state on desktop
|
||||
isMenuOpen = false;
|
||||
navMenu.classList.remove('nav__menu-active');
|
||||
navMenu.classList.add('nav__menu-hidden');
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
|
||||
// Reset hamburger animation
|
||||
topLine.classList.remove('svg-line-top');
|
||||
middleLine.classList.remove('svg-line-center');
|
||||
bottomLine.classList.remove('svg-line-bottom');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -23,9 +23,10 @@
|
|||
<script defer data-api="/api/event" data-domain="servala.com" src="/js/script.js"></script>
|
||||
{% endif %}
|
||||
<script defer src="{% static "js/htmx204.min.js" %}"></script>
|
||||
<script defer src="{% static "js/alpine-collapse.min.js" %}"></script>
|
||||
<script defer src="{% static "js/servala-main.js" %}"></script>
|
||||
<script defer src="{% static "js/bootstrap.bundle.min.js" %}"></script>
|
||||
<script defer src="{% static "js/servala-addons.js" %}"></script>
|
||||
<script defer src="{% static "js/nav.js" %}"></script>
|
||||
{% block extra_js %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -40,8 +41,43 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<header class="site-header position-relative">
|
||||
<div class="header-nav header-nav--top" id="headerNav">
|
||||
<header class="site-header position-relative"
|
||||
x-data="{
|
||||
isMenuOpen: false,
|
||||
isAtTop: true,
|
||||
toggleMenu() {
|
||||
this.isMenuOpen = !this.isMenuOpen;
|
||||
},
|
||||
closeMenu() {
|
||||
if (window.innerWidth < 992 && this.isMenuOpen) {
|
||||
this.isMenuOpen = false;
|
||||
}
|
||||
},
|
||||
handleScroll() {
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
this.isAtTop = scrollTop <= 200;
|
||||
}
|
||||
}"
|
||||
x-init="
|
||||
let scrollThrottle = false;
|
||||
window.addEventListener('scroll', () => {
|
||||
if (!scrollThrottle) {
|
||||
requestAnimationFrame(() => {
|
||||
handleScroll();
|
||||
scrollThrottle = false;
|
||||
});
|
||||
scrollThrottle = true;
|
||||
}
|
||||
});
|
||||
window.addEventListener('resize', () => {
|
||||
if (window.innerWidth >= 992 && isMenuOpen) {
|
||||
isMenuOpen = false;
|
||||
}
|
||||
});
|
||||
">
|
||||
<div class="header-nav"
|
||||
:class="isAtTop ? 'header-nav--top' : 'header-nav--fixed'"
|
||||
id="headerNav">
|
||||
<div class="container-xl mx-auto px-3 px-lg-0 position-relative">
|
||||
<div class="nav__wrapper d-flex justify-content-between align-items-center">
|
||||
<div class="nav__brand logo">
|
||||
|
|
@ -49,27 +85,40 @@
|
|||
<img src="{% static "img/header-logo.png" %}" alt="Servala Logo" width="191" height="43">
|
||||
</a>
|
||||
</div>
|
||||
<div class="nav__menu nav__menu-hidden" id="navMenu">
|
||||
<div class="nav__menu"
|
||||
:class="isMenuOpen ? 'nav__menu-active' : 'nav__menu-hidden'"
|
||||
id="navMenu">
|
||||
<nav class="navbar d-lg-flex justify-content-lg-end align-items-lg-center">
|
||||
<ul class="navbar__menu menu mr-lg-27">
|
||||
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:homepage' %}">Home</a></li>
|
||||
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:service_list' %}">Services</a></li>
|
||||
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:provider_list' %}">Cloud Provider</a></li>
|
||||
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:partner_list' %}">Partner</a></li>
|
||||
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:article_list' %}">Articles</a></li>
|
||||
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:about' %}">About</a></li>
|
||||
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:homepage' %}" @click="closeMenu()">Home</a></li>
|
||||
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:service_list' %}" @click="closeMenu()">Services</a></li>
|
||||
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:provider_list' %}" @click="closeMenu()">Cloud Provider</a></li>
|
||||
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:partner_list' %}" @click="closeMenu()">Partner</a></li>
|
||||
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:article_list' %}" @click="closeMenu()">Articles</a></li>
|
||||
<li class="menu__item"><a class="menu__item-link" href="{% url 'services:about' %}" @click="closeMenu()">About</a></li>
|
||||
</ul>
|
||||
<ul class="menu-cta mb-0">
|
||||
<li class="mr-17"><a class="btn btn-outline-light btn-outline-primary" href="{% url 'services:contact' %}" role="button">Contact</a></li>
|
||||
<li class="mr-17"><a class="btn btn-outline-light btn-outline-primary" href="{% url 'services:contact' %}" role="button" @click="closeMenu()">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="nav__toggle">
|
||||
<button id="navToggle" name="menu" class="nav__button" role="button" aria-expanded="false" aria-controls="navMenu">
|
||||
<button @click="toggleMenu()"
|
||||
name="menu"
|
||||
class="nav__button"
|
||||
role="button"
|
||||
:aria-expanded="isMenuOpen.toString()"
|
||||
aria-controls="navMenu">
|
||||
<svg class="nav__button-svg" width="22" height="24">
|
||||
<line class="button-svg__line" id="topLine" x1="0" x2="22" y1="6" y2="6"></line>
|
||||
<line class="button-svg__line" id="middleLine" x1="0" x2="22" y1="12" y2="12"></line>
|
||||
<line class="button-svg__line" id="bottomLine" x1="0" x2="22" y1="18" y2="18"></line>
|
||||
<line class="button-svg__line"
|
||||
:class="isMenuOpen ? 'svg-line-top' : ''"
|
||||
x1="0" x2="22" y1="6" y2="6"></line>
|
||||
<line class="button-svg__line"
|
||||
:class="isMenuOpen ? 'svg-line-center' : ''"
|
||||
x1="0" x2="22" y1="12" y2="12"></line>
|
||||
<line class="button-svg__line"
|
||||
:class="isMenuOpen ? 'svg-line-bottom' : ''"
|
||||
x1="0" x2="22" y1="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue