Montech_Landing/apps/landing/components/SiteNavbar.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>