55 lines
2.0 KiB
Vue
55 lines
2.0 KiB
Vue
<template>
|
||
<header class="fixed inset-x-0 top-0 z-50 border-b border-white/[0.06] bg-ink/70 backdrop-blur-md">
|
||
<div class="mx-auto flex max-w-[1500px] items-center justify-between px-6 py-4 md:px-10">
|
||
<NuxtLink to="/" class="flex items-center gap-3 font-display text-lg font-extrabold tracking-tight">
|
||
<img
|
||
v-if="logoSrc"
|
||
:src="logoSrc"
|
||
:alt="brand"
|
||
class="h-9 w-auto max-w-[140px] object-contain"
|
||
/>
|
||
<template v-else>
|
||
{{ brand }}<span class="align-super text-[0.55em] text-volt">®</span>
|
||
</template>
|
||
</NuxtLink>
|
||
<nav class="hidden items-center gap-7 font-mono text-[11px] tracking-[0.16em] text-ash md:flex">
|
||
<a href="/#services" class="transition-colors hover:text-volt">خدمات</a>
|
||
<a href="/#work" class="transition-colors hover:text-volt">نمونهکارها</a>
|
||
<a href="/#team" class="transition-colors hover:text-volt">تیم</a>
|
||
<NuxtLink to="/blog" class="transition-colors hover:text-volt">بلاگ</NuxtLink>
|
||
<NuxtLink to="/gallery" class="transition-colors hover:text-volt">گالری</NuxtLink>
|
||
<a href="/#contact" class="text-bone transition-colors hover:text-volt">تماس</a>
|
||
</nav>
|
||
<span class="font-mono text-[12px] tracking-[0.14em] text-ash tabular-nums md:text-[13px]" dir="ltr">{{ time }}</span>
|
||
</div>
|
||
</header>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { formatClock } from "~/utils/timezone";
|
||
import { mediaUrl } from "~/utils/media";
|
||
|
||
const props = defineProps<{
|
||
brand?: string;
|
||
logoUrl?: string | null;
|
||
timezone?: string;
|
||
}>();
|
||
|
||
const brand = computed(() => props.brand || "منتک");
|
||
const logoSrc = computed(() => mediaUrl(props.logoUrl));
|
||
const time = ref("");
|
||
|
||
onMounted(() => {
|
||
const tick = () => {
|
||
try {
|
||
time.value = formatClock(new Date(), props.timezone);
|
||
} catch {
|
||
time.value = "";
|
||
}
|
||
};
|
||
tick();
|
||
const id = setInterval(tick, 1000);
|
||
onUnmounted(() => clearInterval(id));
|
||
});
|
||
</script>
|