/
TheNavbar.vue
78 lines (71 loc) · 2.42 KB
/
TheNavbar.vue
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
<script setup lang="ts">
import docsearch from '@docsearch/js'
import '~/styles/docsearch.css'
const navigation = useNavigationStore()
const route = useRoute()
onMounted(() => {
docsearch({
container: '#docsearch',
appId: 'R2IYF7ETH7',
indexName: 'docsearch',
apiKey: '599cec31baffa4868cae4e79f180729b',
})
})
</script>
<template>
<nav
class="sticky top-0 z-40 w-full flex-none bg-white/40 backdrop-blur dark:border-slate-50/[0.06] dark:bg-transparent lg:z-50 lg:border-b lg:border-slate-900/10"
>
<div class="mx-auto max-w-8xl px-2 sm:px-6 lg:px-12">
<div class="relative flex h-14 justify-between">
<the-sidebar-mobile />
<!-- menu -->
<div class="ml-14 flex flex-1 items-center space-x-8 sm:ml-0">
<div class="flex flex-shrink-0 items-center">
<router-link to="/">
<img
class="h-5 w-auto"
src="https://raw.githubusercontent.com/wilfredinni/merken/master/static/merken/img/snake.svg"
alt="Workflow"
/>
</router-link>
</div>
<div class="pointer-events-auto relative bg-white dark:bg-slate-900">
<div id="docsearch"></div>
</div>
</div>
<!-- actions -->
<div
class="absolute inset-y-0 right-0 flex items-center space-x-5 pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"
>
<div
class="hidden border-r border-slate-200 pr-6 dark:border-slate-800 sm:ml-6 sm:flex sm:space-x-6"
>
<router-link
v-for="item in navigation.navbarNavigation"
:key="item.name"
:to="item.path"
class="inline-flex items-center px-1 pt-1 text-sm font-medium"
:class="
route.path === item.path
? 'text-sky-600 dark:text-sky-400'
: 'text-slate-700 hover:text-sky-500 dark:text-gray-200 dark:hover:text-sky-400'
"
>
{{ item.name }}
</router-link>
<base-reader-mode />
</div>
<base-theme-toggle />
<a
target="_blank"
href="https://github.com/wilfredinni/python-cheatsheet/tree/next"
>
<github-icon />
<span class="sr-only">python cheatsheet repository</span>
</a>
</div>
</div>
</div>
</nav>
</template>