86 lines
1.8 KiB
Vue
86 lines
1.8 KiB
Vue
<template>
|
|
<nav
|
|
id="voyageNav"
|
|
:class="['voyage-nav', { scrolled: isScrolled }]"
|
|
>
|
|
<div class="nav-container">
|
|
<div class="nav-brand">
|
|
<img
|
|
:src="navLogo"
|
|
:alt="logoAlt"
|
|
class="nav-logo"
|
|
id="navLogo"
|
|
>
|
|
<span>HARBOR SMITH</span>
|
|
</div>
|
|
<div class="nav-links">
|
|
<a
|
|
v-for="link in navLinks"
|
|
:key="link.href"
|
|
:href="link.href"
|
|
class="nav-link"
|
|
@click="handleSmoothScroll($event, link.href)"
|
|
>
|
|
{{ link.label }}
|
|
</a>
|
|
<a
|
|
href="tel:510-701-2535"
|
|
class="nav-link nav-cta"
|
|
>
|
|
Call Now
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
|
|
|
const isScrolled = ref(false)
|
|
|
|
const navLinks = [
|
|
{ href: '#services', label: 'Services' },
|
|
{ href: '#testimonials', label: 'Testimonials' },
|
|
{ href: '#contact', label: 'Contact' }
|
|
]
|
|
|
|
const navLogo = computed(() =>
|
|
isScrolled.value ? '/HARBOR-SMITH_navy.png' : '/HARBOR-SMITH-white.png'
|
|
)
|
|
|
|
const logoAlt = computed(() =>
|
|
isScrolled.value ? 'Harbor Smith Navy Logo' : 'Harbor Smith White Logo'
|
|
)
|
|
|
|
const handleScroll = () => {
|
|
isScrolled.value = window.pageYOffset > 50
|
|
}
|
|
|
|
const handleSmoothScroll = (event: Event, href: string) => {
|
|
if (!href.startsWith('#')) {
|
|
return
|
|
}
|
|
|
|
const target = document.querySelector(href)
|
|
if (!target) {
|
|
return
|
|
}
|
|
|
|
event.preventDefault()
|
|
target.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
|
}
|
|
|
|
onMounted(() => {
|
|
handleScroll()
|
|
window.addEventListener('scroll', handleScroll, { passive: true })
|
|
})
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('scroll', handleScroll)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Navigation styling handled in voyage-layout.css */
|
|
</style>
|