- Mobile menu components refactoring

- Components name renaming

resources/js/components/Others/MobileNavigation.vue

@@ -4,25 +4,18 @@
             <nav v-if="isVisible" class="mobile-navigation">
 
                 <!--User Info-->
-                <div class="user-info">
-                    <UserAvatar size="large"/>
-                    <UserHeadline/>
-                </div>
+                <UserHeadline class="user-info"/>
 
                 <!--Navigation-->
                 <MenuItemList :navigation="navigation" @menu="action"/>
             </nav>
         </transition>
-        <transition name="fade">
-            <div v-show="isVisible" class="vignette" @click="closeAndResetContextMenu"></div>
-        </transition>
     </div>
 </template>
 
 <script>
     import UserHeadline from '@/components/Sidebar/UserHeadline'
     import MenuItemList from '@/components/Mobile/MenuItemList'
-    import UserAvatar from '@/components/Others/UserAvatar'
     import {mapGetters} from 'vuex'
     import {events} from '@/bus'
 
@@ -31,7 +24,6 @@
         components: {
             MenuItemList,
             UserHeadline,
-            UserAvatar,
         },
         computed: {
             ...mapGetters(['user', 'homeDirectory']),
@@ -43,7 +35,7 @@
                         routeName: 'Files',
                         isVisible: true,
                     },
-                    {
+                    /*{
                         icon: 'latest',
                         title: this.$t('menu.latest'),
                         routeName: 'Files',
@@ -60,7 +52,7 @@
                         title: this.$t('menu.trash'),
                         routeName: 'Files',
                         isVisible: true,
-                    },
+                    },*/
                     {
                         icon: 'user',
                         title: this.$t('menu.settings'),
@@ -90,13 +82,13 @@
         methods: {
             action(name) {
 
-                if (name === 'latest') {
+                /*if (name === 'latest') {
                     this.$store.dispatch('getLatest')
                 }
 
                 if (name === 'trash') {
                     this.$store.dispatch('getTrash')
-                }
+                }*/
 
                 if (name === 'hard-drive') {
                     this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
@@ -106,18 +98,12 @@
                     this.$store.dispatch('logOut')
                 }
 
-                this.closeAndResetContextMenu()
+                events.$emit('mobile-navigation:hide')
             },
-            closeAndResetContextMenu() {
-                this.isVisible = false
-
-                events.$emit('hide:mobile-navigation')
-            }
         },
         created() {
-            events.$on('show:mobile-navigation', () => {
-                this.isVisible = true
-            })
+            events.$on('mobile-navigation:show', () => this.isVisible = true)
+            events.$on('mobile-navigation:hide', () => this.isVisible = false)
         }
     }
 </script>
@@ -137,33 +123,14 @@
         background: white;
         border-top-left-radius: 12px;
         border-top-right-radius: 12px;
-        min-height: 440px;
         max-height: 80%;
         overflow-y: auto;
     }
 
-    .vignette {
-        background: rgba(0, 0, 0, 0.35);
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 9;
-        cursor: pointer;
-        opacity: 1;
-    }
-
     .user-info {
-        display: flex;
-        align-items: center;
         margin-bottom: 10px;
     }
 
-    @media only screen and (max-width: 690px) {
-
-    }
-
     @media (prefers-color-scheme: dark) {
         .mobile-navigation {
             background: $dark_mode_background;