mirror/Hangar
2
0
Fork 0
mirror of https://github.com/HangarMC/Hangar.git synced 2025-01-24 14:24:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

Dropdown menu

Browse Source
This commit is contained in:
Alessio Gravili 2022-02-22 17:44:30 +01:00 committed by MiniDigger | Martin
parent 554b2f0d64
commit abf78873bb
4 changed files with 40 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
frontend-new/src/components/Header.vue
View File

@ -28,7 +28,7 @@ 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">
<Popover v-if="!theme.mobile" class="relative">
<Popover class="relative">
<PopoverButton v-slot="{ open }" class="flex mr-4">
<icon-mdi-menu
class="transition-transform"
@ -44,100 +44,62 @@ const navBarLinks = [
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-bl-md rounded-r-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/">
<PopoverPanel class="fixed md:absolute z-10 w-9/10 md:w-max bg-white top-1/14 md:top-10 left-1/20 shadow1 rounded-md md:rounded-none md:rounded-bl-md md:rounded-r-md border-solid border-t-4 border-t-paperblue text-xs p-[20px]">
<p class="text-base font-semibold text-paperblue mb-4">Hangar</p>
<div class="grid grid-cols-2">
<router-link
:to="{ name: 'index' }"
class="flex items-center rounded-md px-6 py-2"
hover="text-paperblue bg-paperlightblue"
>
<icon-mdi-home class="mr-3" style="font-size: 1.2em;"/>
Home
</router-link>
<router-link
:to="{ name: 'staff' }"
class="flex items-center rounded-md px-6 py-2"
hover="text-paperblue bg-paperlightblue"
>
<icon-mdi-account-group class="mr-3" style="font-size: 1.2em;"/>
Team
</router-link>
</div>
<p class="text-base font-semibold text-paperblue mb-4 mt-10">More from Paper</p>
<div class="grid grid-cols-2">
<a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/" hover="text-paperblue bg-paperlightblue">
<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/">
<a class="flex items-center rounded-md px-6 py-2" href="https://forums.papermc.io/" hover="text-paperblue bg-paperlightblue">
<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">
<a class="flex items-center rounded-md px-6 py-2" href="https://github.com/PaperMC" hover="text-paperblue bg-paperlightblue">
<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/">
<a class="flex items-center rounded-md px-6 py-2" href="https://paper.readthedocs.io/en/latest/" hover="text-paperblue bg-paperlightblue">
<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">
<a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/javadocs" hover="text-paperblue bg-paperlightblue">
<icon-mdi-language-java class="mr-3" style="font-size: 1.2em;"/>
JavaDocs
</a>
<a class="p-[12px] flex items-center" href="/">
<a class="flex items-center rounded-md px-6 py-2" href="/" hover="text-paperblue bg-paperlightblue">
<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">
<a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/downloads" hover="text-paperblue bg-paperlightblue">
<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">
<a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/community" hover="text-paperblue bg-paperlightblue">
<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>
<Popover v-else 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="fixed z-10 w-9/10 h-9/10 bg-white top-1/20 left-1/20 shadow-md rounded-bl-md rounded-r-md 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 mobile
</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/">
<a class="flex items-center rounded-md px-6 py-2" href="https://hangar-auth.benndorf.dev/" hover="text-paperblue bg-paperlightblue">
<icon-mdi-key class="mr-3" style="font-size: 1.2em;"/>
Authentication Portal
</a>
@ -149,7 +111,7 @@ const navBarLinks = [
<div class="site-logo mr-4 h-60px flex items-center">
<img alt="Hangar Logo" src="/logo.svg" class="h-50px object-cover"/>
</div>
<nav class="flex gap-3">
<nav class="flex gap-3 invisible md:visible">
<router-link
v-for='navBarLink in navBarLinks'
:key='navBarLink.label'

4
frontend-new/src/styles/main.css
View File

@ -31,3 +31,7 @@ html {
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
font-weight: 400;
}
.shadow1{
box-shadow: 0 10px 20px rgb(0 0 0 / 15%), rgb(0 0 0 / 10%) 0 0 0 1px;
}

0
frontend-new/tailwind.config.js Normal file
View File

2
frontend-new/windi.config.ts
View File

@ -36,6 +36,8 @@ export default defineConfig({
},
colors: {
headerDark: '#111111',
paperlightblue: '#ecf2fb',
paperblue: '#004ee9'
},
},
},