33 lines
894 B
Vue
33 lines
894 B
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
import Logo from "./Logo.vue";
|
|
import { currentUser } from "../auth.js";
|
|
|
|
// make ref for title
|
|
const title = ref("");
|
|
const username = ref(currentUser);
|
|
|
|
// change title dynamically based on emit
|
|
const changeTitle = (text) => {
|
|
title.value = text;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="flex items-center justify-between w-full border-b">
|
|
<Logo />
|
|
<div class="grow flex justify-center text-2xl">
|
|
{{ title }}
|
|
</div>
|
|
<router-link :to="`/user/${username}`">
|
|
<div
|
|
class="h-[4rem] w-[8rem] px-5 flex justify-center items-center border-l hover:bg-zinc-100 hover:text-zinc-700"
|
|
>
|
|
<h1 class="text-lg">🥷 {{ username }}</h1>
|
|
</div>
|
|
</router-link>
|
|
</nav>
|
|
<div class="h-full flex justify-center">
|
|
<router-view @title="(title) => changeTitle(title)"></router-view>
|
|
</div>
|
|
</template>
|