86 lines
1.7 KiB
Vue
86 lines
1.7 KiB
Vue
<script setup>
|
|
import CalendarIcon from "./icons/calendar-icon.vue";
|
|
import BellIcon from "./icons/bell-icon.vue";
|
|
import ClockIcon from "./icons/clock-icon.vue";
|
|
import { RouterLink } from "vue-router";
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bottomnav">
|
|
<div class="entry">
|
|
<RouterLink to="/timetable">
|
|
<CalendarIcon class="icon" />
|
|
<span class="title">Timetable</span>
|
|
</RouterLink>
|
|
</div>
|
|
<div class="entry">
|
|
<RouterLink to="/substitutions">
|
|
<BellIcon class="icon" />
|
|
<span class="title">Substitutions</span>
|
|
</RouterLink>
|
|
</div>
|
|
<div class="entry">
|
|
<RouterLink to="/history">
|
|
<ClockIcon class="icon" />
|
|
<span class="title">History</span>
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.bottomnav {
|
|
width: calc(90% - 40px);
|
|
height: 70px;
|
|
background-color: var(--bottomnav-color);
|
|
border-radius: 10px;
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: grid;
|
|
grid-auto-columns: 1fr;
|
|
grid-auto-flow: column;
|
|
padding: 0px 20px;
|
|
}
|
|
|
|
.entry {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: inherit;
|
|
}
|
|
|
|
.entry .title {
|
|
text-decoration: none;
|
|
padding: 0px 10px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
@media screen and (max-width: 700px) {
|
|
.entry .title {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.entry * {
|
|
color: var(--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>
|