122 lines
4.6 KiB
HTML
122 lines
4.6 KiB
HTML
<nav class="navbar is-fixed-top is-transparent" role="navigation" aria-label="main navigation">
|
|
<div class="navbar-brand">
|
|
<a class="navbar-item" href="{{ .Site.Home.Permalink }}">
|
|
{{ $imageURL := "https://bulma.io/images/placeholders/64x64.png" }}
|
|
{{ $image := resources.Get "img/logo.jpg" }}
|
|
|
|
{{ with $image }}
|
|
{{ $imageResized := $image.Resize "64x" }}
|
|
{{ $imageURL = $imageResized.Permalink }}
|
|
{{ end }}
|
|
<img src="{{ $imageURL }}">
|
|
</a>
|
|
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar">
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
</a>
|
|
</div>
|
|
<div id="navbar" class="navbar-menu">
|
|
<!-- In case of another navbar-start right after -->
|
|
<div class="navbar-start mr-0">
|
|
<div class="navbar-item has-dropdown is-hoverable">
|
|
<a class="navbar-link">
|
|
Catégories
|
|
</a>
|
|
<div class="navbar-dropdown">
|
|
{{ range $key, $value := .Site.Taxonomies.categories }}
|
|
<a class="navbar-item {{ if eq $.Permalink .Page.Permalink }}is-active{{ end }}" href="{{ .Page.Permalink }}">
|
|
{{ $key | humanize }}
|
|
<span class="tag ml-2 is-rounded">{{ len . }}</span>
|
|
</a>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
<div class="navbar-item has-dropdown is-hoverable">
|
|
<a class="navbar-link">
|
|
Dossiers
|
|
</a>
|
|
<div class="navbar-dropdown">
|
|
{{ range where .Site.Pages "Params.Code" "!=" nil }}
|
|
<a class="navbar-item {{ if eq $.Permalink .Page.Permalink }}is-active{{ end }}" href="{{ .Page.Permalink }}">
|
|
{{ .Title }}
|
|
{{ $casePosts := where .Site.RegularPages "CurrentSection.Params.Code" "==" .Params.Code }}
|
|
<span class="tag ml-2 is-rounded">{{ len $casePosts }}</span>
|
|
</a>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- start/end menu shares the exact same code, just not the same position, factorize with a loop -->
|
|
{{ $currentPage := . }}
|
|
{{ range (slice "start" "end")}}
|
|
{{ $menuName := . }}
|
|
<div class="navbar-{{ . }} mr-2">
|
|
<!-- now get the menu if it exists -->
|
|
{{ with index $.Site.Menus $menuName }}
|
|
<!-- and range over its pages -->
|
|
{{ range . }}
|
|
{{ if .HasChildren }}
|
|
<div class="navbar-item has-dropdown is-hoverable {{ if $currentPage.HasMenuCurrent $menuName . }}is-active is-tab{{ end }}">
|
|
<a class="navbar-link">
|
|
{{ .Pre }}
|
|
<span>{{ .Name }}</span>
|
|
</a>
|
|
<div class="navbar-dropdown">
|
|
{{ range .Children }}
|
|
<a class="navbar-item {{ if $currentPage.IsMenuCurrent $menuName . }}is-active is-tab{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
{{ else }}
|
|
<a class="navbar-item {{ if $currentPage.IsMenuCurrent $menuName . }}is-active is-tab{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
<div class="navbar-end ml-0 mr-4">
|
|
<div class="level">
|
|
<div class="level-left">
|
|
<div class="level-item">
|
|
<!-- Each item should have a corresponding assets/img/x.png and link in config.yaml -->
|
|
{{ range (slice "rss" "mastodon" "peertube" "funkwhale" "gitea" "github" "mail" )}}
|
|
{{ $imageName := . }}
|
|
<!-- Get image and resize to logo size -->
|
|
{{ $imagePath := printf "img/%s.png" $imageName }}
|
|
{{ $image := resources.Get $imagePath }}
|
|
{{ $imageResized := $image.Resize "64x" }}
|
|
<!-- Get logo link in site params (index allows to use a dynamic parameter name) -->
|
|
<a class="navbar-item" href="{{ index $.Site.Params $imageName }}">
|
|
<img src="{{ $imageResized.Permalink }}">
|
|
</a>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
// Get all "navbar-burger" elements
|
|
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 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> |