83 lines
1.8 KiB
Vue
83 lines
1.8 KiB
Vue
<template>
|
|
<header class="main-header">
|
|
<nav class="container">
|
|
<div class="logo">
|
|
<NuxtLink to="/" class="logo-link"> <img src="/ABBAUF.png" alt="Abbauf Tech Logo" class="logo-icon">
|
|
<span>ABBAUF TECH</span>
|
|
</NuxtLink>
|
|
</div>
|
|
<ul class="nav-links">
|
|
<li v-for="link in navLinks" :key="link.name">
|
|
<NuxtLink :to="link.path">{{ link.name }}</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const navLinks = ref([
|
|
// Path untuk Beranda diubah menjadi / agar selalu kembali ke halaman utama
|
|
{ name: 'Beranda', path: '/' },
|
|
// Path ini agar berfungsi dari halaman lain (seperti /template)
|
|
{ name: 'Tentang Kami', path: '/#tentang-kami' },
|
|
// INI BAGIAN YANG PALING PENTING: Path diubah ke /template
|
|
{ name: 'Templat', path: '/template' },
|
|
{ name: 'Panduan', path: '/#cara' },
|
|
{ name: 'Keistimewaan', path: '/#keistimewaan' },
|
|
{ name: 'Testimoni', path: '/#testi' },
|
|
]);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.main-header {
|
|
background-color: #eaf2ff;
|
|
padding: 15px 0;
|
|
border-bottom: 1px solid #d4e3ff;
|
|
width: 100%;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo a.logo-link { /* Style untuk logo link */
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
font-size: 1.5rem;
|
|
color: #0d6efd;
|
|
text-decoration: none; /* Hilangkan garis bawah default */
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 40px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.nav-links {
|
|
list-style: none;
|
|
display: flex;
|
|
gap: 30px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.nav-links a {
|
|
text-decoration: none;
|
|
color: #333;
|
|
font-weight: 500;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: #0d6efd;
|
|
}
|
|
</style> |