87 lines
2.2 KiB
Vue
87 lines
2.2 KiB
Vue
<template>
|
|
<div>
|
|
<v-app-bar
|
|
flat
|
|
app
|
|
hide-on-scroll
|
|
color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
|
|
v-if="!this.$store.getters.fullScreen"
|
|
>
|
|
<v-row>
|
|
<v-spacer></v-spacer>
|
|
<v-col cols="4" class="d-flex justify-start align-content-center">
|
|
<router-link :to="{ name: 'Home' }" class="routerLink">
|
|
<v-toolbar-title class="title">
|
|
<p class="mb-0">Savvy Firebase Tutorial</p>
|
|
</v-toolbar-title>
|
|
</router-link>
|
|
</v-col>
|
|
<v-col cols="4" class="d-flex justify-end align-self-center">
|
|
<router-link
|
|
:to="{ name: 'Playground' }"
|
|
class="routerLink ma-0 pr-2"
|
|
>
|
|
<p class="mb-0 underline">
|
|
Playground
|
|
</p>
|
|
</router-link>
|
|
<router-link
|
|
:to="{ name: 'Backgrounds' }"
|
|
class="routerLink ma-0 pr-2"
|
|
>
|
|
<p class="mb-0 underline">
|
|
Backgrounds
|
|
</p>
|
|
</router-link>
|
|
<router-link :to="{ name: 'Triangle' }" class="routerLink ma-0 pr-2">
|
|
<p class="mb-0 underline">
|
|
Triangle
|
|
</p>
|
|
</router-link>
|
|
<router-link :to="{ name: 'Login' }" class="routerLink ma-0 pr-2">
|
|
<p class=" mb-0 underline">
|
|
Sign In
|
|
</p>
|
|
</router-link>
|
|
<router-link :to="{ name: 'Login' }" class="routerLink ma-0">
|
|
<p class="mb-0 underline">Register</p>
|
|
</router-link>
|
|
</v-col>
|
|
<v-spacer></v-spacer>
|
|
</v-row>
|
|
</v-app-bar>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Appbar"
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.routerLink {
|
|
text-decoration: none;
|
|
color: $mainColor;
|
|
}
|
|
.underline {
|
|
position: relative;
|
|
}
|
|
.underline::after {
|
|
position: absolute;
|
|
content: "";
|
|
height: 0.1em;
|
|
top: 100%;
|
|
background: currentColor;
|
|
z-index: -1;
|
|
left: 0;
|
|
right: 0;
|
|
transform: scaleX(0);
|
|
transition: transform 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035) 50ms;
|
|
}
|
|
.underline:hover::after {
|
|
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
|
|
transform: scaleX(1);
|
|
}
|
|
</style>
|