From 12663cbf096b9f57a25bac26e6e5eac594de7adf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 31 Jan 2023 13:45:01 +0100
Subject: [PATCH] Make 'isMobile' aka 'showMobileMenu' a mixin

---
 webapp/layouts/default.vue | 28 ++++++----------------------
 webapp/mixins/mobile.js    | 22 ++++++++++++++++++++++
 2 files changed, 28 insertions(+), 22 deletions(-)
 create mode 100644 webapp/mixins/mobile.js

diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 06c3315cd..ed0e57b0d 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="layout-default">
     <div class="main-navigation">
-      <header-menu :showMobileMenu="showMobileMenu" />
+      <header-menu :showMobileMenu="isMobile" />
     </div>
     <ds-container>
       <div class="main-container">
         <nuxt />
       </div>
     </ds-container>
-    <page-footer v-if="!showMobileMenu" />
+    <page-footer v-if="!isMobile" />
     <div id="overlay" />
     <client-only>
       <modal />
@@ -17,8 +17,9 @@
 </template>
 
 <script>
-import HeaderMenu from '~/components/HeaderMenu/HeaderMenu'
 import seo from '~/mixins/seo'
+import mobile from '~/mixins/mobile'
+import HeaderMenu from '~/components/HeaderMenu/HeaderMenu'
 import Modal from '~/components/Modal'
 import PageFooter from '~/components/PageFooter/PageFooter'
 
@@ -28,27 +29,10 @@ export default {
     Modal,
     PageFooter,
   },
-  mixins: [seo],
-  data() {
-    return {
-      windowWidth: null,
-      maxMobileWidth: 810,
-    }
-  },
-  computed: {
-    showMobileMenu() {
-      if (!this.windowWidth) return false
-      return this.windowWidth <= this.maxMobileWidth
-    },
-  },
-  mounted() {
-    this.windowWidth = window.innerWidth
-    window.addEventListener('resize', () => {
-      this.windowWidth = window.innerWidth
-    })
-  },
+  mixins: [seo, mobile],
 }
 </script>
+
 <style lang="scss">
 .main-navigation {
   background-color: $color-header-background;
diff --git a/webapp/mixins/mobile.js b/webapp/mixins/mobile.js
new file mode 100644
index 000000000..c91dadf9b
--- /dev/null
+++ b/webapp/mixins/mobile.js
@@ -0,0 +1,22 @@
+export default (mobileWidth = null) => {
+  return {
+    data() {
+      return {
+        windowWidth: null,
+        maxMobileWidth: mobileWidth || 810, // greater counts as desktop
+      }
+    },
+    computed: {
+      isMobile() {
+        if (!this.windowWidth) return false
+        return this.windowWidth <= this.maxMobileWidth
+      },
+    },
+    mounted() {
+      this.windowWidth = window.innerWidth
+      window.addEventListener('resize', () => {
+        this.windowWidth = window.innerWidth
+      })
+    },
+  }
+}