website/layouts/partials/header.html

<!-- Header Start -->
<header class="navigation">
    {{ if eq .Site.Language.Lang "zh"}}
    <div class="join-div">
        <div class="content">
            🚀KubeSphere 3.1.0 全新发布！混合多云走向边缘，让应用无处不在，<a href='{{ "/blogs/kubesphere-3.1.0-ga-announcement/" | relLangURL }}' target="_blank" rel="noopener noreferrer">查看 v3.1.0 详细解读与视频👩‍💻</a> <a href="https://cic.qingcloud.com/index?channel=4692b1f2-c930-11eb-9f93-acde48001122" target="_blank" rel="noopener noreferrer">7 月 29 日相约北京！云原生线下 Meetup 火热报名中🙋‍♂️→</a>
            <img id="close-join" src="/images/header/close.svg" alt="close">
        </div>
    </div>
    {{ end }}
    {{ if eq .Site.Language.Lang "en"}}
    <div class="join-div">
        <div class="content">
            🚀 KubeSphere 3.1.0 is now generally available as it extends Kubernetes from the cloud to the edge. <a href={{"/blogs/kubesphere-3.1.0-ga-announcement/" | relLangURL }} target="_blank" rel="noopener noreferrer">Read the GA Announcement for 3.1.0 →</a>
            <img id="close-join" src="/images/header/close.svg" alt="close">
        </div>
    </div>
    {{ end }}
    <div class="common-layout">
        <div class="header-container">
            <a href="{{ site.Home.RelPermalink }}">
                <img src="/images/header/logo.svg" alt="{{ .Site.Title }}" class="logo">
            </a>

            <ul class="nav">
                {{ $section := .Page.Section }}
                {{ range .Site.Menus.main }}
                {{ if .HasChildren }}

                {{ $active := false }}
                {{ range .Children }}
                    {{ if eq $section .URL }}
                        {{ $active = true }}
                    {{ end}}
                {{ end }}

                <li {{ if $active }} class="menu-li menu-active" {{ else }} class="menu-li" {{ end}}>
                    <span class='menu-span'>{{ .Name }}</span>
                    <ul class="dropdown-menu menu-{{ .Weight }}">
                        {{ range .Children }}
                        <li {{ if eq $section .URL }} class="active"{{ end}}>
                            {{ if hasPrefix .URL "http" }}
                            <a href="{{ .URL }}" target="_blank" rel="noopener noreferrer">{{ .Name | safeHTML }}</a>
                            {{ else }}
                            <a href="{{ .URL | relLangURL }}">{{ .Name | safeHTML }}</a>
                            {{ end }}
                        </li>
                        {{ end }}
                    </ul>
                </li>
                {{ else }}
                <li {{ if eq $section .URL }} class="active"{{ end}}>
                    {{ if hasPrefix .URL "http" }}
                    <a data-docs="{{ .Name }}" href="{{ .URL }}" target="_blank" rel="noopener noreferrer">{{ .Name }}</a>
                    {{ else }}
                    <a data-docs="{{ .Name }}" href="{{ .URL | relLangURL }}">{{ .Name }}</a>
                    {{ end }}
                </li>
                {{ end }}

                {{ end }}

            </ul>
            <div class="right-menu">
                <ul>
                    <li class="language-menu">
                        <div>
                            <img src="/images/header/black.svg" alt="">
                            <span>{{ .Site.Language.LanguageName }}</span>
                        </div>
                        {{ with .Page.AllTranslations }}
                        <ul class="dropdown-menu">
                            {{ range . }}
                            <li onclick="location = '{{ .RelPermalink }}'">{{ .Language.LanguageName }}</li>
                            {{ end }}
                        </ul>
                        {{ end }}
                    </li>
                    <li class='btn-li'>
                        <a href="https://demo.kubesphere.io/login" target="_blank" rel="noopener noreferrer">
                            <button class="demo-btn">{{ i18n "Demo" }} →</button>
                        </a>
                        <ol class="dropdown-menu">
                            <li>{{ i18n "demo content 1" }}</li>
                            <li>{{ i18n "demo content 2" }}</li>
                            <li>{{ i18n "demo content 3" }}</li>
                        </ol>
                    </li>
                    <li class='link-li'>
                        <a class='link-slack' href="{{ .Site.Params.slackLink }}" target="_blank" rel="noopener noreferrer"></a>
                        <a class='link-twitter' href="{{ .Site.Params.twitterLink }}" target="_blank" rel="noopener noreferrer"></a>
                        <a class='link-github' href="{{ .Site.Params.githubLink }}" target="_blank" rel="noopener noreferrer"></a>
                    </li>
                    <li class="menu-icon">
                        <img src="/images/header/menu.svg" alt="">
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div id="modal-for-menu" class="modal">
        <ul class="nav">
            {{ $section := .Page.Section }}
            {{ range .Site.Menus.main }}
            {{ if .HasChildren }}

            {{ $active := false }}
            {{ range .Children }}
                {{ if eq $section .URL }}
                    {{ $active = true }}
                {{ end}}
            {{ end }}

            <li data-check="0" {{ if $active }} class="menu-li menu-active" {{ else }} class="menu-li" {{ end}}>
                <span class='menu-span'>{{ .Name }}</span>
                <ul class="dropdown-menu">
                    {{ range .Children }}
                    <li {{ if eq $section .URL }} class="active"{{ end}}>
                        <a href="{{ .URL | relLangURL }}">{{ .Name | safeHTML }}</a>
                    </li>
                    {{ end }}
                </ul>
            </li>
            {{ else }}
            <li {{ if eq $section .URL }} class="active"{{ end}}><a data-docs="{{ .Name }}" href="{{ .URL | relLangURL }}">{{ .Name | safeHTML }}</a></li>
            {{ end }}

            {{ end }}

        </ul>
        <div class="btn-div">
            <a href="https://demo.kubesphere.io/login" target="_blank" rel="noopener noreferrer">
                <button class="demo-btn">{{ i18n "Demo" }} →</button>
            </a>
        </div>
        <div class="link-div">
            <a href="{{ .Site.Params.slackLink }}" target="_blank" rel="noopener noreferrer">
                <img src="/images/header/slack-hover.svg" alt="">
            </a>
            <a href="{{ .Site.Params.twitterLink }}" target="_blank" rel="noopener noreferrer">
                <img src="/images/header/twitter-hover.svg" alt="">
            </a>
            <a href="{{ .Site.Params.githubLink }}" target="_blank" rel="noopener noreferrer">
                <img src="/images/header/github-hover.svg" alt="">
            </a>
        </div>
    </div>
