перевод лендинга на vue, добавление поддержки inertia

2026-06-27 22:15:17 +04:00
parent d72650bbdc
commit 8bf1b852f0
25 changed files with 1451 additions and 162 deletions
@@ -0,0 +1,83 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { arrowSvg, moonMark, navLinks } from './symbols';
+
+const props = defineProps({
+    auth: { type: Object, required: true },
+    playUrl: { type: String, required: true },
+    realm: { type: Object, required: true },
+});
+
+const scrolled = ref(false);
+const open = ref(false);
+const cabinetHref = computed(() => props.auth.authenticated ? props.auth.cabinet_url : (props.auth.login_url || '/login'));
+
+const close = () => {
+    open.value = false;
+};
+
+const onScroll = () => {
+    scrolled.value = window.scrollY > 40;
+};
+
+onMounted(() => window.addEventListener('scroll', onScroll, { passive: true }));
+onBeforeUnmount(() => {
+    document.body.style.overflow = '';
+    window.removeEventListener('scroll', onScroll);
+});
+
+watch(open, (value) => {
+    document.body.style.overflow = value ? 'hidden' : '';
+});
+</script>
+
+<template>
+    <nav :class="['nav', { scrolled }]">
+        <div class="wrap nav-inner">
+            <a href="#" class="nav-logo" @click="close">
+                <span class="nav-logo-mark" style="color: var(--moon)" v-html="moonMark(32)"></span>
+                <span>MoonWell</span>
+            </a>
+
+            <div class="nav-links nav-links-desktop">
+                <a v-for="link in navLinks" :key="link.href" :href="link.href">{{ link.label }}</a>
+                <a v-if="auth.is_admin" :href="auth.admin_url">Админка</a>
+                <a :href="cabinetHref" class="nav-cta">
+                    {{ auth.authenticated ? 'Личный кабинет' : 'Войти в кабинет' }}
+                    <span style="color: var(--moon)" v-html="arrowSvg"></span>
+                </a>
+                <a :href="playUrl" class="nav-cta">Играть <span style="color: var(--moon)" v-html="arrowSvg"></span></a>
+            </div>
+
+            <button :class="['nav-burger', { 'is-open': open }]" :aria-label="open ? 'Закрыть меню' : 'Открыть меню'" :aria-expanded="open" @click="open = !open">
+                <span></span><span></span><span></span>
+            </button>
+        </div>
+
+        <div :class="['nav-drawer-backdrop', { 'is-open': open }]" aria-hidden="true" @click="close"></div>
+        <aside :class="['nav-drawer', { 'is-open': open }]" :aria-hidden="!open">
+            <div class="nav-drawer-head"><span class="eyebrow">Навигация</span></div>
+            <div class="nav-drawer-links">
+                <a v-for="(link, index) in navLinks" :key="link.href" :href="link.href" :style="{ transitionDelay: `${60 + index * 40}ms` }" @click="close">
+                    <span class="num">{{ String(index + 1).padStart(2, '0') }}</span>
+                    <span class="lbl">{{ link.label }}</span>
+                    <span class="arr" v-html="arrowSvg"></span>
+                </a>
+                <a :href="cabinetHref" @click="close">
+                    <span class="num">05</span>
+                    <span class="lbl">{{ auth.authenticated ? 'Личный кабинет' : 'Войти в кабинет' }}</span>
+                    <span class="arr" v-html="arrowSvg"></span>
+                </a>
+                <a v-if="auth.is_admin" :href="auth.admin_url" @click="close">
+                    <span class="num">06</span>
+                    <span class="lbl">Админка</span>
+                    <span class="arr" v-html="arrowSvg"></span>
+                </a>
+            </div>
+            <a :href="playUrl" class="btn btn-primary nav-drawer-cta" @click="close">Играть <span v-html="arrowSvg"></span></a>
+            <div class="nav-drawer-foot">
+                <span class="eyebrow" style="color: var(--text-mute)">moonwell · {{ realm.client_version || '3.3.5a' }}</span>
+            </div>
+        </aside>
+    </nav>
+</template>