simply/partials/layout/header.hbs at 5e603c32e074b6d5cabc5e8da40c0f6f79f807ee · godofredoninja/simply · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<header class="header js-header h-16 w-full text-sm flex items-center sticky top-0 z-20">
    <div class="header-wrap mx-auto flex items-center flex-auto px-4 w-full max-w-extreme">
        {{!-- Logo --}}
        <div class="header-left mr-5 flex items-center">
            <a href="{{@site.url}}"
                class="header-logo inline-block leading-none godo-tracking"
                data-event-category="Header"
                data-event-action="Logo"
                data-event-label="Click"
                data-event-non-interaction="true">
                {{#if @site.logo}}
                    <img src="{{img_url @site.logo size="m"}}" class="header-logo-img max-h-9 logo-default" alt="{{@site.title}}" width="115" height="30"/>
                    {{!-- <img src="{{asset "images/logo-dark-mode.png"}}" class="header-logo-img max-h-9 hidden logo-dark-mode" alt="" width="115" height="30"/> --}}
                {{else}}
                    <span class="text-3xl font-bold text-logo">{{@site.title}}</span>
                {{/if}}
            </a>
        </div>

        {{!-- Navigation --}}
        {{#if @site.navigation}}
            {{#if hasDropDown}}
                {{navigation navigationDropDown=true}}
            {{else}}
                {{navigation}}
            {{/if}}
        {{/if}}

        <div class="header-right flex-none flex justify-end items-center">
            {{!-- Light and Dark Mode --}}
            <a role="button" class="js-dark-mode button is-white items-center mr-2" aria-label="Dark and Light Mode">
                <svg class="icon icon--moon m-0" style="margin-right:calc(-0.5em - 1px)"><use xlink:href="#icon-moon"></use></svg>
                <svg class="icon icon--sunny m-0 hidden" style="margin-left:calc(-0.5em - 1px)"><use xlink:href="#icon-sunny"></use></svg>
            </a>

            {{!-- Toggle Searcg --}}
            <a href="#/search"
                role="button"
                aria-label="Toggle Search"
                class="godo-tracking button is-white mr-2"
                aria-haspopup="true"
                data-event-category="Header"
                data-event-action="Search"
                data-event-label="Click"
                data-event-non-interaction="true"
                data-ghost-search>
                <svg class="icon icon--search"><use xlink:href="#icon-search"></use></svg>
            </a>

            {{!-- Menu User Account --}}
            {{#if @site.members_enabled}}{{> "layout/account-menu"}}{{/if}}

            {{!-- Toggle Menu --}}
            <a href="javascript:;" role="button" aria-label="Show Navigation Menu" class="js-menu-toggle menu-burger button is-white relative lg:hidden"><span></span><span></span><span></span></a>
        </div>
    </div>
</header>

{{!-- Menu Mobile --}}
{{>"sidenav"}}