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

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>
{% 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>