Spaces:
Sleeping
Sleeping
File size: 4,601 Bytes
0326339 |
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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
<template>
<header
class="w-full h-14 shrink-0 flex flex-row justify-center items-center bg-dark text-light"
>
<div
class="w-full md:max-w-5xl lg:max-w-7xl h-full flex flex-row justify-between items-center px-0 sm:px-4"
>
<div class="h-full flex flex-row justify-start items-center">
<router-link
class="h-full flex flex-row justify-center items-center px-4 hover:bg-zinc-800"
to="/"
>
<img class="w-7 h-auto" src="/icon.png" />
</router-link>
<router-link
class="h-full flex flex-row justify-center items-center px-4 hover:bg-zinc-800"
to="/blog"
>
<span class="text-light font-semibold">Blog</span>
</router-link>
<a
class="h-full flex flex-row justify-center items-center px-4 hover:bg-zinc-800"
href="https://twitter.com/StarHistoryHQ"
target="_blank"
>
<span class="hidden lg:flex text-light font-semibold pr-3"
>Follow us on</span
>
<i class="fab fa-twitter text-2xl text-blue-300"></i>
</a>
</div>
<div class="hidden h-full md:flex flex-row justify-start items-center">
<router-link
class="h-full flex flex-row justify-center items-center px-4 hover:bg-zinc-800"
to="/blog/how-to-use-github-star-history"
>
📕 How to use this site
</router-link>
</div>
<div class="h-full hidden md:flex flex-row justify-end items-center">
<span
class="h-full flex flex-row justify-center items-center cursor-pointer font-semibold mr-2 px-3 hover:bg-zinc-800"
@click="handleSetTokenBtnClick"
>
{{ token ? "Edit" : "Add" }} Access Token
</span>
<GitHubStarButton />
</div>
<div class="h-full flex md:hidden flex-row justify-end items-center">
<span
class="relative h-full w-10 px-3 flex flex-row justify-center items-center cursor-pointer font-semibold text-light hover:bg-zinc-800"
@click="handleToggleDropMenuBtnClick"
>
<span
class="w-4 transition-all h-px bg-light absolute top-1/2"
:class="state.showDropMenu ? 'w-6 rotate-45' : '-mt-1'"
></span>
<span
class="w-4 transition-all h-px bg-light absolute top-1/2"
:class="state.showDropMenu ? 'hidden' : ''"
></span>
<span
class="w-4 transition-all h-px bg-light absolute top-1/2"
:class="state.showDropMenu ? 'w-6 -rotate-45' : 'mt-1'"
></span>
</span>
</div>
</div>
</header>
<div
class="`w-full h-auto py-2 flex md:hidden flex-col justify-start items-start shadow-lg border-b"
:class="state.showDropMenu ? 'flex' : 'hidden'"
>
<router-link
class="h-12 px-3 w-full flex flex-row justify-start items-center cursor-pointer font-semibold text-dark mr-2 hover:bg-gray-100 hover:text-blue-500"
to="/blog/how-to-use-github-star-history"
>
📕 How to use this site
</router-link>
<span
class="h-12 px-3 w-full flex flex-row justify-start items-center cursor-pointer font-semibold text-dark mr-2 hover:bg-gray-100 hover:text-blue-500"
@click="handleSetTokenBtnClick"
>
{{ token ? "Edit" : "Add" }} Access Token
</span>
<span class="h-12 px-3 w-full flex flex-row justify-start items-center">
<a
class="github-button -mt-1"
href="https://github.com/star-history/star-history"
data-show-count="true"
aria-label="Star star-history/star-history on GitHub"
target="_blank"
>
Star
</a>
</span>
</div>
<TokenSettingDialog
v-if="state.showSetTokenDialog"
@close="handleSetTokenDialogClose"
/>
</template>
<script lang="ts" setup>
import { computed, reactive } from "vue";
import useAppStore from "../store";
import GitHubStarButton from "./GitHubStarButton.vue";
import TokenSettingDialog from "./TokenSettingDialog.vue";
interface State {
showDropMenu: boolean;
showSetTokenDialog: boolean;
}
const store = useAppStore();
const state = reactive<State>({
showDropMenu: false,
showSetTokenDialog: false,
});
const token = computed(() => {
return store.token;
});
const handleSetTokenBtnClick = () => {
state.showSetTokenDialog = true;
};
const handleSetTokenDialogClose = () => {
state.showSetTokenDialog = false;
};
const handleToggleDropMenuBtnClick = () => {
state.showDropMenu = !state.showDropMenu;
};
</script>
|