Deregisters event listener from ItemsPage to avoid access to undefined refs.

src/admin/admin.vue

@@ -6,6 +6,7 @@
                 :active-route="activeRoute"
                 :is-menu-compressed="isMenuCompressed"/>
         <button 
+                class="is-hidden-mobile"
                 id="menu-compress-button"
                 @click="isMenuCompressed = !isMenuCompressed">
             <b-icon :icon="isMenuCompressed ? 'menu-right' : 'menu-left'" />

src/admin/components/navigation/tainacan-collection-subheader.vue

@@ -3,7 +3,7 @@
             id="tainacan-subheader" 
             class="secondary-page">
            
-        <div class="back-button">
+        <div class="back-button is-hidden-mobile">
             <button     
                     @click="$router.go(-1)"
                     class="button is-turquoise4">
@@ -14,6 +14,15 @@
         </div>
         <div class="level">      
             <div class="level-left">
+                <div class="back-button is-hidden-tablet level-item">
+                    <button     
+                            @click="$router.go(-1)"
+                            class="button is-turquoise4">
+                        <span class="icon">
+                            <i class="mdi mdi-chevron-left"/>
+                        </span>
+                    </button>
+                </div>
                 <div class="level-item">
                     <nav class="breadcrumbs">
                         <router-link 
@@ -371,30 +380,39 @@ export default {
         @media screen and (max-width: 769px) {
             width: 100% !important;
             max-width: 100% !important;
-            height: 143px;
+            height: 85px;
-            max-height: 143px;
+            max-height: 85px;
+            padding: 0;
+            top: 206px;
+            margin-bottom: 0px !important;
             
-            ul { 
+            .level-left {
-                margin-top: 12px;
+                margin-left: 0px !important;
+                display: flex;
+                padding: 0 1rem;
+                .level-item {
+                    display: inline-flex;
+                }
+            }
+
+            .level-right { 
+                margin-top: 0px;
                 flex-flow: wrap;
                 display: flex;
                 align-items: baseline;
                 justify-content: space-between;
 
+                .level-item {
+                    margin-bottom: 0;
                     a { 
                         padding: 0.5em 0.7em !important; 
                         text-align: center;
                     }
                     .menu-text {
-                    padding-left: 0.3em !important;
+                        display: none;
                     }
                 }
-      
-            .level-left {
-                margin-left: 0px !important;
             }
-            top: 206px;
-            margin-bottom: 0px !important;
         }
 
     }

src/admin/components/navigation/tainacan-header.vue

@@ -15,7 +15,16 @@
             </div>
         </div>
         <div class="level-right">
-            <div class="search-area">
+            <div class="is-hidden-tablet">
+                <button
+                    @click="$router.push($routerHelper.getItemsPath())"
+                    class="button is-small is-white level-item">
+                    <span class="icon is-right">
+                        <i class="mdi mdi-24px mdi-magnify"/>
+                    </span>
+                </button>
+            </div>
+            <div class="search-area is-hidden-mobile">
                 <div class="control has-icons-right is-small is-clearfix">
                     <input
                             autocomplete="on"

src/admin/pages/lists/items-page.vue

@@ -1022,6 +1022,12 @@
                     .catch(() => {
                         this.isLoadingMetadata = false;
                     });
+            },
+            adjustSearchControlHeight() {
+                this.$nextTick(() => {
+                    this.searchControlHeight = this.$refs['search-control'] ? this.$refs['search-control'].clientHeight : 0;
+                    this.isFiltersMenuCompressed = jQuery(window).width() <= 768;
+                });
             }
         },
         created() {
@@ -1087,14 +1093,11 @@
             }
 
             // Watches window resize to adjust filter's top position and compression on mobile 
-            this.$nextTick(() => {
+            window.addEventListener('resize', this.adjustSearchControlHeight());
-                this.searchControlHeight = this.$refs['search-control'].clientHeight;
+        },
-                this.isFiltersMenuCompressed = jQuery(window).width() <= 768;
+        beforeDestroy() {
-                window.addEventListener('resize', () => {
+            this.$off();
-                    this.isFiltersMenuCompressed = jQuery(window).width() <= 768;
+            window.removeEventListener('resize', this.adjustSearchControlHeight());
-                    this.searchControlHeight = this.$refs['search-control'].clientHeight;
-                });
-            })
         }
     }
 </script>

src/admin/scss/tainacan-admin.scss

@@ -71,7 +71,7 @@ a:hover {
     height: $page-height !important;
 
     @media screen and (max-width: 769px) {
-        margin-top: 0; 
+        margin-top: 42px;
     }
 
     .is-primary:not(.upload-draggable), .is-primary:hover, .is-primary:focus {