134 lines
3.1 KiB
Vue
134 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
|
import type { Theme } from '@/composables/useTheme'
|
|
import { scrollToSection } from '@/composables/scrollToSection'
|
|
import { portfolioData } from '@/data/portfolio'
|
|
import laurelMark from '@/assets/brand/mark.svg'
|
|
|
|
const props = defineProps<{ theme: Theme }>()
|
|
defineEmits<{ toggle: [] }>()
|
|
|
|
const night = computed(() => props.theme === 'hades')
|
|
const visible = ref(false)
|
|
|
|
function onScroll() {
|
|
visible.value = window.scrollY > window.innerHeight * 0.6
|
|
}
|
|
|
|
onMounted(() => window.addEventListener('scroll', onScroll, { passive: true }))
|
|
onBeforeUnmount(() => window.removeEventListener('scroll', onScroll))
|
|
|
|
const links: Array<[string, string]> = [
|
|
['About', 'about'],
|
|
['Work', 'work'],
|
|
['Contact', 'contact'],
|
|
]
|
|
|
|
const surname = portfolioData.name.split(' ').pop()?.toUpperCase()
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="port-nav" :class="{ 'port-nav--visible': visible }">
|
|
<div class="port-nav-brand">
|
|
<img :src="laurelMark" alt="" width="28" height="28" />
|
|
<span class="port-nav-name">{{ surname }}</span>
|
|
</div>
|
|
<div class="port-nav-right">
|
|
<span class="port-nav-links">
|
|
<a
|
|
v-for="[label, id] in links"
|
|
:key="id"
|
|
:href="`#${id}`"
|
|
class="port-nav-link"
|
|
@click.prevent="scrollToSection(id)"
|
|
>{{ label }}</a
|
|
>
|
|
</span>
|
|
<button class="port-nav-toggle" @click="$emit('toggle')">
|
|
<i :class="`pi pi-${night ? 'moon' : 'sun'}`" style="font-size: 12px" />
|
|
<span class="port-toggle-text">{{ night ? 'Hades' : 'Apollo' }}</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.port-nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
height: 64px;
|
|
background: color-mix(in srgb, var(--surface-1) 86%, transparent);
|
|
backdrop-filter: blur(14px);
|
|
-webkit-backdrop-filter: blur(14px);
|
|
border-bottom: 1px solid transparent;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition:
|
|
opacity 0.4s ease,
|
|
border-color 0.3s ease;
|
|
padding: 0 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.port-nav--visible {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
border-bottom-color: var(--border-lo);
|
|
}
|
|
|
|
.port-nav-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.port-nav-name {
|
|
font-family: var(--font-serif);
|
|
letter-spacing: 0.1em;
|
|
color: var(--text-high);
|
|
font-weight: 600;
|
|
font-size: 0.86rem;
|
|
}
|
|
|
|
.port-nav-right {
|
|
margin-left: auto;
|
|
display: flex;
|
|
gap: 22px;
|
|
align-items: center;
|
|
}
|
|
|
|
.port-nav-links {
|
|
display: flex;
|
|
gap: 22px;
|
|
align-items: center;
|
|
}
|
|
|
|
.port-nav-link {
|
|
font-family: var(--font-sans);
|
|
font-size: 0.86rem;
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.port-nav-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 13px;
|
|
background: var(--surface-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-full);
|
|
cursor: pointer;
|
|
color: var(--text-body);
|
|
font-family: var(--font-sans);
|
|
font-size: 0.78rem;
|
|
}
|
|
</style>
|