From 3804dee24e8b062bcc1d1a0a4ce16ff23613a8fe Mon Sep 17 00:00:00 2001
From: Alessio Gravili <alessio@gravili.de>
Date: Tue, 22 Feb 2022 01:40:25 +0100
Subject: [PATCH] Add dropdown

---
 frontend-new/package.json              |  1 +
 frontend-new/pnpm-lock.yaml            | 11 +++++
 frontend-new/src/components/Header.vue | 64 ++++++++++++++++++++++++--
 frontend-new/src/types/components.d.ts | 10 ++++
 4 files changed, 82 insertions(+), 4 deletions(-)

diff --git a/frontend-new/package.json b/frontend-new/package.json
index 6e71a99f4..6abef4e31 100644
--- a/frontend-new/package.json
+++ b/frontend-new/package.json
@@ -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",
diff --git a/frontend-new/pnpm-lock.yaml b/frontend-new/pnpm-lock.yaml
index 22c6768c4..dbc9da5d3 100644
--- a/frontend-new/pnpm-lock.yaml
+++ b/frontend-new/pnpm-lock.yaml
@@ -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'}
diff --git a/frontend-new/src/components/Header.vue b/frontend-new/src/components/Header.vue
index 804e624a6..800510ba3 100644
--- a/frontend-new/src/components/Header.vue
+++ b/frontend-new/src/components/Header.vue
@@ -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
diff --git a/frontend-new/src/types/components.d.ts b/frontend-new/src/types/components.d.ts
index 86377f93a..ead82c48e 100644
--- a/frontend-new/src/types/components.d.ts
+++ b/frontend-new/src/types/components.d.ts
@@ -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']
   }