From 452af4391687a9835b62d8e764ca03bf82f49102 Mon Sep 17 00:00:00 2001
From: Lars Kiesow <lkiesow@uos.de>
Date: Sun, 1 Jan 2023 19:41:46 +0100
Subject: [PATCH] Fix Hidden Settings Menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 10 ++++++----
 client/pages/config.vue                 | 14 +++++++-------
 client/store/globals.js                 |  4 +++-
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/client/components/app/ConfigSideNav.vue b/client/components/app/ConfigSideNav.vue
index 28c1aa9b..a075fa40 100644
--- a/client/components/app/ConfigSideNav.vue
+++ b/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
diff --git a/client/pages/config.vue b/client/pages/config.vue
index 2440f3d5..21a55aa4 100644
--- a/client/pages/config.vue
+++ b/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
diff --git a/client/store/globals.js b/client/store/globals.js
index 4671c48c..13c6bb05 100644
--- a/client/store/globals.js
+++ b/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