74 lines
3.5 KiB
Vue
74 lines
3.5 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import { Link } from '@inertiajs/inertia-vue3'
|
|
import { Inertia } from '@inertiajs/inertia'
|
|
import UiButton from '../ui/UiButton.vue'
|
|
|
|
defineProps({
|
|
user: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
})
|
|
|
|
const isMenuOpen = ref(false)
|
|
|
|
const links = [
|
|
{ label: 'چطور کار میکند', href: '#how-it-works' },
|
|
{ label: 'امکانات', href: '#features' },
|
|
{ label: 'خدمات تصویربرداری', href: '#modalities' },
|
|
{ label: 'سوالات متداول', href: '#faq' },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<header class="sticky top-0 z-40 bg-white/90 backdrop-blur border-b border-dominant-50">
|
|
<div class="container max-w-7xl px-4 sm:px-6 h-[72px] flex items-center justify-between gap-6">
|
|
<Link href="/" class="shrink-0">
|
|
<img src="@/images/radical_logo.png" alt="تلهرادیولوژی رادیکال" class="h-10 w-auto object-contain">
|
|
</Link>
|
|
|
|
<nav class="hidden lg:block">
|
|
<ul class="flex items-center gap-8">
|
|
<li v-for="link in links" :key="link.href">
|
|
<a :href="link.href" class="text-sm font-medium text-dark hover:text-dominant-500 transition-colors duration-200">
|
|
{{ link.label }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="hidden lg:flex items-center gap-3">
|
|
<template v-if="user">
|
|
<UiButton label="ورود به پنل" severity="dominant" icon="fi fi-rr-user" @click="Inertia.visit(route('dashboard.index'))" />
|
|
</template>
|
|
<template v-else>
|
|
<UiButton label="ورود" severity="dominant" variant="text" text @click="Inertia.visit(route('login'))" />
|
|
<UiButton label="ثبتنام رایگان" severity="dominant" @click="Inertia.visit(route('register.chooseType'))" />
|
|
</template>
|
|
</div>
|
|
|
|
<button type="button" class="lg:hidden w-10 h-10 flex items-center justify-center rounded-lg text-dominant-700 hover:bg-dominant-50" :aria-expanded="isMenuOpen" aria-controls="landing-mobile-menu" aria-label="منو" @click="isMenuOpen = !isMenuOpen">
|
|
<i :class="isMenuOpen ? 'fi fi-rr-cross' : 'fi fi-rr-menu-burger'" class="text-lg leading-none"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<nav v-show="isMenuOpen" id="landing-mobile-menu" class="lg:hidden border-t border-dominant-50 bg-white">
|
|
<ul class="container max-w-7xl px-4 py-4 flex flex-col gap-1">
|
|
<li v-for="link in links" :key="link.href">
|
|
<a :href="link.href" class="block px-3 py-2 rounded-lg text-sm font-medium text-dark hover:bg-dominant-50" @click="isMenuOpen = false">
|
|
{{ link.label }}
|
|
</a>
|
|
</li>
|
|
<li class="pt-3 flex flex-col gap-2">
|
|
<UiButton v-if="user" label="ورود به پنل" severity="dominant" full-width @click="Inertia.visit(route('dashboard.index'))" />
|
|
<template v-else>
|
|
<UiButton label="ثبتنام رایگان" severity="dominant" full-width @click="Inertia.visit(route('register.chooseType'))" />
|
|
<UiButton label="ورود" severity="dominant" outlined full-width @click="Inertia.visit(route('login'))" />
|
|
</template>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
</template>
|