servala/website
1
0
Fork 0
Code Issues 12 Pull requests Projects 1 Packages 1 Activity Actions

fix filters and nav into alpine again

Browse source
This commit is contained in:
Tobias Brunner 2025-07-17 08:33:06 +02:00
parent 1d39e3445e
commit 5ab10f2264
Signed by: tobru
SSH key fingerprint: SHA256:kOXg1R6c11XW3/Pt9dbLdQvOJGFAy+B2K6v6PtRWBGQ
2 changed files with 64 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

96
hub/services/static/js/nav.js
View file

@ -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');
}
});
});

79
hub/services/templates/base.html
View file

@ -23,9 +23,10 @@
<script defer data-api="/api/event" data-domain="servala.com" src="/js/script.js"></script> <script defer data-api="/api/event" data-domain="servala.com" src="/js/script.js"></script>
{% endif %} {% endif %}
<script defer src="{% static "js/htmx204.min.js" %}"></script> <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/bootstrap.bundle.min.js" %}"></script>
<script defer src="{% static "js/servala-addons.js" %}"></script> <script defer src="{% static "js/servala-addons.js" %}"></script>
<script defer src="{% static "js/nav.js" %}"></script>
{% block extra_js %}{% endblock %} {% block extra_js %}{% endblock %}
</head> </head>
<body> <body>
@ -40,8 +41,43 @@
</div> </div>
</div> </div>
<header class="site-header position-relative"> <header class="site-header position-relative"
<div class="header-nav header-nav--top" id="headerNav"> 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="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__wrapper d-flex justify-content-between align-items-center">
<div class="nav__brand logo"> <div class="nav__brand logo">
@ -49,27 +85,40 @@
<img src="{% static "img/header-logo.png" %}" alt="Servala Logo" width="191" height="43"> <img src="{% static "img/header-logo.png" %}" alt="Servala Logo" width="191" height="43">
</a> </a>
</div> </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"> <nav class="navbar d-lg-flex justify-content-lg-end align-items-lg-center">
<ul class="navbar__menu menu mr-lg-27"> <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:homepage' %}" @click="closeMenu()">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:service_list' %}" @click="closeMenu()">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:provider_list' %}" @click="closeMenu()">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:partner_list' %}" @click="closeMenu()">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:article_list' %}" @click="closeMenu()">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:about' %}" @click="closeMenu()">About</a></li>
</ul> </ul>
<ul class="menu-cta mb-0"> <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> </ul>
</nav> </nav>
</div> </div>
<div class="nav__toggle"> <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"> <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"
<line class="button-svg__line" id="middleLine" x1="0" x2="22" y1="12" y2="12"></line> :class="isMenuOpen ? 'svg-line-top' : ''"
<line class="button-svg__line" id="bottomLine" x1="0" x2="22" y1="18" y2="18"></line> 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> </svg>
</button> </button>
</div> </div>