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

Fix styles

Browse Source
This commit is contained in:
Alessio Gravili 2022-02-18 02:24:29 +01:00 committed by MiniDigger | Martin
parent 648d97fac8
commit 8883f2aaed
1 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Announcement as AnnouncementObject } from "hangar-api"; import type { Announcement as AnnouncementObject } from "hangar-api";
import { onMounted } from 'vue' import { onMounted, ref, unref } from 'vue'
import { useInitialState } from "~/composables/useInitialState"; import { useInitialState } from "~/composables/useInitialState";
import { useInternalApi } from "~/composables/useApi"; import { useInternalApi } from "~/composables/useApi";
@ -10,10 +10,10 @@ import { useInternalApi } from "~/composables/useApi";
async () => await useInternalApi<AnnouncementObject[]>("data/announcements", false) async () => await useInternalApi<AnnouncementObject[]>("data/announcements", false)
); */ // TODO: This breaks click events ); */ // TODO: This breaks click events
let darkMode = false; // TODO: Make that properly & site-wide const darkMode = ref(false); // TODO: Make that properly & site-wide
function toggleDarkMode() { function toggleDarkMode() {
darkMode = !darkMode; darkMode.value = !unref(darkMode);
} }
@ -43,7 +43,7 @@ const navBarLinks = [
v-for='navBarLink in navBarLinks' v-for='navBarLink in navBarLinks'
:key='navBarLink.label' :key='navBarLink.label'
:to="{ name: navBarLink.link }" :to="{ name: navBarLink.link }"
class="relative after:content-['_↗'] after:block after:w-0" class="relative after:(absolute content-DEFAULT block w-0 top-30px left-1/10 h-4px rounded-8px)"
> >
{{ navBarLink.label }} {{ navBarLink.label }}
</router-link> </router-link>
@ -67,6 +67,18 @@ nav .router-link-active {
color: #4080FF; color: #4080FF;
font-weight: 700; font-weight: 700;
} }
nav a.router-link-active:after {
background: linear-gradient(-270deg, #004ee9 0%, #367aff 100%);
transition: width .2s ease-in;
width: 80%;
}
nav a:not(.router-link-active):hover:after {
background: #d3e1f6;
transition: width .2s ease-in;
width: 80%;
}
</style> </style>