66 lines
2.4 KiB
Vue
66 lines
2.4 KiB
Vue
<template>
|
|
<div class="d-flex flex-row align-center">
|
|
<p class="text-h4 w-75 ma-2 pa-2 justify-start">Белезов Павел</p>
|
|
<div v-if="this.isWide" class="d-flex justify-end">
|
|
<v-btn v-for="item in linksData" :key="item" color="#21abf6" variant="text" class="ma-2 pa-2 justify-end" :href="item.link">{{ item.name }}</v-btn>
|
|
</div>
|
|
<div v-else class="d-flex justify-end w-25 pr-3">
|
|
<v-menu location="bottom" color="#424242">
|
|
<template class="justify-end" v-slot:activator="{ props }">
|
|
<v-btn color="#424242" icon="mdi-dots-vertical" v-bind="props"></v-btn>
|
|
</template>
|
|
<v-list>
|
|
<v-list-item v-for="item in linksData" :key="item" :href="item.link">
|
|
<v-list-item-title>
|
|
{{ item.name }}
|
|
</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Header",
|
|
data: () => ({
|
|
linksData: [
|
|
{name: "Github", link: "https://github.com/Dhaverd"},
|
|
{name: "HeadHunter", link: "https://irkutsk.hh.ru/resume/d8c67e1dff0843f1900039ed1f7839666b4559"},
|
|
{name: "Habr", link: "https://career.habr.com/dhaverd"},
|
|
{name: "Replit", link: "https://replit.com/@DHAVERD"},
|
|
{name: "Резюме docx", link: "/download/resume.docx"}
|
|
],
|
|
windowHeight: document.documentElement.clientHeight,
|
|
windowWidth: document.documentElement.clientWidth,
|
|
isWide: window.innerWidth > 1000,
|
|
tableClass: 'w-25'
|
|
}),
|
|
created() {
|
|
window.addEventListener("resize", this.myEventHandler);
|
|
},
|
|
mounted() {
|
|
this.myEventHandler();
|
|
window.addEventListener("resize", this.myEventHandler, { passive: true });
|
|
},
|
|
methods: {
|
|
myEventHandler(e) {
|
|
this.windowHeight = document.documentElement.clientHeight;
|
|
this.windowWidth = document.documentElement.clientWidth;
|
|
if (this.windowWidth < 1000){
|
|
this.isWide = false;
|
|
this.tableClass = 'w-66';
|
|
} else {
|
|
this.isWide = true;
|
|
this.tableClass = 'w-33';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|