</header>
<script>
var bindNavMouseEvent = function(selector, element) {
    if (!element) {
        element = $(selector)
    }
    var flag = false
    element.mouseenter(function() {
        if (flag) {
            return false
        }
        flag = true
        $(this).find('.dropdown-menu').fadeIn(200, function() {
            flag = false
        })
    });
    element.mouseleave(function() {
        $(this).find('.dropdown-menu').fadeOut(200)
    });
}

var bindScrollChangeHeader = function() {
    var check = 100
    var header = $('header')
    window.addEventListener('scroll', function() {
        var scrollY = window.scrollY;
        if (scrollY > 100) {
            header.addClass('navigationScroll')
        } else {
            header.removeClass('navigationScroll')
        }
    })
}

var bindClickShowMenu = function() {
    $('.menu-icon').click(function() {
        $('#modal-for-menu').modal()
    })
}

var bindClickModalLi = function() {
    $('.modal .menu-li').click(function() {
        var check = $(this).data('check')
        if (check === 0) {
            $(this).data('check', 1)
            $(this).find('.dropdown-menu').slideDown(200)
        } else {
            $(this).data('check', 0)
            $(this).find('.dropdown-menu').slideUp(200)
        }
        $(this).find('.menu-span').toggleClass('up')
    })
}

var bindClickClose = function() {
    $('#close-join').click(function() {
        $('.navigation .join-div').hide()
        $('.main-section').removeClass('padding')
    })
}

var language = '{{.Site.Language.Lang}}'

bindClickClose()

bindScrollChangeHeader()

$('.header-container .menu-li').each(function() {
    bindNavMouseEvent('', $(this))
})
bindNavMouseEvent('.header-container .language-menu')
bindNavMouseEvent('.header-container .btn-li')

bindClickShowMenu()
bindClickModalLi()


</script>