diff options
Diffstat (limited to 'layouts/partials/nav.html')
| -rw-r--r-- | layouts/partials/nav.html | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html new file mode 100644 index 0000000..350ce32 --- /dev/null +++ b/layouts/partials/nav.html @@ -0,0 +1,44 @@ +<nav class="navbar is-primary"> + <div class="navbar-brand"> + <a class="navbar-item {{if eq .Kind "home"}}fake-text{{end}}" href="/"> + {{.Site.Title}} + </a> + <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false"> + <span aria-hidden="true"></span> + <span aria-hidden="true"></span> + <span aria-hidden="true"></span> + </a> + </div> + <!-- <div class="container"> --> + <div class="navbar-menu" id="navMenu"> + <div class="navbar-end"> + {{ range .Site.Menus.main.ByWeight -}} + {{ .Pre }} + <a class="navbar-item" href="{{ .URL }}" title="{{ .Identifier }}">{{- .Name -}}</a> + {{ .Post }} + {{- end }} + </div> + </div> + <!-- </div> --> +</nav> +<script type="text/javascript"> + // bulma's navbar-burger toggle button + document.addEventListener('DOMContentLoaded', () => { + // Get all "navbar-burger" elements + const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); + // Check if there are any navbar burgers + if ($navbarBurgers.length > 0) { + // Add a click event on each of them + $navbarBurgers.forEach(el => { + el.addEventListener('click', () => { + // Get the target from the "data-target" attribute + const target = el.dataset.target; + const $target = document.getElementById(target); + // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" + el.classList.toggle('is-active'); + $target.classList.toggle('is-active'); + }); + }); + } + }); +</script> |