design notification box in post menu area

src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read.js

@@ -1,13 +1,18 @@
 import {createApp} from "vue";
 import NotificationReadToggle from "ChillMainAssets/vuejs/_components/Notification/NotificationReadToggle.vue";
+import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
+
+const i18n = _createI18n({});
 
 window.addEventListener('DOMContentLoaded', function (e) {
     document.querySelectorAll('.notification_toggle_read_status')
         .forEach(function (el) {
-            console.log('app', el);
-            const App = {
+            createApp({
                 template: '<notification-read-toggle ' +
                     ':notificationId="notificationId" ' +
+                    ':buttonClass="buttonClass" ' +
+                    ':buttonNoText="buttonNoText" ' +
+                    ':showUrl="showUrl" ' +
                     ':isRead="isRead"' +
                     '@markRead="onMarkRead" @markUnread="onMarkUnread"' +
                     '></notification-read-toggle>',
@@ -17,6 +22,9 @@ window.addEventListener('DOMContentLoaded', function (e) {
                 data() {
                     return {
                         notificationId: +el.dataset.notificationId,
+                        buttonClass: el.dataset.buttonClass,
+                        buttonNoText: 'true' === el.dataset.buttonNoText,
+                        showUrl: el.dataset.showUrl,
                         isRead: 1 === +el.dataset.notificationCurrentIsRead,
                     }
                 },
@@ -28,8 +36,8 @@ window.addEventListener('DOMContentLoaded', function (e) {
                         this.isRead = true;
                     },
                 }
-            }
-
-            createApp(App).mount(el);
+            })
+            .use(i18n)
+            .mount(el);
         });
 })