53 lines
1.0 KiB
Vue
53 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import Background from "./Background.vue";
|
|
import Buttons from "./Buttons.vue";
|
|
import ButtonSelector from "~/components/Common/ButtonSelector.vue";
|
|
import Bars from "./Bars.vue";
|
|
|
|
const store = useContactStore();
|
|
|
|
const { selectorPosition } = useButtonNavigation({
|
|
buttons: {
|
|
github: [26, 27, 202, 42],
|
|
email: [26, 59, 202, 42],
|
|
website: [26, 91, 202, 42],
|
|
cv: [26, 123, 202, 42],
|
|
},
|
|
navigation: {
|
|
github: {
|
|
down: "email",
|
|
},
|
|
email: {
|
|
up: "github",
|
|
down: "website",
|
|
},
|
|
website: {
|
|
up: "email",
|
|
down: "cv",
|
|
},
|
|
cv: {
|
|
up: "website",
|
|
},
|
|
},
|
|
initialButton: "github",
|
|
onButtonClick: (buttonName) => {
|
|
console.log("Clicked on selected button:", buttonName);
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Background />
|
|
|
|
<Buttons />
|
|
<ButtonSelector
|
|
:x="selectorPosition[0]"
|
|
:y="selectorPosition[1]"
|
|
:width="selectorPosition[2]"
|
|
:height="selectorPosition[3]"
|
|
:opacity="store.isIntro ? store.intro.stage3Opacity : 1"
|
|
/>
|
|
|
|
<Bars />
|
|
</template>
|