96 lines
1.9 KiB
Vue
96 lines
1.9 KiB
Vue
<template>
|
|
<header class="main-header">
|
|
<nav class="container">
|
|
<div class="logo">
|
|
<NuxtLink to="/" class="logo-link">
|
|
<img :src="logo" 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 logo = '/abbauflogo.png';
|
|
|
|
const navLinks = ref([
|
|
{ name: 'Beranda', path: '/' },
|
|
{ name: 'Tentang Kami', path: '/#tentang-kami' },
|
|
{ name: 'Templat', path: '/template' },
|
|
{ name: 'Panduan', path: '/#cara' },
|
|
{ name: 'Keistimewaan', path: '/#keistimewaan' },
|
|
{ name: 'Testimoni', path: '/#testimoni' },
|
|
]);
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* ================= NAVBAR ================= */
|
|
.main-header {
|
|
background-color: #eaf2ff;
|
|
padding: 15px 0;
|
|
border-bottom: 1px solid #d4e3ff;
|
|
width: 100%;
|
|
|
|
/* FIXED NAVBAR */
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1000; /* pastikan di atas konten */
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* Supaya konten di bawah navbar tidak tertutup */
|
|
body {
|
|
padding-top: 70px; /* sesuaikan dengan tinggi navbar */
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo a.logo-link {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
font-size: 1.5rem;
|
|
color: #0d6efd;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.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>
|