fix: resolve three critical UI issues
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>
This commit is contained in:
2025-09-21 17:15:29 +02:00
parent 2bc0eb6735
commit d844579504
6 changed files with 204 additions and 17 deletions

View File

@@ -238,9 +238,6 @@ html {
/* iOS-specific navigation stabilization to prevent bobbing */ /* iOS-specific navigation stabilization to prevent bobbing */
@supports (-webkit-touch-callout: none) { @supports (-webkit-touch-callout: none) {
.voyage-nav { .voyage-nav {
will-change: transform;
transform: translateZ(0);
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden; /* iOS optimization */ -webkit-backface-visibility: hidden; /* iOS optimization */
} }
} }

View File

@@ -57,19 +57,9 @@ const logoAlt = computed(() =>
isScrolled.value ? 'Harbor Smith Navy Logo' : 'Harbor Smith White Logo' isScrolled.value ? 'Harbor Smith Navy Logo' : 'Harbor Smith White Logo'
) )
const SCROLL_ENTER = 80
const SCROLL_EXIT = 40
const handleScroll = () => { const handleScroll = () => {
const currentOffset = window.scrollY || window.pageYOffset const currentOffset = window.scrollY || window.pageYOffset
isScrolled.value = currentOffset > 50
if (isScrolled.value) {
if (currentOffset < SCROLL_EXIT) {
isScrolled.value = false
}
} else if (currentOffset > SCROLL_ENTER) {
isScrolled.value = true
}
} }
const handleSmoothScroll = (event: Event, href: string) => { const handleSmoothScroll = (event: Event, href: string) => {

View File

@@ -179,7 +179,7 @@ onMounted(() => {
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
z-index: -1; z-index: 1;
pointer-events: none; pointer-events: none;
background: #ffffff; /* White fallback */ background: #ffffff; /* White fallback */
} }

View File

@@ -22,7 +22,8 @@ export default defineNuxtConfig({
'@nuxtjs/google-fonts', '@nuxtjs/google-fonts',
// '@nuxtjs/seo', // Temporarily disabled - incompatible with Nuxt 3.19.2 // '@nuxtjs/seo', // Temporarily disabled - incompatible with Nuxt 3.19.2
'@vueuse/nuxt', '@vueuse/nuxt',
'@vueuse/motion/nuxt' '@vueuse/motion/nuxt',
'nuxt-icon'
], ],
// Google Fonts // Google Fonts

View File

@@ -14,6 +14,7 @@
"@vueuse/nuxt": "^11.3.0", "@vueuse/nuxt": "^11.3.0",
"lucide-vue-next": "^0.544.0", "lucide-vue-next": "^0.544.0",
"nuxt": "^3.15.0", "nuxt": "^3.15.0",
"nuxt-icon": "^1.0.0-beta.7",
"unenv": "^2.0.0-rc.21", "unenv": "^2.0.0-rc.21",
"vue": "latest", "vue": "latest",
"vue-router": "latest" "vue-router": "latest"
@@ -40,11 +41,23 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/@antfu/install-pkg": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
"integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
"license": "MIT",
"dependencies": {
"package-manager-detector": "^1.3.0",
"tinyexec": "^1.0.1"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@antfu/utils": { "node_modules/@antfu/utils": {
"version": "8.1.1", "version": "8.1.1",
"resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-8.1.1.tgz", "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-8.1.1.tgz",
"integrity": "sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==", "integrity": "sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==",
"dev": true,
"license": "MIT", "license": "MIT",
"funding": { "funding": {
"url": "https://github.com/sponsors/antfu" "url": "https://github.com/sponsors/antfu"
@@ -948,12 +961,52 @@
"@iconify/types": "*" "@iconify/types": "*"
} }
}, },
"node_modules/@iconify/collections": {
"version": "1.0.596",
"resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.596.tgz",
"integrity": "sha512-+fc3aqkxIZlKa6n2Ez28OFOM2pDzh+Jf4YI8grhz/9JKhkkxFoLJAWrLFgepd6dp9sOme57gCy/p+mApZeKYAA==",
"license": "MIT",
"dependencies": {
"@iconify/types": "*"
}
},
"node_modules/@iconify/types": { "node_modules/@iconify/types": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz", "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==", "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/@iconify/utils": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-2.3.0.tgz",
"integrity": "sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==",
"license": "MIT",
"dependencies": {
"@antfu/install-pkg": "^1.0.0",
"@antfu/utils": "^8.1.0",
"@iconify/types": "^2.0.0",
"debug": "^4.4.0",
"globals": "^15.14.0",
"kolorist": "^1.8.0",
"local-pkg": "^1.0.0",
"mlly": "^1.7.4"
}
},
"node_modules/@iconify/vue": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.3.0.tgz",
"integrity": "sha512-Xq0h6zMrHBbrW8jXJ9fISi+x8oDQllg5hTDkDuxnWiskJ63rpJu9CvJshj8VniHVTbsxCg9fVoPAaNp3RQI5OQ==",
"license": "MIT",
"dependencies": {
"@iconify/types": "^2.0.0"
},
"funding": {
"url": "https://github.com/sponsors/cyberalien"
},
"peerDependencies": {
"vue": ">=3"
}
},
"node_modules/@ioredis/commands": { "node_modules/@ioredis/commands": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.4.0.tgz", "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.4.0.tgz",
@@ -7045,6 +7098,18 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/globals": {
"version": "15.15.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
"integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
"license": "MIT",
"engines": {
"node": ">=18"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/globby": { "node_modules/globby": {
"version": "14.1.0", "version": "14.1.0",
"resolved": "https://registry.npmjs.org/globby/-/globby-14.1.0.tgz", "resolved": "https://registry.npmjs.org/globby/-/globby-14.1.0.tgz",
@@ -8082,6 +8147,12 @@
"node": ">= 0.6" "node": ">= 0.6"
} }
}, },
"node_modules/kolorist": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
"integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
"license": "MIT"
},
"node_modules/launch-editor": { "node_modules/launch-editor": {
"version": "2.11.1", "version": "2.11.1",
"resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.11.1.tgz", "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.11.1.tgz",
@@ -9025,6 +9096,133 @@
} }
} }
}, },
"node_modules/nuxt-icon": {
"version": "1.0.0-beta.7",
"resolved": "https://registry.npmjs.org/nuxt-icon/-/nuxt-icon-1.0.0-beta.7.tgz",
"integrity": "sha512-HdEn1sZGmkIX44L5rZ8YUMdIdVCpeBXycO2DdrqZmFilixcHax0XYdehc1VD6Kl9Sxg8B7sKPMelmDXVTbDwIw==",
"license": "MIT",
"dependencies": {
"@iconify/collections": "^1.0.425",
"@iconify/types": "^2.0.0",
"@iconify/utils": "^2.1.23",
"@iconify/vue": "^4.1.2",
"@nuxt/devtools-kit": "^1.3.1",
"@nuxt/kit": "^3.11.2",
"consola": "^3.2.3",
"fast-glob": "^3.3.2",
"local-pkg": "^0.5.0",
"pathe": "^1.1.2"
}
},
"node_modules/nuxt-icon/node_modules/@nuxt/devtools-kit": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/@nuxt/devtools-kit/-/devtools-kit-1.7.0.tgz",
"integrity": "sha512-+NgZ2uP5BuneqvQbe7EdOEaFEDy8762c99pLABtn7/Ur0ExEsQJMP7pYjjoTfKubhBqecr5Vo9yHkPBj1eHulQ==",
"license": "MIT",
"dependencies": {
"@nuxt/kit": "^3.15.0",
"@nuxt/schema": "^3.15.0",
"execa": "^7.2.0"
},
"peerDependencies": {
"vite": "*"
}
},
"node_modules/nuxt-icon/node_modules/confbox": {
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
"integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
"license": "MIT"
},
"node_modules/nuxt-icon/node_modules/execa": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
"integrity": "sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==",
"license": "MIT",
"dependencies": {
"cross-spawn": "^7.0.3",
"get-stream": "^6.0.1",
"human-signals": "^4.3.0",
"is-stream": "^3.0.0",
"merge-stream": "^2.0.0",
"npm-run-path": "^5.1.0",
"onetime": "^6.0.0",
"signal-exit": "^3.0.7",
"strip-final-newline": "^3.0.0"
},
"engines": {
"node": "^14.18.0 || ^16.14.0 || >=18.0.0"
},
"funding": {
"url": "https://github.com/sindresorhus/execa?sponsor=1"
}
},
"node_modules/nuxt-icon/node_modules/get-stream": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
"license": "MIT",
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/nuxt-icon/node_modules/human-signals": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
"integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
"license": "Apache-2.0",
"engines": {
"node": ">=14.18.0"
}
},
"node_modules/nuxt-icon/node_modules/local-pkg": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.1.tgz",
"integrity": "sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==",
"license": "MIT",
"dependencies": {
"mlly": "^1.7.3",
"pkg-types": "^1.2.1"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/nuxt-icon/node_modules/pathe": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
"integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
"license": "MIT"
},
"node_modules/nuxt-icon/node_modules/pkg-types": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
"integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
"license": "MIT",
"dependencies": {
"confbox": "^0.1.8",
"mlly": "^1.7.4",
"pathe": "^2.0.1"
}
},
"node_modules/nuxt-icon/node_modules/pkg-types/node_modules/pathe": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
"integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
"license": "MIT"
},
"node_modules/nuxt-icon/node_modules/signal-exit": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
"license": "ISC"
},
"node_modules/nuxt-link-checker": { "node_modules/nuxt-link-checker": {
"version": "4.3.2", "version": "4.3.2",
"resolved": "https://registry.npmjs.org/nuxt-link-checker/-/nuxt-link-checker-4.3.2.tgz", "resolved": "https://registry.npmjs.org/nuxt-link-checker/-/nuxt-link-checker-4.3.2.tgz",

View File

@@ -18,6 +18,7 @@
"@vueuse/nuxt": "^11.3.0", "@vueuse/nuxt": "^11.3.0",
"lucide-vue-next": "^0.544.0", "lucide-vue-next": "^0.544.0",
"nuxt": "^3.15.0", "nuxt": "^3.15.0",
"nuxt-icon": "^1.0.0-beta.7",
"unenv": "^2.0.0-rc.21", "unenv": "^2.0.0-rc.21",
"vue": "latest", "vue": "latest",
"vue-router": "latest" "vue-router": "latest"