83 lines
1.7 KiB
Vue
83 lines
1.7 KiB
Vue
<script setup>
|
|
import { CalendarIcon, BellIcon, ClockIcon } from "lucide-vue-next";
|
|
import { RouterLink } from "vue-router";
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bottomnav">
|
|
<div class="entry">
|
|
<RouterLink to="/timetable">
|
|
<CalendarIcon size="30" class="icon" />
|
|
<span class="title">{{ $t("title.timetable") }}</span>
|
|
</RouterLink>
|
|
</div>
|
|
<div class="entry">
|
|
<RouterLink to="/substitutions">
|
|
<BellIcon size="30" class="icon" />
|
|
<span class="title">{{ $t("title.substitutions") }}</span>
|
|
</RouterLink>
|
|
</div>
|
|
<div class="entry">
|
|
<RouterLink to="/history">
|
|
<ClockIcon size="30" class="icon" />
|
|
<span class="title">{{ $t("title.history") }}</span>
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.bottomnav {
|
|
width: calc(90% - 40px);
|
|
height: 50px;
|
|
max-width: 800px;
|
|
padding: 0px 20px;
|
|
position: fixed;
|
|
bottom: 20px;
|
|
display: grid;
|
|
grid-auto-columns: 1fr;
|
|
grid-auto-flow: column;
|
|
z-index: 100;
|
|
border-radius: 10px;
|
|
background-color: var(--bottomnav-color);
|
|
box-shadow: var(--bottomnav-shadow);
|
|
}
|
|
|
|
.entry {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.entry .title {
|
|
padding: 0px 10px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
@media screen and (max-width: 700px) {
|
|
.entry .title {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.entry * {
|
|
color: var(--bottomnav-icon-color);
|
|
}
|
|
|
|
a {
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.entry .router-link-active {
|
|
background-color: var(--bottomnav-active-color);
|
|
padding: 4px 25px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.entry .router-link-active > * {
|
|
color: var(--bottomnav-icon-active-color);
|
|
}
|
|
</style>
|