<!-- 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>