<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>
