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

More tailwind

Browse Source
This commit is contained in:
Alessio Gravili 2022-02-15 18:08:53 +01:00 committed by MiniDigger | Martin
parent 8bc54fa56c
commit 22a857df1b
1 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,6 +16,15 @@ function toggleDarkMode() {
console.log(`DM: ${ darkMode}`); console.log(`DM: ${ darkMode}`);
darkMode = !darkMode; darkMode = !darkMode;
} }
function test() {
console.log("test");
}
const navBarLinks = [
{link: 'index', label: 'Home'},
{link: 'staff', label: 'Team'},
];
</script> </script>
<template> <template>
@ -23,7 +32,7 @@ function toggleDarkMode() {
<Announcement v-for="(announcement, idx) in announcements" :key="idx" :announcement="announcement" /> <Announcement v-for="(announcement, idx) in announcements" :key="idx" :announcement="announcement" />
</template> </template>
<header class="bg-white"> <header class="bg-white">
<div class="inner-header flex items-center"> <div class="inner-header flex items-center max-w-1200px mx-auto justify-between">
<div class="logo-and-nav flex items-center"> <div class="logo-and-nav flex items-center">
<button class="mr-4"> <button class="mr-4">
<icon-mdi-menu style="font-size: 1.2em;"/> <icon-mdi-menu style="font-size: 1.2em;"/>
@ -34,13 +43,19 @@ function toggleDarkMode() {
<img alt="Hangar Logo" src="/logo.svg" class="h-60px"/> <img alt="Hangar Logo" src="/logo.svg" class="h-60px"/>
</div> </div>
<nav class="flex gap-3"> <nav class="flex gap-3">
<router-link :to="{ name: 'index' }">Home</router-link> <router-link
<router-link :to="{ name: 'staff' }">Team</router-link> v-for='navBarLink in navBarLinks'
:key='navBarLink.label'
:to="{ name: navBarLink.link }"
class="relative after:(content-['hello'] block w-0)"
>
{{ navBarLink.label }}
</router-link>
</nav> </nav>
</div> </div>
<div class="login-buttons flex gap-2"> <div class="login-buttons flex gap-2">
<button @click="toggleDarkMode"> <button @click="test">
<icon-mdi-weather-night v-if="darkMode" style="font-size: 1.2em;"></icon-mdi-weather-night> <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> <icon-mdi-white-balance-sunny v-else style="font-size: 1.2em;"></icon-mdi-white-balance-sunny>
</button> </button>
@ -52,13 +67,6 @@ function toggleDarkMode() {
<style lang="css" scoped> <style lang="css" scoped>
.inner-header {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
justify-content: space-between;
}
nav .router-link-active { nav .router-link-active {
color: #4080FF; color: #4080FF;
font-weight: 700; font-weight: 700;
@ -70,13 +78,7 @@ nav a.router-link-active:after {
width: 80%; width: 80%;
} }
nav a {
position: relative;
}
nav a:after { nav a:after {
content: "";
width: 0;
top: 30px; top: 30px;
left: 10%; left: 10%;
height: 4px; height: 4px;