feat(contact): bottom screen navigation
This commit is contained in:
44
app/components/Contact/BottomScreen/BottomScreen.vue
Normal file
44
app/components/Contact/BottomScreen/BottomScreen.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<script setup lang="ts">
|
||||
import Background from "./Background.vue";
|
||||
import ButtonSelector from "~/components/Common/ButtonSelector.vue";
|
||||
|
||||
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 />
|
||||
|
||||
<ButtonSelector
|
||||
:x="selectorPosition[0]"
|
||||
:y="selectorPosition[1]"
|
||||
:width="selectorPosition[2]"
|
||||
:height="selectorPosition[3]"
|
||||
/>
|
||||
</template>
|
||||
Reference in New Issue
Block a user