Offline badge component

src/components/core/OfflineBadge.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="offline-badge absolute bg-black c-white">
+      You are offline
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'offline-badge',
+  data () {
+    return {
+      isOnline: navigator.onLine
+    }
+  },
+  created () {
+    window.addEventListener('online', (e) => {
+      this.isOnline = true
+    })
+
+    window.addEventListener('offline', (e) => {
+      this.isOnline = false
+    })
+  }
+}
+</script>
+
+<style scoped>
+.offline-badge {
+    width: 100%;
+    bottom: 0;
+    left: 0;
+}
+</style>

src/themes/default/App.vue

@@ -36,6 +36,7 @@ import Notification from './components/core/Notification.vue'
 import SignUp from './components/core/blocks/Auth/SignUp.vue'
 import NewsletterPopup from './components/core/NewsletterPopup.vue'
 import CookieNotification from './components/core/CookieNotification.vue'
+// import OfflineBadge from './components/core/OfflineBadge.vue'
 
 export default {
   computed: {
@@ -60,6 +61,7 @@ export default {
     SignUp,
     NewsletterPopup,
     CookieNotification
+    // OfflineBadge
   }
 }
 </script>

src/themes/default/components/core/OfflineBadge.vue

@@ -0,0 +1,7 @@
+<script>
+import { coreComponent } from 'lib/themes'
+
+export default {
+  mixins: [coreComponent('core/OfflineBadge')]
+}
+</script>