admin-erahn/resources/js/components/util/Notify.vue

<template>
<div class="container">
    <div id="notification" ref="notification" class="notification cursor-pointer" v-on:click="toggleDropdown()"></div>
        <div ref="popoverDropdownRef" v-bind:class="{'hidden': !dropdownShow, 'block': dropdownShow}" class="origin-top-right w-96 right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
            <div class="py-1 px-2" role="none">
                <div class="text-gray-700 block px-2 py-5 text-sm hover:bg-yellow-500 cursor-pointer">
                    <div class="justify-between flex">
                        <div class="w-4/6">
                            <p class="font-bold -mt-4">Ar-Rahn Kota Bharu 2</p>
                            <p class="font-bold text-sm text-red-500">[Auto Tawarruq] Pembiayaan Melebihi Margin 75%</p>
                            <p class="-mb-4 text-sm">4 hours ago</p>
                        </div>
                        <div class="w-2/6">
                            <p class="font-bold -mt-4">KB2000201-0232</p>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="text-gray-700 block px-2 py-5 text-sm hover:bg-yellow-500 cursor-pointer">
                    <div class="justify-between flex">
                        <div class="w-4/6">
                            <p class="font-bold -mt-4">Ar-Rahn Kota Bharu 2</p>
                            <p class="font-bold text-sm text-red-500">[Auto Tawarruq] Pembiayaan Melebihi Margin 75%</p>
                            <p class="-mb-4 text-sm">4 hours ago</p>
                        </div>
                        <div class="w-2/6">
                            <p class="font-bold -mt-4">KB2000201-0232</p>
                        </div>
                    </div>
                </div>
                <hr>
                <!-- <a class="text-gray-700 block px-4 py-2 text-sm hover:bg-yellow-500 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-0">a<br><b>a</b></a> -->
            </div>
        </div>
    <!-- <button @click="Clicked">Increment Notifications</button> -->
</div>
</template>
<style scoped>
/* Page Styles */

.container {
    /* position: absolute; */
    /* top: 50%; */
    /* left: 50%; */
    /* margin-right: 50%; */
    /* transform: translate(-50%, -50%); */
    /* text-align: center; */
}

button {
    display: block;
    padding: 1em 2em;
    outline: none;
    font-weight: 600;
    border: none;
    color: #fff;
    background-color: #3498db;
    border: 1px solid #1f74ac;
    border-radius: 0.3em;
    margin-top: 4em;
    cursor: pointer;
}

button:hover {
    background-color: #2487c9;
}
/* Notifications */
.notification {
    display: inline-block;
    position: relative;
    padding: 0.6em;
    background: #3498db;
    border-radius: 0.2em;
    font-size: 1.3em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.notification::before, 
.notification::after {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.notification::before {
    display: block;
    content: "\f0f3";
    font-family: "FontAwesome";
    transform-origin: top center;
}

.notification::after {
    font-family: Arial;
    font-size: 0.7em;
    font-weight: 700;
    position: absolute;
    top: -15px;
    right: -15px;
    padding: 5px 8px;
    line-height: 100%;
    border: 2px #fff solid;
    border-radius: 60px;
    background: #3498db;
    opacity: 0;
    content: attr(data-count);
    opacity: 0;
    transform: scale(0.5);
    transition: transform, opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

.notification.notify::before {
    animation: ring 1.5s ease;
}

.notification.show-count::after {
    transform: scale(1);
    opacity: 1;
}

@keyframes ring {
    0% {
        transform: rotate(35deg);
    }
    12.5% {
        transform: rotate(-30deg);
    }
    25% {
        transform: rotate(25deg);
    }
    37.5% {
        transform: rotate(-20deg);
    }
    50% {
        transform: rotate(15deg);
    }
    62.5% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
</style>
<script>
import { createPopper } from "@popperjs/core";

export default {
    data(){
        return {
        dropdownShow: false,
        }
    },

    mounted(){
    document.addEventListener('click', this.onClick);

        var el = this.$refs.notification;

        if (Number(localStorage.getItem("data-count")) > 0){
            var count = Number(localStorage.getItem("data-count")) || 0;
            // console.log(localStorage.getItem("books"))
            el.setAttribute('data-count', count);
            el.classList.add('show-count');
            console.log('test1');
        }else{
            el.classList.remove('show-count');
            console.log('test2');
        }
    },
    beforeDestroy() {
    document.removeEventListener('click', this.onClick);
    },
    methods:{
        async toggleDropdown() {
                this.dropdownShow = true;
                createPopper(this.$refs.notification, this.$refs.popoverDropdownRef, {
                    placement: "bottom-end",
                    modifiers: [{
                    name: "preventOverflow",
                    }]
                }); 
        },
        Clicked:function(data){
                var el = this.$refs.notification;
                var count = Number(localStorage.getItem("data-count")) || 0;
                console.log(count)
                    localStorage.setItem('data-count',count + 1);
                    el.setAttribute('data-count', count+1);
                    el.classList.remove('notify');
                    (function(){  
                    return el.offsetWidth;
                    })();
                    el.classList.add('notify');
                    // if(count > 0){
                        el.classList.add('show-count');
                    // }
        },
        DropdownShow:function(){
        },
        onClick: function(){
            var el = this.$refs.notification;
         
            let isClickInside = this.$refs.popoverDropdownRef.contains(event.target);
            let searchInside = this.$refs.notification.contains(event.target);
            let buttonSearch = document.getElementById('notification');

                if (isClickInside || searchInside || buttonSearch.contains(event.target)) {
                
                   localStorage.setItem('data-count',0);
                    el.setAttribute('data-count', 0);
                    el.classList.remove('show-count');
                    this.dropdownShow = true
                
                }
                else{
                   
                    this.dropdownShow = false
                    
                    
                }

        },
    }
}
</script>