98 lines
4.8 KiB
Vue
98 lines
4.8 KiB
Vue
<script setup>
|
|
import { Link, router, usePage } from '@inertiajs/vue3';
|
|
import { computed, onBeforeUnmount, ref, watch } from 'vue';
|
|
import BrandMark from './BrandMark.vue';
|
|
import LanguageSwitcher from './LanguageSwitcher.vue';
|
|
|
|
const props = defineProps({
|
|
site: { type: Object, required: true },
|
|
auth: { type: Object, required: true },
|
|
urls: { type: Object, required: true },
|
|
});
|
|
|
|
const page = usePage();
|
|
const menuOpen = ref(false);
|
|
const currentPath = computed(() => page.url.split('?')[0]);
|
|
const isCabinet = computed(() => currentPath.value.startsWith('/cabinet'));
|
|
const isAdmin = computed(() => currentPath.value.startsWith('/admin'));
|
|
const isNews = computed(() => currentPath.value.startsWith('/news'));
|
|
const cabinetUrl = computed(() => (
|
|
props.auth.authenticated
|
|
? props.urls.cabinet
|
|
: props.urls.login
|
|
));
|
|
|
|
function logout() {
|
|
menuOpen.value = false;
|
|
router.post(props.urls.logout);
|
|
}
|
|
|
|
watch(menuOpen, (open) => {
|
|
document.body.style.overflow = open ? 'hidden' : '';
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
document.body.style.overflow = '';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<header class="portal-header">
|
|
<div class="wrap portal-header__inner">
|
|
<Link class="portal-brand" :href="urls.home" :aria-label='$t("MoonWell — главная")'>
|
|
<span class="portal-brand__mark"><BrandMark :size="36" /></span>
|
|
<span>
|
|
<strong>{{ $t(site.name) }}</strong>
|
|
<small>{{ $t(site.tagline) }}</small>
|
|
</span>
|
|
</Link>
|
|
|
|
<nav class="portal-nav portal-nav--desktop" :aria-label='$t("Основная навигация")'>
|
|
<Link :href="urls.home">{{ $t("Главная") }}</Link>
|
|
<Link v-if="urls.news" :class="{ active: isNews }" :href="urls.news">{{ $t("Новости") }}</Link>
|
|
<Link v-if="cabinetUrl" :class="{ active: isCabinet }" :href="cabinetUrl">
|
|
{{ $t(auth.authenticated ? 'Кабинет' : 'Войти') }}
|
|
</Link>
|
|
<Link v-if="auth.is_admin && urls.admin" :class="{ active: isAdmin }" :href="urls.admin">{{ $t("Админка") }}</Link>
|
|
<Link v-if="urls.offer" :class="{ active: currentPath === '/public-offer' }" :href="urls.offer">{{ $t("Оферта") }}</Link>
|
|
<Link v-if="urls.privacy" :class="{ active: currentPath === '/privacy-policy' }" :href="urls.privacy">{{ $t("Персональные данные") }}</Link>
|
|
<Link v-if="urls.rules" :class="{ active: currentPath === '/project-rules' }" :href="urls.rules">{{ $t("Правила") }}</Link>
|
|
</nav>
|
|
|
|
<div v-if="auth.authenticated" class="portal-account portal-nav--desktop">
|
|
<span>
|
|
<strong>{{ $t(auth.username) }}</strong>
|
|
<small>{{ $t(auth.access_label) }}</small>
|
|
</span>
|
|
<button class="portal-logout" type="button" @click="logout">{{ $t("Выйти") }}</button>
|
|
</div>
|
|
|
|
<LanguageSwitcher />
|
|
<button
|
|
class="portal-menu-toggle"
|
|
type="button"
|
|
:aria-expanded="menuOpen"
|
|
:aria-label="$t(menuOpen ? 'Закрыть меню' : 'Открыть меню')"
|
|
@click="menuOpen = !menuOpen"
|
|
>
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div :class="['portal-mobile-menu', { open: menuOpen }]">
|
|
<nav class="wrap" :aria-label='$t("Мобильная навигация")'>
|
|
<Link :href="urls.home" @click="menuOpen = false">{{ $t("Главная") }}</Link>
|
|
<Link v-if="urls.news" :href="urls.news" @click="menuOpen = false">{{ $t("Новости") }}</Link>
|
|
<Link v-if="cabinetUrl" :href="cabinetUrl" @click="menuOpen = false">
|
|
{{ $t(auth.authenticated ? 'Личный кабинет' : 'Войти в кабинет') }}
|
|
</Link>
|
|
<Link v-if="auth.is_admin && urls.admin" :href="urls.admin" @click="menuOpen = false">{{ $t("Админка") }}</Link>
|
|
<Link v-if="urls.offer" :href="urls.offer" @click="menuOpen = false">{{ $t("Публичная оферта") }}</Link>
|
|
<Link v-if="urls.privacy" :href="urls.privacy" @click="menuOpen = false">{{ $t("Политика обработки персональных данных") }}</Link>
|
|
<Link v-if="urls.rules" :href="urls.rules" @click="menuOpen = false">{{ $t("Правила проекта") }}</Link>
|
|
<button v-if="auth.authenticated" type="button" @click="logout">{{ $t("Выйти из аккаунта") }}</button>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
</template>
|