Fix Hidden Settings Menu

This patch fixes several problems of the settings menu related to
display on mobile devices or small(ish) windows:

- The `isMobileLandscape` is now calculated correctly. Previously, this
  was set to `true` if a device was in portrait mode.

- Showing the button to collapse the settings menu and making the menu
  collapsible now use the same mechanism. Previously, it could happen
  that the menu was opened and not fixed, but no button to close it
  again was shown.

- The icons fore opening and closing the settings menu are now both
  arrows, indicating that their functionality is reversed.

- The button to open the menu now always has the string “Settings”,
  instead of using the name of the current page. The current page hader
  is listed below that anyway and this is the action component to open
  the settings menu after all.

This fixes #1334

client/components/app/ConfigSideNav.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-44 fixed left-0 top-16 h-full bg-bg bg-opacity-100 md:bg-opacity-70 shadow-lg border-r border-white border-opacity-5 py-3 transform transition-transform" :class="wrapperClass" v-click-outside="clickOutside">
-    <div class="md:hidden flex items-center justify-end pb-2 px-4 mb-1" @click="closeDrawer">
+    <div v-show="isMobilePortrait" class="flex items-center justify-end pb-2 px-4 mb-1" @click="closeDrawer">
       <span class="material-icons text-2xl">arrow_back</span>
     </div>
 
@@ -114,7 +114,7 @@ export default {
       var classes = []
       if (this.drawerOpen) classes.push('translate-x-0')
       else classes.push('-translate-x-44')
-      if (this.isMobile) classes.push('z-50')
+      if (this.isMobilePortrait) classes.push('z-50')
       else classes.push('z-40')
       return classes.join(' ')
     },
@@ -124,9 +124,11 @@ export default {
     isMobileLandscape() {
       return this.$store.state.globals.isMobileLandscape
     },
+    isMobilePortrait() {
+      return this.$store.state.globals.isMobilePortrait
+    },
     drawerOpen() {
-      if (this.isMobile) return this.isOpen
-      return true
+      return !this.isMobilePortrait || this.isOpen
     },
     routeName() {
       return this.$route.name

client/pages/config.vue

@@ -2,9 +2,9 @@
   <div id="page-wrapper" class="page p-2 md:p-6 overflow-y-auto relative" :class="streamLibraryItem ? 'streaming' : ''">
     <app-config-side-nav :is-open.sync="sideDrawerOpen" />
     <div class="configContent" :class="`page-${currentPage}`">
-      <div v-show="isMobile" class="w-full pb-4 px-2 flex border-b border-white border-opacity-10 mb-2">
-        <span class="material-icons text-2xl cursor-pointer" @click.stop.prevent="showMore">more_vert</span>
-        <p class="pl-3 capitalize">{{ currentPage }}</p>
+      <div v-show="isMobilePortrait" class="w-full pb-4 px-2 flex border-b border-white border-opacity-10 mb-2 cursor-pointer" @click.stop.prevent="toggleShowMore">
+        <span class="material-icons text-2xl cursor-pointer">arrow_forward</span>
+        <p class="pl-3 capitalize">{{ $strings.HeaderSettings }}</p>
       </div>
       <nuxt-child />
     </div>
@@ -35,8 +35,8 @@ export default {
     }
   },
   computed: {
-    isMobile() {
-      return this.$store.state.globals.isMobile
+    isMobilePortrait() {
+      return this.$store.state.globals.isMobilePortrait
     },
     streamLibraryItem() {
       return this.$store.state.streamLibraryItem
@@ -60,8 +60,8 @@ export default {
     }
   },
   methods: {
-    showMore() {
-      this.sideDrawerOpen = true
+    toggleShowMore() {
+      this.sideDrawerOpen = !this.sideDrawerOpen
     },
     setDeveloperMode() {
       var value = !this.$store.state.developerMode

client/store/globals.js

@@ -1,6 +1,7 @@
 export const state = () => ({
   isMobile: false,
   isMobileLandscape: false,
+  isMobilePortrait: false,
   showBatchCollectionModal: false,
   showCollectionsModal: false,
   showEditCollectionModal: false,
@@ -76,7 +77,8 @@ export const getters = {
 export const mutations = {
   updateWindowSize(state, { width, height }) {
     state.isMobile = width < 640 || height < 640
-    state.isMobileLandscape = state.isMobile && height > width
+    state.isMobileLandscape = state.isMobile && height < width
+    state.isMobilePortrait = state.isMobile && height >= width
   },
   setShowCollectionsModal(state, val) {
     state.showBatchCollectionModal = false