matt
d844579504
All checks were successful
build-website / build (push) Successful in 1m45s
- Fix hero video not displaying in notch safe area by changing z-index from -1 to 1 - Fix lucide icons not showing by installing and configuring nuxt-icon module - Fix navigation bar bobbing by removing hysteresis thresholds and simplifying scroll handler 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
90 lines
2.1 KiB
Vue
90 lines
2.1 KiB
Vue
<template>
|
|
<nav
|
|
id="voyageNav"
|
|
:class="['voyage-nav', { scrolled: isScrolled }]"
|
|
>
|
|
<div class="nav-container">
|
|
<div class="nav-brand" @click="scrollToTop" style="cursor: pointer;">
|
|
<img
|
|
:src="navLogo"
|
|
:alt="logoAlt"
|
|
class="nav-logo"
|
|
id="navLogo"
|
|
width="150"
|
|
height="50"
|
|
>
|
|
<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'
|
|
import { useSmoothScroll } from '~/composables/useSmoothScroll'
|
|
|
|
const { scrollToElement, scrollToTop: smoothScrollToTop } = useSmoothScroll()
|
|
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 = () => {
|
|
const currentOffset = window.scrollY || window.pageYOffset
|
|
isScrolled.value = currentOffset > 50
|
|
}
|
|
|
|
const handleSmoothScroll = (event: Event, href: string) => {
|
|
if (!href.startsWith('#')) {
|
|
return
|
|
}
|
|
|
|
event.preventDefault()
|
|
scrollToElement(href, 800) // Constant-speed smooth scrolling
|
|
}
|
|
|
|
const scrollToTop = () => {
|
|
smoothScrollToTop(800) // Constant-speed smooth scrolling
|
|
}
|
|
|
|
onMounted(() => {
|
|
handleScroll()
|
|
window.addEventListener('scroll', handleScroll, { passive: true })
|
|
})
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('scroll', handleScroll)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Navigation styling handled in voyage-layout.css */
|
|
</style>
|