fr/web-semprace
1
0
Fork 0
Code Pull Requests Activity

responsive design

Browse Source
This commit is contained in:
Filip Rojek
2023-11-24 00:46:26 +01:00
parent 6e3992f756
commit bf050186fa
4 changed files with 107 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
templates/base.html
View File

@ -19,10 +19,13 @@
<div class="nav-left">
<a href="/"><img src="/img/pkmples_logo.png" alt="pkmples logo"></a>
</div>
<div class="nav-right">
<a href="https://www.facebook.com/events/823114292589147" target="_blank"><img src="/svg/facebook.svg" alt="facebook logo"></img></a>
<a href="https://www.instagram.com/pkm.hub" target="_blank"><img src="/svg/instagram.svg" alt="instagram logo"></img></a>
<a href="https://www.youtube.com/@pkmhub" target="_blank"><img src="/svg/youtube.svg" alt="youtube logo"></img></a>
<div class="nav-btn">
<img src="/svg/menu.svg" alt="menu icon">
</div>
<div class="nav-right mobile-visible">
<a href="https://www.facebook.com/events/823114292589147" target="_blank"><img src="/svg/facebook.svg" alt="facebook logo"></a>
<a href="https://www.instagram.com/pkm.hub" target="_blank"><img src="/svg/instagram.svg" alt="instagram logo"></a>
<a href="https://www.youtube.com/@pkmhub" target="_blank"><img src="/svg/youtube.svg" alt="youtube logo"></a>
<a href="/galerie">galerie</a>
<a href="/archiv">archiv</a>
</div>
@ -31,6 +34,20 @@
<main>
{% block main %} {% endblock main %}
</main>
<script>
const navBtn = document.querySelector(".nav-btn img")
let navVisible = false
navBtn.addEventListener("click", () => {
if(navVisible) {
document.querySelector(".nav-right").classList.add("mobile-visible")
} else {
document.querySelector(".nav-right").classList.remove("mobile-visible")
}
navVisible = !navVisible
})
</script>
</body>
</html>