vikunja/theme
Archived
1
1
Fork 5
Code Issues Pull Requests 1 Releases Wiki Activity

feat: mobile menu
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse Source
This commit is contained in:
kolaente 2022-01-29 17:50:04 +01:00
parent 855a67f6ac
commit 3d4e2222fc
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 27 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
layouts/partials/footer.html
View File

@ -88,26 +88,16 @@
<script>
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
// Check if there are any navbar burgers
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
const target = $el.dataset.target
const $target = document.getElementById(target)
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target
var $target = document.getElementById(target)
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active')
$target.classList.toggle('is-active')
document.getElementById('navbar-background').classList.toggle('is-active')
$target.classList.toggle('hidden')
})
$target.addEventListener('click', el => {
$target.classList.toggle('hidden')
})
})
}

36
layouts/partials/navbar.html
View File

@ -1,19 +1,14 @@
<nav class="w-full bg-primary">
<div class="flex justify-between max-w-screen-2xl mx-auto">
<!-- <div class="navbar-brand">-->
<!-- <a class="navbar-item" href="{{ .Site.BaseURL }}">-->
<!-- <img src="{{ .Site.BaseURL }}images/vikunja-logo-white.svg" alt="{{ .Site.Title }}">-->
<!-- </a>-->
<!-- <span class="navbar-burger burger" data-target="navMenu" aria-label="menu" aria-expanded="false">-->
<!-- <span></span>-->
<!-- <span></span>-->
<!-- <span></span>-->
<!-- </span>-->
<!-- </div>-->
<a class="navbar-item" href="/">
<img src="{{ .Site.BaseURL }}images/vikunja-logo-white.svg" alt="{{ .Site.Title }}" class="h-10 my-2"/>
<div class="flex justify-between max-w-screen-2xl mx-auto px-2">
<a href="/">
<img src="{{ .Site.BaseURL }}images/vikunja-logo-white.svg" alt="{{ .Site.Title }}" class="h-10 my-2 ml-2 lg:ml-0"/>
</a>
<div id="navMenu" class="text-white flex font-title font-semibold">
<a class="block lg:hidden text-white p-3 pr-4 cursor-pointer navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</a>
<div class="text-white font-title font-semibold hidden lg:flex">
{{ $currentNode := .Page }}{{ range .Site.Menus.page }}
<a class="block h-full py-4 px-2 hover:bg-primary-darker {{ if $currentNode.IsMenuCurrent "page" . }}bg-primary-darker{{ end }}" href="{{ .URL }}">
{{ .Name }}
@ -21,6 +16,15 @@
{{ end }}
</div>
</div>
</nav>
<div class="navbar-background" id="navbar-background"></div>
<!-- Mobile Menu -->
<div class="fixed hidden bg-black bg-opacity-50 top-0 bottom-0 left-0 right-0" id="navMenu">
<div class="flex font-title font-semibold fixed flex-col w-3/4 bg-gray-100 h-screen">
{{ $currentNode := .Page }}{{ range .Site.Menus.page }}
<a class="block py-2 px-4 hover:bg-primary hover:text-white {{ if $currentNode.IsMenuCurrent "page" . }} bg-primary text-white {{ end }}" href="{{ .URL }}">
{{ .Name }}
</a>
{{ end }}
</div>
</div>
</nav>