passport/rootfs/web/src/components/NavMenu.vue at 2107f08e8bbead8125506d7497700bc3db00678b · drycc/passport · 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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<template>
    <ul id="menu-navigator" class="flex flex-wrap items-center justify-center gap-1 list-none m-0 p-0 text-sm font-medium">
        <li class="relative">
            <a class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-medium text-slate-700 bg-white border border-transparent rounded-lg hover:bg-slate-50 transition-all focus:outline-none group" :href="globalState.dashboardUrl">
                <LayoutGrid class="w-4 h-4 text-primary" aria-hidden="true" />
                <span>Dashboard</span>
            </a>
        </li>
        <li class="relative hidden md:block">
            <a class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-medium text-slate-700 bg-white border border-transparent rounded-lg hover:bg-slate-50 transition-all focus:outline-none group" href="https://www.drycc.cc/zh-cn/docs/roadmap/" target="_blank" rel="noopener noreferrer">
                <Zap class="w-4 h-4 text-primary opacity-80" aria-hidden="true" />
                <span>What's New</span>
            </a>
        </li>
        <li class="relative">
            <dropdown
                trigger-id="menu-nav"
                menu-id="ui-nav-menu-resources"
                trigger-label="Resources"
                :trigger-icon="resourcesTriggerIcon"
                :items="resourceItems"
                :menu-width="226"
            >
                <template #trigger>
                    <button class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-medium text-slate-700 bg-white border border-transparent rounded-lg hover:bg-slate-50 transition-all focus:outline-none group" type="button">
                        <component class="w-4 h-4 text-primary opacity-80" aria-hidden="true" :is="resourcesTriggerIcon" />
                        <span>Resources</span>
                    </button>
                </template>
            </dropdown>
        </li>
    </ul>
</template>

<script lang="ts">
import { markRaw } from "vue";
import { MessageSquare, FileText, Bookmark, BookOpen, LayoutGrid, Zap } from "lucide-vue-next";
import Dropdown from "./Dropdown.vue";
import { globalState } from "../store";

export default {
    name: "NavMenu",
    components: { LayoutGrid, Zap, Dropdown },
    setup() {
        return { globalState }
    },
    data() {
        return {
            isMenuActived: false,
            resourcesTriggerIcon: markRaw(Bookmark),
            resourceItems: [
                {
                    key: "docs",
                    label: "Documentation",
                    href: "https://www.drycc.cc/docs/",
                    icon: markRaw(FileText),
                    external: true
                },
                {
                    key: "community",
                    label: "Community Support",
                    href: "https://www.drycc.cc/community/",
                    icon: markRaw(MessageSquare),
                    external: true
                },
                {
                    key: "blog",
                    label: "Drycc.cc Blog",
                    href: "https://www.drycc.cc/blog/",
                    icon: markRaw(BookOpen),
                    external: true
                },
            ]
        }
    }
}

</script>

<style scoped>
/* Scoped styles removed */
</style>