91 lines
3.9 KiB
Vue
91 lines
3.9 KiB
Vue
<script setup>
|
|
import { Link, router, usePage } from '@inertiajs/vue3';
|
|
import { computed, onBeforeUnmount, ref, watch } from 'vue';
|
|
import { moonMark } from '../Pages/Landing/Components/symbols';
|
|
|
|
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 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="MoonWell — главная">
|
|
<span class="portal-brand__mark" v-html="moonMark(36)"></span>
|
|
<span>
|
|
<strong>{{ site.name }}</strong>
|
|
<small>{{ site.tagline }}</small>
|
|
</span>
|
|
</Link>
|
|
|
|
<nav class="portal-nav portal-nav--desktop" aria-label="Основная навигация">
|
|
<Link :href="urls.home">Главная</Link>
|
|
<Link v-if="cabinetUrl" :class="{ active: isCabinet }" :href="cabinetUrl">
|
|
{{ auth.authenticated ? 'Кабинет' : 'Войти' }}
|
|
</Link>
|
|
<Link v-if="auth.is_admin && urls.admin" :class="{ active: isAdmin }" :href="urls.admin">Админка</Link>
|
|
<Link v-if="urls.offer" :class="{ active: currentPath === '/public-offer' }" :href="urls.offer">Оферта</Link>
|
|
<Link v-if="urls.privacy" :class="{ active: currentPath === '/privacy-policy' }" :href="urls.privacy">Конфиденциальность</Link>
|
|
</nav>
|
|
|
|
<div v-if="auth.authenticated" class="portal-account portal-nav--desktop">
|
|
<span>
|
|
<strong>{{ auth.username }}</strong>
|
|
<small>{{ auth.access_label }}</small>
|
|
</span>
|
|
<button class="portal-logout" type="button" @click="logout">Выйти</button>
|
|
</div>
|
|
|
|
<button
|
|
class="portal-menu-toggle"
|
|
type="button"
|
|
:aria-expanded="menuOpen"
|
|
:aria-label="menuOpen ? 'Закрыть меню' : 'Открыть меню'"
|
|
@click="menuOpen = !menuOpen"
|
|
>
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div :class="['portal-mobile-menu', { open: menuOpen }]">
|
|
<nav class="wrap" aria-label="Мобильная навигация">
|
|
<Link :href="urls.home" @click="menuOpen = false">Главная</Link>
|
|
<Link v-if="cabinetUrl" :href="cabinetUrl" @click="menuOpen = false">
|
|
{{ auth.authenticated ? 'Личный кабинет' : 'Войти в кабинет' }}
|
|
</Link>
|
|
<Link v-if="auth.is_admin && urls.admin" :href="urls.admin" @click="menuOpen = false">Админка</Link>
|
|
<Link v-if="urls.offer" :href="urls.offer" @click="menuOpen = false">Публичная оферта</Link>
|
|
<Link v-if="urls.privacy" :href="urls.privacy" @click="menuOpen = false">Политика конфиденциальности</Link>
|
|
<button v-if="auth.authenticated" type="button" @click="logout">Выйти из аккаунта</button>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
</template>
|