mirror of
https://github.com/HangarMC/Hangar.git
synced 2025-01-30 14:30:08 +08:00
Add dropdown
This commit is contained in:
Alessio Gravili
MiniDigger | Martin
parent
1fc1ef60fc
commit
3804dee24e
@ -12,6 +12,7 @@
|
||||
"format": "prettier . --write"
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/vue": "^1.5.0",
|
||||
"@vueuse/core": "^7.5.5",
|
||||
"@vueuse/head": "^0.7.5",
|
||||
"@vueuse/integrations": "^7.5.5",
|
||||
|
||||
@ -2,6 +2,7 @@ lockfileVersion: 5.3
|
||||
|
||||
specifiers:
|
||||
'@antfu/eslint-config': ^0.16.1
|
||||
'@headlessui/vue': ^1.5.0
|
||||
'@iconify/json': ^2.1.3
|
||||
'@intlify/vite-plugin-vue-i18n': ^3.3.0
|
||||
'@types/markdown-it-link-attributes': ^3.0.1
|
||||
@ -47,6 +48,7 @@ specifiers:
|
||||
vue-router: ^4.0.12
|
||||
|
||||
dependencies:
|
||||
'@headlessui/vue': 1.5.0_vue@3.2.31
|
||||
'@vueuse/core': 7.5.5_vue@3.2.31
|
||||
'@vueuse/head': 0.7.5_vue@3.2.31
|
||||
'@vueuse/integrations': 7.5.5_vue@3.2.31
|
||||
@ -1398,6 +1400,15 @@ packages:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@headlessui/vue/1.5.0_vue@3.2.31:
|
||||
resolution: {integrity: sha512-jAp6XYpqdEv32xhszaj5ejvjaX5qhu20sCbxu7lplePEfZL+4ffabivJBBTZAiPWczqAXmnZWNWG5DOyqjRa4w==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
vue: ^3.2.0
|
||||
dependencies:
|
||||
vue: 3.2.31
|
||||
dev: false
|
||||
|
||||
/@humanwhocodes/config-array/0.5.0:
|
||||
resolution: {integrity: sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==}
|
||||
engines: {node: '>=10.10.0'}
|
||||
|
||||
@ -4,6 +4,7 @@ import {useThemeStore} from '~/store/theme'
|
||||
|
||||
import {useInitialState} from "~/composables/useInitialState";
|
||||
import {useInternalApi} from "~/composables/useApi";
|
||||
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
|
||||
|
||||
// not sure if they need to be part of the initial state, since we directly render them, would only save a request on page switch at most, but I guess its a good demonstration
|
||||
/* const announcements = await useInitialState<AnnouncementObject[]>(
|
||||
@ -27,12 +28,67 @@ const navBarLinks = [
|
||||
<header class="bg-white dark:bg-headerDark">
|
||||
<div class="inner-header flex items-center max-w-1200px mx-auto justify-between h-65px w-[calc(100%-40px)]">
|
||||
<div class="logo-and-nav flex items-center">
|
||||
<button class="flex mr-4">
|
||||
<icon-mdi-menu style="font-size: 1.2em;"/>
|
||||
</button>
|
||||
<Popover class="relative">
|
||||
<PopoverButton v-slot="{ open }" class="flex mr-4">
|
||||
<icon-mdi-menu
|
||||
class="transition-transform"
|
||||
:class="open
|
||||
? 'transform rotate-90'
|
||||
: ''" style="font-size: 1.2em;"/>
|
||||
</PopoverButton>
|
||||
<transition
|
||||
enter-active-class="transition duration-200 ease-out"
|
||||
enter-from-class="translate-y-1 opacity-0"
|
||||
enter-to-class="translate-y-0 opacity-100"
|
||||
leave-active-class="transition duration-150 ease-in"
|
||||
leave-from-class="translate-y-0 opacity-100"
|
||||
leave-to-class="translate-y-1 opacity-0"
|
||||
>
|
||||
<PopoverPanel class="absolute z-10 w-60 bg-white shadow-md rounded-md top-10 border-solid border-t-4 border-t-blue-400 text-xs">
|
||||
<div class="flex flex-col">
|
||||
<a class="p-[12px] flex items-center" href="https://papermc.io/">
|
||||
<icon-mdi-home class="mr-3" style="font-size: 1.2em;"/>
|
||||
Paper Home
|
||||
</a>
|
||||
<a class="p-[12px] flex items-center" href="https://forums.papermc.io/">
|
||||
<icon-mdi-forum class="mr-3" style="font-size: 1.2em;"/>
|
||||
Forums
|
||||
</a>
|
||||
<a class="p-[12px] flex items-center" href="https://github.com/PaperMC">
|
||||
<icon-mdi-code-braces class="mr-3" style="font-size: 1.2em;"/>
|
||||
Code
|
||||
</a>
|
||||
<a class="p-[12px] flex items-center" href="https://paper.readthedocs.io/en/latest/">
|
||||
<icon-mdi-book-open class="mr-3" style="font-size: 1.2em;"/>
|
||||
Docs
|
||||
</a>
|
||||
<a class="p-[12px] flex items-center" href="https://papermc.io/javadocs">
|
||||
<icon-mdi-language-java class="mr-3" style="font-size: 1.2em;"/>
|
||||
JavaDocs
|
||||
</a>
|
||||
<a class="p-[12px] flex items-center" href="/">
|
||||
<icon-mdi-puzzle class="mr-3" style="font-size: 1.2em;"/>
|
||||
Hangar (Plugins)
|
||||
</a>
|
||||
<a class="p-[12px] flex items-center" href="https://papermc.io/downloads">
|
||||
<icon-mdi-download-circle class="mr-3" style="font-size: 1.2em;"/>
|
||||
Downloads
|
||||
</a>
|
||||
<a class="p-[12px] flex items-center" href="https://papermc.io/community">
|
||||
<icon-mdi-account-group class="mr-3" style="font-size: 1.2em;"/>
|
||||
Community
|
||||
</a>
|
||||
<a class="p-[12px] flex items-center" href="https://hangar-auth.benndorf.dev/">
|
||||
<icon-mdi-key class="mr-3" style="font-size: 1.2em;"/>
|
||||
Authentication Portal
|
||||
</a>
|
||||
</div>
|
||||
</PopoverPanel>
|
||||
</transition>
|
||||
</Popover>
|
||||
|
||||
<div class="site-logo mr-4 h-60px flex items-center">
|
||||
<img alt="Hangar Logo" src="/logo.svg" class="h-50px"/>
|
||||
<img alt="Hangar Logo" src="/logo.svg" class="h-50px object-cover"/>
|
||||
</div>
|
||||
<nav class="flex gap-3">
|
||||
<router-link
|
||||
|
||||
10
frontend-new/src/types/components.d.ts
vendored
10
frontend-new/src/types/components.d.ts
vendored
@ -7,7 +7,17 @@ declare module 'vue' {
|
||||
Announcement: typeof import('./../components/Announcement.vue')['default']
|
||||
Footer: typeof import('./../components/Footer.vue')['default']
|
||||
Header: typeof import('./../components/Header.vue')['default']
|
||||
IconMdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
|
||||
IconMdiBookOpen: typeof import('~icons/mdi/book-open')['default']
|
||||
IconMdiCodeBraces: typeof import('~icons/mdi/code-braces')['default']
|
||||
IconMdiDownloadCircle: typeof import('~icons/mdi/download-circle')['default']
|
||||
IconMdiForum: typeof import('~icons/mdi/forum')['default']
|
||||
IconMdiHome: typeof import('~icons/mdi/home')['default']
|
||||
IconMdiKey: typeof import('~icons/mdi/key')['default']
|
||||
IconMdiLanguageJava: typeof import('~icons/mdi/language-java')['default']
|
||||
IconMdiLock: typeof import('~icons/mdi/lock')['default']
|
||||
IconMdiMenu: typeof import('~icons/mdi/menu')['default']
|
||||
IconMdiPuzzle: typeof import('~icons/mdi/puzzle')['default']
|
||||
IconMdiWeatherNight: typeof import('~icons/mdi/weather-night')['default']
|
||||
IconMdiWhiteBalanceSunny: typeof import('~icons/mdi/white-balance-sunny')['default']
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user