feat: pinned/fixed the top menu on Android

Author: ErikBjare

src/components/Header.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-div.aw-navbar
-  b-navbar(toggleable="lg")
+div(:class="{'fixed-top-padding': fixedTopMenu}")
+  b-navbar.aw-navbar(toggleable="lg" :fixed="fixedTopMenu ? 'top' : null")
     // Brand on mobile
     b-navbar-nav.d-block.d-lg-none
       b-navbar-brand(to="/" style="background-color: transparent;")
@@ -70,6 +70,12 @@ div.aw-navbar
             | Settings
 </template>
 
+<style lang="scss" scoped>
+.fixed-top-padding {
+  padding-bottom: 3.5em;
+}
+</style>
+
 <script>
 // only import the icons you use to reduce bundle size
 import 'vue-awesome/icons/calendar-day';
@@ -92,6 +98,8 @@ export default {
   data() {
     return {
       activityViews: [],
+      // Make configurable?
+      fixedTopMenu: this.$isAndroid,
     };
   },
   mounted: async function () {

src/main.js

@@ -65,8 +65,12 @@ Vue.component('aw-calendar', () => import('./visualizations/Calendar.vue'));
 Vue.mixin(require('~/mixins/asyncErrorCaptured.js'));
 
 // Set the PRODUCTION constant
+// FIXME: Thould follow Vue convention and start with a $.
 Vue.prototype.PRODUCTION = PRODUCTION;
 
+// Set the $isAndroid constant
+Vue.prototype.$isAndroid = process.env.VUE_APP_ON_ANDROID;
+
 // Setup Vue app
 import App from './App';
 new Vue({

src/views/Home.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
 div
-  b-alert(v-if="isAndroid" show)
+  b-alert(v-if="$isAndroid" show)
     | #[b Note:] ActivityWatch on Android is in a very early stage of development. There will be bugs, but we hope you bear with us as we refine things and get it on par with the desktop version of ActivityWatch (which you should try!).
 
   h3 Hello early user,
   p
-    | It's still early days for ActivityWatch #[span(v-if="isAndroid") (especially on Android!)]. We've come a long way but we need users (like you!)
+    | It's still early days for ActivityWatch #[span(v-if="$isAndroid") (especially on Android!)]. We've come a long way but we need users (like you!)
     | to provide feedback and help us turn ActivityWatch into a successful project.
     | Early users like you mean a lot to us, and we hope you'll reach out to us with any ideas you have for improvements!
   p
@@ -72,10 +72,5 @@ div
 <script>
 export default {
   name: 'Home',
-  data() {
-    return {
-      isAndroid: process.env.VUE_APP_ON_ANDROID,
-    };
-  },
 };
 </script>

src/views/settings/Settings.vue

@@ -18,7 +18,7 @@ div
 
   hr
 
-  div(v-if="!isAndroid")
+  div(v-if="!$isAndroid")
     ReleaseNotificationSettings
     hr
 
@@ -42,10 +42,5 @@ export default {
     CategorizationSettings,
     LandingPageSettings,
   },
-  data() {
-    return {
-      isAndroid: process.env.VUE_APP_ON_ANDROID,
-    };
-  },
 };
 </script>