91 lines
3.3 KiB
HTML
91 lines
3.3 KiB
HTML
<!-- Navigation -->
|
|
{{ if or (eq .Params.navstyle "invert") (eq .Params.headerstyle "text") }}
|
|
<nav class="navbar navbar-default navbar-custom navbar-fixed-top invert">
|
|
{{ else }}
|
|
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
|
|
{{ end }}
|
|
<div class="container-fluid">
|
|
<!-- Brand and toggle get grouped for better mobile display -->
|
|
<div class="navbar-header page-scroll">
|
|
<button type="button" class="navbar-toggle">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="{{ "/" | relLangURL }}">{{ .Site.Title }}</a>
|
|
</div>
|
|
|
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
|
<!-- Known Issue, found by Hux:
|
|
<nav>'s height woule be hold on by its content.
|
|
so, when navbar scale out, the <nav> will cover tags.
|
|
also mask any touch event of tags, unfortunately.
|
|
-->
|
|
<div id="huxblog_navbar">
|
|
<div class="navbar-collapse">
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li>
|
|
<a href="{{ "/" | relLangURL }}">Accueil</a>
|
|
</li>
|
|
{{ range .Site.Menus.main }}
|
|
<li>
|
|
<a href="{{ .URL }}">
|
|
{{ .Name }}
|
|
</a>
|
|
</li>
|
|
{{ end }}
|
|
|
|
{{ if not .Site.Params.omit_categories }}
|
|
{{ range $name, $taxonomy := .Site.Taxonomies.categories }}
|
|
<li>
|
|
<a href="{{ "categories/" | relLangURL }}{{ $name | urlize }}">{{ $name }}</a>
|
|
</li>
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
{{ range .Site.Params.addtional_menus }}
|
|
<li><a href="{{.href | relLangURL}}">{{.title}}</a></li>
|
|
{{ end }}
|
|
|
|
{{ if .Site.Params.algolia_search }}
|
|
<li>
|
|
<a href="{{ "search" | relURL }}"><i class="fa fa-search"></i></a>
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- /.navbar-collapse -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</nav>
|
|
<script>
|
|
// Drop Bootstarp low-performance Navbar
|
|
// Use customize navbar with high-quality material design animation
|
|
// in high-perf jank-free CSS3 implementation
|
|
var $body = document.body;
|
|
var $toggle = document.querySelector('.navbar-toggle');
|
|
var $navbar = document.querySelector('#huxblog_navbar');
|
|
var $collapse = document.querySelector('.navbar-collapse');
|
|
|
|
$toggle.addEventListener('click', handleMagic)
|
|
function handleMagic(e){
|
|
if ($navbar.className.indexOf('in') > 0) {
|
|
// CLOSE
|
|
$navbar.className = " ";
|
|
// wait until animation end.
|
|
setTimeout(function(){
|
|
// prevent frequently toggle
|
|
if($navbar.className.indexOf('in') < 0) {
|
|
$collapse.style.height = "0px"
|
|
}
|
|
},400)
|
|
}else{
|
|
// OPEN
|
|
$collapse.style.height = "auto"
|
|
$navbar.className += " in";
|
|
}
|
|
}
|
|
</script>
|