96 lines
No EOL
2.7 KiB
Text
96 lines
No EOL
2.7 KiB
Text
<header id="navigation">
|
|
<nav>
|
|
<ul>
|
|
<li id="home-nav">
|
|
<a href="/" title="Zur Startseite">
|
|
<i class="fa-solid fa-house"></i>
|
|
</a>
|
|
</li>
|
|
<li id="projects-nav">
|
|
<a href="/projects/" title="Projekte">Projekte</a>
|
|
</li>
|
|
<!--li id="workflows-nav">
|
|
<a href="/workflows/" title="Workflows">Workflows</a>
|
|
</li-->
|
|
<!--li id="blog-nav">
|
|
<a href="/blog/" title="Blog">Blog</a>
|
|
</li-->
|
|
<li id="contact-nav">
|
|
<a href="/contact/" title="Kontakt">Kontakt</a>
|
|
</li>
|
|
<li id="blog-nav">
|
|
<a href="/blog/" title="Blog">Blog</a>
|
|
</li>
|
|
<li id="install-button">
|
|
<a title="Installiere diese Webseite als Progressive Web App (PWA)">
|
|
<i class="fa-solid fa-download"></i><span style="padding-left: 10px">Installieren</span>
|
|
</a>
|
|
</li>
|
|
<li id="rss-nav">
|
|
<a href="https://luca-junge.de/feed.xml" title="RSS feed">
|
|
<i class="fa-solid fa-rss"></i>
|
|
</a>
|
|
</li>
|
|
<li id="github-nav">
|
|
<a href="https://github.com/LucaJunge" title="Das GitHub-Profil von Luca Junge">
|
|
<i class="fa-brands fa-github"></i>
|
|
</a>
|
|
</li>
|
|
<li id="mastodon-nav">
|
|
<a href="https://fosstodon.org/@ljunge/" title="Das Mastodon-Profil von Luca Junge">
|
|
<i class="fa-brands fa-mastodon"></i>
|
|
</a>
|
|
</li>
|
|
<li id="menu-button">
|
|
<a title="Menu öffnen oder schließen">
|
|
<i class="fa fa-solid fa-bars"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
|
|
<script>
|
|
let menuButton = document.querySelector("#menu-button a")
|
|
let icon = document.querySelector("#menu-button a i")
|
|
|
|
menuButton.addEventListener("click", () => {
|
|
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> |