<template>
    <div class="header flex justify-end">
        <img src="../../resources/img/setting.png" alt="">
        <div class="notice" @click="buttonSearch"><img  src="../../resources/img/icon2.png" alt="">
            <p>1</p>
        </div>
        <img src="../../resources/img/img03.png" alt="">
        <div class="popup-wrap" v-show="searchOpen">
            <div class="popup-box ">
                <div class="flex mb10  justify-between">
                    <p class="popup-title" >알림</p>
                    <button type="button" class="popup-close-btn" @click="closeBtn">
                        <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>    
                    </button>
                </div>
                <article class="flex justify-between mt20">
                    <img style="width: fit-content;" src="../../resources/img/img200_13p.png" alt="">
                    <p class="title1 ml20" style="width: 60%;">1반친구들</p>
                    <button type="button" title="글쓰기" class="new-btn">
                  자세히 보기
               </button>
                </article>
            </div>
        </div>
    </div>

</template>

<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify, mdiWindowClose } from '@mdi/js';
export default {
    data() {
        return {
            mdiWindowClose: mdiWindowClose,
            showModal: false,
            searchOpen: false,
        }
    },
    methods: {
        closeModal() {
            this.showModal = false;
        },
        buttonSearch() {
            this.searchOpen = true;
        },
        closeBtn() {
            this.searchOpen = false;

        },
    },
    watch: {

    },
    computed: {

    },
    components: {
        SvgIcon
    },
    mounted() {
        console.log('Header mounted');
    }
}
</script>
<style scoped>
.popup-wrap {
    position: fixed;
    background-color: transparent;
    width: fit-content;
    height: fit-content;
    z-index: 10;
}
.popup-box{
    top: 8%;
    right: 58px;
    left: 62%;
}
</style>