luca/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added basic pwa support and new images

Browse source
This commit is contained in:
Luca 2024-03-29 17:23:07 +01:00
parent d51e47c549
commit ae75a8880a
15 changed files with 166 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/_includes/partials/header.njk
View file

@ -7,7 +7,7 @@
</a>
</li>
<li id="portfolio-nav">
<a href="/portfolio/" title="My Portfolio">Portfolio</a>
<a href="/portfolio/" title="Portfolio">Portfolio</a>
</li>
<li id="workflows-nav">
<a href="/workflows/" title="Workflows">Workflows</a>
@ -18,13 +18,18 @@
<li id="contact-nav">
<a href="/contact/" title="Contact">Kontakt</a>
</li>
<li id="install-button">
<a title="Install this website as a PWA">
<i class="fa-solid fa-download"></i><span style="padding-left: 10px">Installieren</span>
</a>
</li>
<li id="github-nav">
<a href="https://github.com/LucaJunge" title="GitHub profile">
<i class="fa-brands fa-github"></i>
</a>
</li>
<li id="menu-button">
<a title="Show menu">
<a title="Show or hide menu">
<i class="fa fa-solid fa-bars"></i>
</a>
</li>
@ -35,8 +40,44 @@
<script>
let menuButton = document.querySelector("#menu-button a")
let icon = document.querySelector("#menu-button a i")
menuButton.addEventListener("click", () => {
document.querySelector("#navigation").classList.toggle("open")
let isOpen = document.querySelector("#navigation").classList.toggle("open")
if(isOpen) {
icon.classList.remove("fa-bars")
icon.classList.add("fa-chevron-up") // or "chevron-up"
} else {
icon.classList.remove("fa-chevron-up")
icon.classList.add("fa-bars")
}
})
// PWA Installation Prompting
let installPrompt = null
const installButton = document.querySelector("#install-button")
window.addEventListener("beforeinstallprompt", (event) => {
event.preventDefault() // prevent browser from showing its own install UI
installPrompt = event
installButton.style.display = "initial";
})
// Add our own install logic
installButton.addEventListener("click", async() => {
if(!installPrompt) {
return
}
const result = await installPrompt.prompt()
installPrompt = null
installButton.style.display = "none"
})
// if the app is installed (already), hide the install button
window.addEventListener("appinstalled", () => {
installPrompt = null
installButton.style.display = "none"
})
</script>