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

Provisional light/dark mode

Browse Source
This commit is contained in:
Alessio Gravili 2022-02-15 15:32:35 +01:00 committed by MiniDigger | Martin
parent 88fc941d7f
commit 8bc54fa56c
2 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,14 @@ const announcements = await useInitialState<AnnouncementObject[]>(
"announcements",
async () => await useInternalApi<AnnouncementObject[]>("data/announcements", false)
);
let darkMode = false; // TODO: Make that properly & site-wide
function toggleDarkMode() {
console.log('II');
console.log(`DM: ${ darkMode}`);
darkMode = !darkMode;
}
</script>
<template>
@ -25,13 +33,17 @@ const announcements = await useInitialState<AnnouncementObject[]>(
<div class="site-logo mr-4 h-60px">
<img alt="Hangar Logo" src="/logo.svg" class="h-60px"/>
</div>
<nav>
<nav class="flex gap-3">
<router-link :to="{ name: 'index' }">Home</router-link>
<router-link :to="{ name: 'staff' }">Team</router-link>
</nav>
</div>
<div class="login-buttons">
<div class="login-buttons flex gap-2">
<button @click="toggleDarkMode">
<icon-mdi-weather-night v-if="darkMode" style="font-size: 1.2em;"></icon-mdi-weather-night>
<icon-mdi-white-balance-sunny v-else style="font-size: 1.2em;"></icon-mdi-white-balance-sunny>
</button>
<p>login</p>
</div>
</div>
@ -59,7 +71,6 @@ nav a.router-link-active:after {
}
nav a {
margin-right: 1em;
position: relative;
}
@ -79,8 +90,5 @@ nav a:not(.router-link-active):hover:after {
width: 80%;
}
</style>

2
frontend-new/src/types/components.d.ts vendored
View File

@ -8,6 +8,8 @@ declare module 'vue' {
Footer: typeof import('./../components/Footer.vue')['default']
Header: typeof import('./../components/Header.vue')['default']
IconMdiMenu: typeof import('~icons/mdi/menu')['default']
IconMdiWeatherNight: typeof import('~icons/mdi/weather-night')['default']
IconMdiWhiteBalanceSunny: typeof import('~icons/mdi/white-balance-sunny')['default']
}
}