Firq/firq-dev-website
Firq/firq-dev-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 119 Packages 1 Wiki Activity Actions

JS version

Browse source
This commit is contained in:
Firq 2024-10-30 21:24:21 +01:00
parent 7a3c4f14ae
commit 33ffa3c5ae
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
2 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,7 +1,7 @@
{ {
"name": "@firq/fgosite", "name": "@firq/fgosite",
"type": "module", "type": "module",
"version": "0.2.0-pre.50", "version": "0.2.0-pre.51",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",

16
src/components/navbar/navbarMobile.astro
View file

@ -13,6 +13,15 @@ const hamburger_src_url = `url("${hamburger.src}")`
</label> </label>
</div> </div>
<script>
const dropdownBtn = document.querySelector(".dropdown-btn")!;
const dropdownContent = document.querySelector(".dropdown-content")!;
dropdownBtn.addEventListener("click", () => {
dropdownContent.classList.toggle("menu-open");
});
</script>
<style define:vars={{ hamburger_src_url }}> <style define:vars={{ hamburger_src_url }}>
input[type="checkbox"] { input[type="checkbox"] {
opacity: 0; opacity: 0;
@ -20,9 +29,11 @@ const hamburger_src_url = `url("${hamburger.src}")`
touch-action: manipulation; touch-action: manipulation;
} }
input[type="checkbox"]:checked ~ .dropdown-content { .dropdown-content.menu-open {
display: flex; display: flex;
height: auto; height: auto;
transform: translateY(0);
transition: transform var(--a-time-default) var(--a-animation-1);
} }
.dropdown-content { .dropdown-content {
@ -33,11 +44,12 @@ const hamburger_src_url = `url("${hamburger.src}")`
justify-content: center; justify-content: center;
background-color: var(--c-primary-background); background-color: var(--c-primary-background);
width: 100%; width: 100%;
height: 0px;
list-style-type: none; list-style-type: none;
line-height: 3em; line-height: 3em;
margin: 0.5rem 0px 0px; margin: 0.5rem 0px 0px;
padding: 0; padding: 0;
transform: translateY(-1em);
transition: transform var(--a-time-default) var(--a-animation-1);
} }
.dropdown-btn { .dropdown-btn {