more work with notifications drawer

src/App.js

@@ -39,6 +39,10 @@ export default {
   created () {
     // Load the locale from the storage
     this.$i18n.locale = this.$store.state.config.interfaceLanguage
+    window.addEventListener('resize', this.updateMobileState)
+  },
+  destroyed () {
+    window.removeEventListener('resize', this.updateMobileState)
   },
   computed: {
     currentUser () { return this.$store.state.users.currentUser },
@@ -87,7 +91,8 @@ export default {
     unseenNotificationsCount () {
       return this.unseenNotifications.length
     },
-    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }
+    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
+    isMobileLayout () { return this.$store.state.interface.mobileLayout }
   },
   methods: {
     scrollToTop () {
@@ -105,6 +110,13 @@ export default {
     },
     toggleMobileNotifications () {
       this.notificationsOpen = !this.notificationsOpen
+    },
+    updateMobileState () {
+      const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+      const changed = width <= 800 !== this.isMobileLayout
+      if (changed) {
+        this.$store.dispatch('setMobileLayout', width <= 800)
+      }
     }
   }
 }

src/App.scss

@@ -667,7 +667,7 @@ nav {
   height: 100vh;
   top: 50px;
   left: 0;
-  z-index: 1001;
+  z-index: 9;
   overflow-x: hidden;
   overflow-y: scroll;
   transition-property: transform;

src/App.vue

@@ -25,11 +25,13 @@
       </div>
     </nav>
     <div v-if="" class="container" id="content">
-      <side-drawer ref="sideDrawer" :logout="logout"></side-drawer>
+      <div v-if="isMobileLayout">
-      <div class="mobile-notifications" :class="{ 'closed': !notificationsOpen }">
+        <side-drawer ref="sideDrawer" :logout="logout"></side-drawer>
-        <notifications/>
+        <div class="mobile-notifications" :class="{ 'closed': !notificationsOpen }">
+          <notifications/>
+        </div>
       </div>
-      <div class="sidebar-flexer mobile-hidden">
+      <div class="sidebar-flexer mobile-hidden" v-if="!isMobileLayout">
         <div class="sidebar-bounds">
           <div class="sidebar-scroller">
             <div class="sidebar">

src/boot/after_store.js

@@ -5,6 +5,9 @@ import routes from './routes'
 import App from '../App.vue'
 
 const afterStoreSetup = ({ store, i18n }) => {
+  const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+  store.dispatch('setMobileLayout', width <= 800)
+
   window.fetch('/api/statusnet/config.json')
     .then((res) => res.json())
     .then((data) => {

src/modules/interface.js

@@ -11,7 +11,8 @@ const defaultState = {
       window.CSS.supports('filter', 'drop-shadow(0 0)') ||
       window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
     )
-  }
+  },
+  mobileLayout: false
 }
 
 const interfaceMod = {
@@ -31,6 +32,9 @@ const interfaceMod = {
     },
     setNotificationPermission (state, permission) {
       state.notificationPermission = permission
+    },
+    setMobileLayout (state, value) {
+      state.mobileLayout = value
     }
   },
   actions: {
@@ -42,6 +46,10 @@ const interfaceMod = {
     },
     setNotificationPermission ({ commit }, permission) {
       commit('setNotificationPermission', permission)
+    },
+    setMobileLayout ({ commit }, value) {
+      console.log('setMobileLayout called')
+      commit('setMobileLayout', value)
     }
   }
 }