Mobile notifications in nav bar, separate mobile navbar to its own component

The notifs button in the navbar opens a drawer from the right, closing the drawer marks notifications as read. With this change going between notifications/timeline/post-status is done with just one tap again without losing state in any of these. you don't even lose scroll position when you just want to check notifications, at the cost of some minor awkwardness when you try to over-scroll the notifications.

Some remaining awkwardness to be fixed:

• gesture support for the drawer [DONE, for closing only, adding opening for both left side drawer and right notifications drawer by swipe shouldn't be too hard now but not going to do it here]
• loading more notifications on scroll to make it harder to overscroll [wontfix here]

One slightly questionable but also really useful change: keeping track of mobile layout in JS as well so you can actually do logic based on the layout. this was done here to avoid having 2 notifications components at the same time

src/boot/after_store.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import routes from './routes'
-
 import App from '../App.vue'
+import { windowWidth } from '../services/window_utils/window_utils'
 
 const getStatusnetConfig = async ({ store }) => {
   try {
@@ -230,7 +230,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
     })
   }
 
-  const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+  const width = windowWidth()
   store.dispatch('setMobileLayout', width <= 800)
 
   const apiConfig = await getStatusnetConfig({ store })