<script
    setup
    lang="ts"
>
    import { ref } from 'vue';

    // Will need to implement this eventually, just testing the look for now
    const notification_count = ref(7);
</script>

<template>
    <q-btn
        flat
        transparent
        dense
        :icon="notification_count > 0 ? 'notifications_active' : 'notifications_off'"
        size="lg"
        color="white"
    >
        <q-badge
            v-if="notification_count > 0"
            floating
            color="negative"
            class="text-weight-bolder q-mt-xs"
        >
            {{ notification_count }}
        </q-badge>
    </q-btn>
</template>