63 lines
1.7 KiB
Vue
63 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
Radio,
|
|
UsersRound,
|
|
SlidersHorizontal,
|
|
LogOut,
|
|
Eye,
|
|
Video,
|
|
} from "lucide-vue-next";
|
|
const session = useSessionStore();
|
|
const compact = ref(false);
|
|
function scroll() {
|
|
compact.value = window.scrollY > 40;
|
|
}
|
|
onMounted(() => window.addEventListener("scroll", scroll, { passive: true }));
|
|
onBeforeUnmount(() => window.removeEventListener("scroll", scroll));
|
|
</script>
|
|
<template>
|
|
<header class="topbar" :class="{ compact }">
|
|
<NuxtLink
|
|
:to="session.user?.role === 'admin' ? '/host' : '/watch'"
|
|
class="brand"
|
|
aria-label="Webka"
|
|
><span class="brand-mark"><Video :size="22" /></span>webka<span
|
|
class="brand-dot"
|
|
>.</span
|
|
></NuxtLink
|
|
>
|
|
<GlassCard
|
|
v-if="session.user"
|
|
as="nav"
|
|
class="main-nav"
|
|
:aria-label="$t('nav.main')"
|
|
>
|
|
<NuxtLink v-if="session.user.role === 'admin'" to="/host"
|
|
><Radio :size="17" /><span>{{ $t("nav.host") }}</span></NuxtLink
|
|
>
|
|
<NuxtLink v-else to="/watch"
|
|
><Eye :size="17" /><span>{{ $t("nav.watch") }}</span></NuxtLink
|
|
>
|
|
<NuxtLink v-if="session.user.role === 'admin'" to="/settings/accounts"
|
|
><UsersRound :size="17" /><span>{{
|
|
$t("nav.accounts")
|
|
}}</span></NuxtLink
|
|
>
|
|
<NuxtLink to="/settings/general"
|
|
><SlidersHorizontal :size="17" /><span>{{
|
|
$t("nav.settings")
|
|
}}</span></NuxtLink
|
|
>
|
|
</GlassCard>
|
|
<div class="topbar-actions">
|
|
<LanguageSwitcher /><GlassButton
|
|
v-if="session.user"
|
|
class="icon-button logout"
|
|
:aria-label="$t('common.logout')"
|
|
@click="session.logout"
|
|
><LogOut :size="19"
|
|
/></GlassButton>
|
|
</div>
|
|
</header>
|
|
</template>
|