wrbapp/frontend/pages/settings/index.vue

<template>
    <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
        <div>
            <h1 class="text-xl ml-2 font-bold">Info</h1>
            <div class="container">
                <div class="item">
                    Username
                </div>
            </div>
        </div>
        <div>
            <h1 class="text-xl ml-2 font-bold">Account</h1>
            <div class="container">
                <div @click="logout" class="item-hover">
                    Logout
                </div>
            </div>
        </div>
        <div>
            <h1 class="text-xl ml-2 font-bold">Admin</h1>
            <div class="container">
                <NuxtLink to="/settings/admin/users" class="rounded-t item-hover py-2 flex items-center">
                    <span>Manage users</span>
                    <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
                </NuxtLink>
                <div class="divider" />
                <NuxtLink to="/settings/admin/ledenlijst" class="rounded-b item-hover py-2 flex items-center">
                    <span>Ledenlijst</span>
                    <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
                </NuxtLink>
            </div>
        </div>
    </div>
</template>

<script setup>
import { signOut } from "firebase/auth";

definePageMeta({
    title: 'Settings'
})

const { auth } = inject('firebase')

const logout = () => {
    signOut(auth.value)
        .catch((error) => {
            console.log(error)
        })
}
</script>