Fix some navigation pane issues

CHANGELOG.md

@@ -9,12 +9,16 @@
   [#528](https://github.com/nextcloud/cookbook/pull/528/) @seyfeb
 - Timers are hidden when time is zero (prep, cook, total time)
   [#543](https://github.com/nextcloud/cookbook/pull/543/) @seyfeb
+- Introduced left navigation pane visibility as Vuex state
+  [#544](https://github.com/nextcloud/cookbook/pull/544/) @seyfeb
 
 ### Fixed
 - Added some documentation how to install GH action generated builds
   [#538](https://github.com/nextcloud/cookbook/pull/538) @christianlupus
 - Fixed problem where timers are not updated after saving recipe edits
   [#543](https://github.com/nextcloud/cookbook/pull/543/) @seyfeb
+- Fixed overlapping misaligned navigation toggles (as in #534)
+  [#544](https://github.com/nextcloud/cookbook/pull/544/) @seyfeb
 
 ### Removed
 - Removal of old contoller no longer in use

src/components/AppControls.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="wrapper">
         <!-- Use $store.state.page for page matching to make sure everything else has been set beforehand! -->
-        <ActionButton id="show-navigation" icon="icon-menu" class="action-button" :ariaLabel="t('cookbook', 'Open navigation')" @click="toggleNavigation()" />
         <Breadcrumbs class="breadcrumbs" rootIcon="icon-category-organization">
             <Breadcrumb :title="t('cookbook', 'Home')" :to="'/'" :disableDrop="true" />
             <!-- INDEX PAGE -->
@@ -223,9 +222,6 @@ export default {
         search: function(e) {
             this.$window.goTo('/search/'+e.target[1].value)
         },
-        toggleNavigation: function() {
-            document.getElementById("app-navigation").classList.toggle("show-navigation")
-        },
         updateFilters: function(e) {
             this.filterValue = e
             this.$root.$emit('applyRecipeFilter', e)
@@ -258,20 +254,9 @@ export default {
     content: '' !important;
 }
 
-#show-navigation {
-    width: 60px;
-    height: 44px;
-    padding: 0;
-    display: none;
-    float: left;
-}
-    #show-navigation .action-button {
-        padding-right: 0 !important;
-    }
-
 @media only screen and (max-width: 1024px) {
-    #show-navigation {
-        display: block;
+    .breadcrumbs {
+        margin-left: 40px;
     }
 }
 

src/components/AppMain.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="app">
-        <AppNavi id="app-navigation" />
+        <AppNavi id="app-navigation" :class="{'show-navigation': $store.state.appNavigationVisible}"/>
         <div id="app-content">
             <div id="app-content-wrapper">
                 <AppControls />

src/components/AppNavi.vue

@@ -350,8 +350,12 @@ export default {
         setLoadingRecipe: function(id) {
             this.$store.dispatch('setLoadingRecipe', { recipe: id })
         },
+
+        /**
+         * Toggle the left navigation pane
+         */
         toggleNavigation: function() {
-            document.getElementById("app-navigation").classList.toggle("show-navigation")
+            this.$store.dispatch('setAppNavigationVisible', { isVisible: !this.$store.state.appNavigationVisible })
         },
     },
     mounted () {

src/store/index.js

@@ -16,6 +16,9 @@ export default new Vuex.Store({
     //  state through a set mutation. You can process the data within
     //  the mutation if you want.
     state: {
+        // The left navigation pane (categories, settings, etc.) is visible.
+        // It can be hidden in small browser windows (e.g., on mobile phones)
+        appNavigationVisible: true,
         user: null,
         // Page is for keeping track of the page the user is on and
         //  setting the appropriate navigation entry active.
@@ -35,6 +38,9 @@ export default new Vuex.Store({
     },
 
     mutations: {
+        setAppNavigationVisible(s, { b }) {
+            s.appNavigationVisible = b
+        },
         setLoadingRecipe(s, { r }) {
             s.loadingRecipe = r
         },
@@ -59,6 +65,9 @@ export default new Vuex.Store({
     },
 
     actions: {
+        setAppNavigationVisible(c, { isVisible }) {
+            c.commit('setAppNavigationVisible', { b: isVisible })
+        },
         setLoadingRecipe(c, { recipe }) {
             c.commit('setLoadingRecipe', { r: parseInt(recipe) })
         },