wakapi/views/menu-main.tpl.html

<script type="module" src="assets/js/components/menu-main.js"></script>

<div class="flex justify-between space-x-4 items-center relative" id="main-menu" v-scope @vue:mounted="mounted">
    <div class="mr-8 hidden lg:inline-block shrink-0">
    {{ template "logo.tpl.html" }}
    </div>

    <a class="menu-item" href="summary">
        <span class="iconify inline text-2xl text-gray-400" data-icon="ic:round-dashboard"></span>
        <span class="text-gray-300 hidden lg:inline-block">Dashboard</span>
    </a>

    <a class="menu-item" href="leaderboard">
        <span class="iconify inline text-2xl text-gray-400" data-icon="fluent:data-bar-horizontal-24-filled"></span>
        <span class="text-gray-300 hidden lg:inline-block">Leaderboard</span>
    </a>

    <div class="menu-item hidden sm:flex imp:cursor-not-allowed">
        <span class="iconify inline text-2xl text-gray-700" data-icon="bi:people-fill"></span>
        <a class="text-gray-600 leading-none hidden lg:inline-block">Team<br>
            <span class="text-xxs whitespace-nowrap">(coming soon)</span>
        </a>
    </div>

    <div class="menu-item relative" @click="state.showDropdownResources = !state.showDropdownResources" data-trigger-for="showDropdownResources">
        <span class="iconify inline text-2xl text-gray-400" data-icon="ph:books-bold"></span>
        <a class="text-gray-400 hidden lg:inline-block">Resources</a>
        <span class="iconify inline text-xl text-gray-400" data-icon="akar-icons:chevron-down"></span>

        <div v-cloak v-show="state.showDropdownResources" class="flex bg-gray-850 shadow-md z-10 p-2 absolute top-0 right-0 rounded popup mt-12 w-full" id="resources-menu-dropdown" style="min-width: 128px">
            <div class="grow flex flex-col">
                <div class="submenu-item">
                    <a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://github.com/muety/wakapi" target="_blank" rel="noreferrer noopener" @click="state.showDropdownResources = !state.showDropdownResources"  data-trigger-for="showDropdownResources">
                        <span class="text-sm">GitHub</span>
                        <span class="iconify inline" data-icon="codicon:github-inverted"></span>
                    </a>
                </div>
                <div class="submenu-item">
                    <a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="swagger-ui" @click="state.showDropdownResources = !state.showDropdownResources"  data-trigger-for="showDropdownResources">
                        <span class="text-sm">API Docs</span>
                        <span class="iconify inline" data-icon="bx:bx-code-curly"></span>
                    </a>
                </div>
                <div class="submenu-item">
                    <a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://wakatime.com" target="_blank" rel="noreferrer noopener" @click="state.showDropdownResources = !state.showDropdownResources"  data-trigger-for="showDropdownResources">
                        <span class="text-sm">WakaTime</span>
                        <span class="iconify inline" data-icon="simple-icons:wakatime"></span>
                    </a>
                </div>
                <div class="submenu-item">
                    <a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://github.com/sponsors/muety" target="_blank" rel="noreferrer noopener" @click="state.showDropdownResources = !state.showDropdownResources"  data-trigger-for="showDropdownResources">
                        <span class="text-sm">Donate</span>
                        <span class="iconify inline" data-icon="bx:bxs-heart"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <a class="menu-item" href="settings">
        <span class="iconify inline text-2xl text-gray-400" data-icon="ci:settings-filled"></span>
        <span class="text-gray-400 hidden lg:inline-block">Settings</span>
    </a>

    <div class="grow"></div>

    <div class="shrink-0 menu-item relative" @click="state.showDropdownUser = !state.showDropdownUser" data-trigger-for="showDropdownUser">
        <div class="hidden md:flex flex flex-col text-right">
            <div>
                {{ if .User.HasActiveSubscription }}
                <span class="iconify inline text-gold mr-1" data-icon="jam:crown-f" style="margin-bottom: -2px" title="Thanks for supporting Wakapi!"></span>
                {{ end }}
                <a class="text-gray-300">{{ .User.ID }}</a>
            </div>
            {{ if .User.Email }}
            <span class="text-xxs text-gray-500">{{ .User.Email }}</span>
            {{ end }}
        </div>
        {{ if avatarUrlTemplate }}
        <img src="{{ .User.AvatarURL avatarUrlTemplate }}" width="32px" class="rounded-full border-green-700" alt="User Profile Avatar" title="Looks like you, doesn't it?"/>
        {{ else }}
        <span class="iconify inline cursor-pointer text-gray-500 rounded-full border-green-700" style="width: 32px; height: 32px" data-icon="ic:round-person" @click="state.showDropdownUser = !state.showDropdownUser" data-trigger-for="showDropdownUser"></span>
        {{ end }}

        <div v-cloak v-show="state.showDropdownUser" class="flex bg-gray-850 shadow-md z-10 p-2 absolute top-0 right-0 rounded popup mt-16 w-full" id="user-menu-popup" style="min-width: 156px;">
            <div class="grow flex flex-col">
                <div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
                    <button class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" @click="state.showApiKey = true" data-trigger-for="showApiKey">
                        <span class="text-sm">Show API Key</span>
                        <span class="iconify inline" data-icon="fluent:key-32-filled"></span>
                    </button>
                </div>
                <div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
                    <form action="logout" method="post" class="grow">
                        <button type="submit" class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold">
                            <span class="text-sm">Logout</span>
                            <span class="iconify inline" data-icon="ls:logout"></span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div v-cloak v-show="state.showApiKey" class="flex bg-gray-850 shadow-md z-10 p-2 absolute top-0 right-0 rounded popup" id="api-key-popup">
        <div class="grow flex flex-col px-2">
            <span class="text-xxs text-gray-500 mx-1">API Key</span>
            <input type="text" class="bg-transparent text-sm text-white mx-1 font-mono" id="api-key-container" readonly
                   value="{{ .ApiKey }}" style="min-width: 330px">
        </div>
        <div class="flex items-center px-2 border-l border-gray-700">
            <button title="Copy to clipboard" onclick="copyApiKey(event)">
                <span class="iconify inline text-gray-300" data-icon="majesticons:clipboard-copy"></span>
            </button>
        </div>
    </div>
</div>