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

Mobile checking

Browse Source
This commit is contained in:
Alessio Gravili 2022-02-22 01:55:22 +01:00 committed by MiniDigger | Martin
parent 2286f85514
commit eb3c682df2
3 changed files with 94 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend-new/src/App.vue
View File

@ -44,6 +44,22 @@ onMounted(() => {
}
})
// For checking if on mobile or not
if(innerWidth <= theme.mobileBreakPoint && !theme.mobile){
theme.enableMobile();
}else if(innerWidth > theme.mobileBreakPoint && theme.mobile){
theme.disableMobile();
}
addEventListener('resize', () => {
if(innerWidth <= theme.mobileBreakPoint && !theme.mobile){
theme.enableMobile();
console.log(`Mobile: ${ theme.mobile}`)
}else if(innerWidth > theme.mobileBreakPoint && theme.mobile){
theme.disableMobile();
console.log(`Mobile: ${ theme.mobile}`)
}
})
})

61
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 class="relative">
<Popover v-if="!theme.mobile" class="relative">
<PopoverButton v-slot="{ open }" class="flex mr-4">
<icon-mdi-menu
class="transition-transform"
@ -87,6 +87,65 @@ const navBarLinks = [
</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="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/">
<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/">
<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 object-cover"/>
</div>

19
frontend-new/src/store/theme.ts
View File

@ -4,6 +4,11 @@ import { Ref, ref, unref } from "vue";
export const useThemeStore = defineStore("theme", () => {
const darkMode: Ref<boolean> = ref(false);
const mobile: Ref<boolean> = ref(true); //True cause mobile first!!
const mobileBreakPoint: number = 700;
function toggleDarkMode() {
darkMode.value = !unref(darkMode);
}
@ -16,5 +21,17 @@ export const useThemeStore = defineStore("theme", () => {
darkMode.value = false;
}
return { darkMode, toggleDarkMode, enableDarkMode, disableDarkMode };
function toggleMobile() {
mobile.value = !unref(mobile);
}
function enableMobile() {
mobile.value = true;
}
function disableMobile() {
mobile.value = false;
}
return { darkMode, toggleDarkMode, enableDarkMode, disableDarkMode, mobile, toggleMobile, enableMobile, disableMobile, mobileBreakPoint };
});