From a7ba0719a5b9a3c0a1c5c60366877e71255eacd4 Mon Sep 17 00:00:00 2001
From: Peter Papp <peterpapp@makingcg.com>
Date: Wed, 14 Apr 2021 17:13:36 +0200
Subject: [PATCH] - Mobile navigation refactored

---
 public/mix-manifest.json                      |  50 +++++-
 .../js/components/FilesView/FilePreview.vue   |   2 -
 .../js/components/FilesView/MobileToolbar.vue |   3 +-
 resources/js/components/FilesView/Option.vue  |   9 +
 .../js/components/Mobile/MobileHeader.vue     |   4 +-
 .../js/components/Others/MobileNavigation.vue | 157 ++++--------------
 resources/js/components/Others/Vignette.vue   |   3 -
 resources/js/views/Platform.vue               |   2 -
 resources/js/views/Shared.vue                 |   2 -
 9 files changed, 89 insertions(+), 143 deletions(-)

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 2b666321..b622623a 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -7,8 +7,8 @@
     "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~5f8db287.js": "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~5f8db287.js?id=07a5f340da451bf2ae5d",
     "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~eeab5771.js": "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~eeab5771.js?id=319ba6f55c8fb5dca6ac",
     "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared/file-browser.js?id=6f6e038b64009a752638",
-    "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=8ce1dccd140966097677",
-    "/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=f34c3f924e632de0bc6e",
+    "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=21e92b2f7b011b943c69",
+    "/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=2647be535081392cbdc3",
     "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=f779d10bf0f57bf3b08c",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js?id=075ff381293e1a20d167",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js?id=5f27527c258dada4aeb9",
@@ -34,10 +34,10 @@
     "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=de64a0ce7c737b106d96",
     "/chunks/files.js": "/chunks/files.js?id=1731c1b3a8bfbbeaa301",
     "/chunks/files~chunks/platform~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared-files~chunks/shared/file-browser.js?id=a930cc4a4f5af02460bb",
-    "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js?id=f15ebd5d3d14a9cb7549",
+    "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js?id=c24a48c0af1929dfb4b6",
     "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~chunks/sha~8510f6c9.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~chunks/sha~8510f6c9.js?id=ac54ac828e9a8667410f",
     "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared/file-browser~chunks/user~9058a49f.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared/file-browser~chunks/user~9058a49f.js?id=a0dd218c154e83af8dee",
-    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.js?id=ed3a03e7c61f1223bf3e",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.js?id=c691649626200a8d505d",
     "/chunks/files~chunks/shared-files~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser~chunks/shared/single-file.js?id=7f84c4b09fcf5b890775",
     "/chunks/files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared/file-browser.js?id=ff8043fe2c43e13a74e2",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=daaffc43387587cf4b57",
@@ -53,8 +53,8 @@
     "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=7a6acca368d11e2a4815",
     "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=260d274a422706d71809",
     "/chunks/plans.js": "/chunks/plans.js?id=6d14bd88ebd6cf82fdc6",
-    "/chunks/platform.js": "/chunks/platform.js?id=1e70df954579133c32ad",
-    "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=ffbda8c58183915cb55a",
+    "/chunks/platform.js": "/chunks/platform.js?id=653e253110ab4698e4d0",
+    "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=d43c6021fdd724a3687d",
     "/chunks/profile.js": "/chunks/profile.js?id=bdc92d734851c0d09b8c",
     "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=a5e7ed872d1430177922",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=b35e751cdc1946a4fb60",
@@ -66,7 +66,7 @@
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=aa34712346ed9a2fc12d",
     "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=1bffa4ae7d545af08355",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=c6b88005b133268ed88f",
-    "/chunks/shared.js": "/chunks/shared.js?id=68165b2df75fd836ec22",
+    "/chunks/shared.js": "/chunks/shared.js?id=9646958a66d976078352",
     "/chunks/shared-files.js": "/chunks/shared-files.js?id=fdcae9524683fdf7a1a1",
     "/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=aab96d6900885ccb90ed",
     "/chunks/shared/file-browser.js": "/chunks/shared/file-browser.js?id=b2fbe95c0ed7074377ce",
@@ -240,5 +240,39 @@
     "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.8471c87471b1dc8d1d0a.hot-update.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.8471c87471b1dc8d1d0a.hot-update.js",
     "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.01363a471b3d05f133f4.hot-update.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.01363a471b3d05f133f4.hot-update.js",
     "/chunks/platform.a36c1ff1761f27794e38.hot-update.js": "/chunks/platform.a36c1ff1761f27794e38.hot-update.js",
-    "/chunks/platform.e6bc793bad4299c41fa4.hot-update.js": "/chunks/platform.e6bc793bad4299c41fa4.hot-update.js"
+    "/chunks/platform.e6bc793bad4299c41fa4.hot-update.js": "/chunks/platform.e6bc793bad4299c41fa4.hot-update.js",
+    "/chunks/admin~chunks/platform.3273dc6ee711a5f9b03d.hot-update.js": "/chunks/admin~chunks/platform.3273dc6ee711a5f9b03d.hot-update.js",
+    "/chunks/admin~chunks/platform.d37c704740d4f435b1cd.hot-update.js": "/chunks/admin~chunks/platform.d37c704740d4f435b1cd.hot-update.js",
+    "/chunks/admin~chunks/platform.b8ce95ad8c622f907480.hot-update.js": "/chunks/admin~chunks/platform.b8ce95ad8c622f907480.hot-update.js",
+    "/chunks/platform~chunks/shared.b8ce95ad8c622f907480.hot-update.js": "/chunks/platform~chunks/shared.b8ce95ad8c622f907480.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.118b73ef9dbda7807015.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.118b73ef9dbda7807015.hot-update.js",
+    "/chunks/admin~chunks/platform.3acf8ee73cd8177b2686.hot-update.js": "/chunks/admin~chunks/platform.3acf8ee73cd8177b2686.hot-update.js",
+    "/chunks/admin~chunks/platform.c4516b2b2826dfd486ed.hot-update.js": "/chunks/admin~chunks/platform.c4516b2b2826dfd486ed.hot-update.js",
+    "/chunks/admin~chunks/platform.a5eb84601c7ec9c598f7.hot-update.js": "/chunks/admin~chunks/platform.a5eb84601c7ec9c598f7.hot-update.js",
+    "/js/main.6d36f6cecb42b6a6a97a.hot-update.js": "/js/main.6d36f6cecb42b6a6a97a.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js?id=4145c54ff64f420b266f",
+    "/chunks/admin~chunks/platform.6d36f6cecb42b6a6a97a.hot-update.js": "/chunks/admin~chunks/platform.6d36f6cecb42b6a6a97a.hot-update.js",
+    "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.6d36f6cecb42b6a6a97a.hot-update.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.6d36f6cecb42b6a6a97a.hot-update.js",
+    "/chunks/admin~chunks/platform.0a163987dacd5443283a.hot-update.js": "/chunks/admin~chunks/platform.0a163987dacd5443283a.hot-update.js",
+    "/chunks/admin~chunks/platform.10ab68881cf2fde84bf0.hot-update.js": "/chunks/admin~chunks/platform.10ab68881cf2fde84bf0.hot-update.js",
+    "/js/main.12001b0cbe2d130ee0b7.hot-update.js": "/js/main.12001b0cbe2d130ee0b7.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.12001b0cbe2d130ee0b7.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.12001b0cbe2d130ee0b7.hot-update.js",
+    "/chunks/platform.12001b0cbe2d130ee0b7.hot-update.js": "/chunks/platform.12001b0cbe2d130ee0b7.hot-update.js",
+    "/chunks/platform~chunks/shared.12001b0cbe2d130ee0b7.hot-update.js": "/chunks/platform~chunks/shared.12001b0cbe2d130ee0b7.hot-update.js",
+    "/chunks/shared.12001b0cbe2d130ee0b7.hot-update.js": "/chunks/shared.12001b0cbe2d130ee0b7.hot-update.js",
+    "/chunks/admin~chunks/platform.c3082911cc1401b30a3c.hot-update.js": "/chunks/admin~chunks/platform.c3082911cc1401b30a3c.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.3df87368d0cc487bb888.hot-update.js": "/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.3df87368d0cc487bb888.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.442ee96ea862a363323d.hot-update.js": "/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.442ee96ea862a363323d.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.1d7222eb3cf51ea269f7.hot-update.js": "/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.1d7222eb3cf51ea269f7.hot-update.js",
+    "/chunks/admin~chunks/platform.979b92de0afecf67b16a.hot-update.js": "/chunks/admin~chunks/platform.979b92de0afecf67b16a.hot-update.js",
+    "/chunks/admin~chunks/platform.5a47aad2bb5ad3ec7609.hot-update.js": "/chunks/admin~chunks/platform.5a47aad2bb5ad3ec7609.hot-update.js",
+    "/chunks/admin~chunks/platform.349aee8463b21b83f0b7.hot-update.js": "/chunks/admin~chunks/platform.349aee8463b21b83f0b7.hot-update.js",
+    "/chunks/admin~chunks/platform.c8ac15e88509cf99cc1b.hot-update.js": "/chunks/admin~chunks/platform.c8ac15e88509cf99cc1b.hot-update.js",
+    "/chunks/admin~chunks/platform.56a125f9aada3f5a1ef5.hot-update.js": "/chunks/admin~chunks/platform.56a125f9aada3f5a1ef5.hot-update.js",
+    "/chunks/admin~chunks/platform.6ec4003e010fd435e728.hot-update.js": "/chunks/admin~chunks/platform.6ec4003e010fd435e728.hot-update.js",
+    "/chunks/admin~chunks/platform.f32a20e0da4e9ca5364d.hot-update.js": "/chunks/admin~chunks/platform.f32a20e0da4e9ca5364d.hot-update.js",
+    "/chunks/admin~chunks/platform.4f0f8c9610cddaded31e.hot-update.js": "/chunks/admin~chunks/platform.4f0f8c9610cddaded31e.hot-update.js",
+    "/chunks/admin~chunks/platform.0928091f0d152de0b93d.hot-update.js": "/chunks/admin~chunks/platform.0928091f0d152de0b93d.hot-update.js",
+    "/chunks/admin~chunks/platform.e9aa84461f9fdb6800a8.hot-update.js": "/chunks/admin~chunks/platform.e9aa84461f9fdb6800a8.hot-update.js",
+    "/chunks/admin~chunks/platform.cb8e3def1e6c3a9e92ee.hot-update.js": "/chunks/admin~chunks/platform.cb8e3def1e6c3a9e92ee.hot-update.js"
 }
diff --git a/resources/js/components/FilesView/FilePreview.vue b/resources/js/components/FilesView/FilePreview.vue
index e950a3fc..61f6b7e9 100644
--- a/resources/js/components/FilesView/FilePreview.vue
+++ b/resources/js/components/FilesView/FilePreview.vue
@@ -70,8 +70,6 @@ export default {
 		})
 		events.$on('fileFullPreview:hide', () => {
 			this.showFullPreview = false
-
-            events.$emit('mobile-navigation:hide')
         })
 	}
 }
diff --git a/resources/js/components/FilesView/MobileToolbar.vue b/resources/js/components/FilesView/MobileToolbar.vue
index e6ebfa33..cd7e9fed 100644
--- a/resources/js/components/FilesView/MobileToolbar.vue
+++ b/resources/js/components/FilesView/MobileToolbar.vue
@@ -51,11 +51,10 @@
         },
         methods: {
             showMobileNavigation() {
-                events.$emit('mobile-navigation:show')
+                events.$emit('mobile-menu:show', 'user-navigation')
                 events.$emit('mobileSelecting:stop')
             },
             goBack() {
-
                 let previousFolder = last(this.browseHistory)
 
                 if (previousFolder.location === 'trash-root') {
diff --git a/resources/js/components/FilesView/Option.vue b/resources/js/components/FilesView/Option.vue
index 0c730eba..11e695a7 100644
--- a/resources/js/components/FilesView/Option.vue
+++ b/resources/js/components/FilesView/Option.vue
@@ -21,6 +21,9 @@
             <hard-drive-icon v-if="icon === 'hard-drive'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
             <upload-cloud-icon v-if="icon === 'upload-cloud'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
             <users-icon v-if="icon === 'users'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
+            <user-icon v-if="icon === 'user'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
+            <settings-icon v-if="icon === 'settings'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
+            <power-icon v-if="icon === 'power'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
         </div>
         <div class="text-label group-hover-text-theme" :class="{'text-theme': isActive}">
             {{ title }}
@@ -31,7 +34,10 @@
 <script>
 import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
 import {
+    PowerIcon,
+    SettingsIcon,
     UsersIcon,
+    UserIcon,
     UploadCloudIcon,
     HardDriveIcon,
     CornerDownRightIcon,
@@ -65,11 +71,13 @@ import {
             FolderPlusIcon,
             HardDriveIcon,
             PaperclipIcon,
+            SettingsIcon,
             LifeBuoyIcon,
             CalendarIcon,
             AlphabetIcon,
             Trash2Icon,
             SmileIcon,
+            PowerIcon,
             UsersIcon,
             Edit2Icon,
             TrashIcon,
@@ -77,6 +85,7 @@ import {
             StarIcon,
             GridIcon,
             ListIcon,
+            UserIcon,
             EyeIcon,
         }
     }
diff --git a/resources/js/components/Mobile/MobileHeader.vue b/resources/js/components/Mobile/MobileHeader.vue
index cabf2a67..6e1fa2c4 100644
--- a/resources/js/components/Mobile/MobileHeader.vue
+++ b/resources/js/components/Mobile/MobileHeader.vue
@@ -3,7 +3,7 @@
 
         <!-- Go back-->
         <div @click="goBack" class="go-back">
-            <chevron-left-icon size="17" class="icon"></chevron-left-icon>
+            <chevron-left-icon size="17" class="icon" />
         </div>
 
         <!--Folder Title-->
@@ -35,7 +35,7 @@
         },
         methods: {
             showMobileNavigation() {
-                events.$emit('mobile-navigation:show')
+                events.$emit('mobile-menu:show', 'user-navigation')
             },
             goBack() {
                 this.$router.back();
diff --git a/resources/js/components/Others/MobileNavigation.vue b/resources/js/components/Others/MobileNavigation.vue
index 635e9d9a..72c07d59 100644
--- a/resources/js/components/Others/MobileNavigation.vue
+++ b/resources/js/components/Others/MobileNavigation.vue
@@ -1,151 +1,64 @@
 <template>
-    <div class="mobile-main-navigation" v-if="user">
-        <transition name="context-menu">
-            <nav v-if="isVisible" class="mobile-navigation">
+    <MenuMobile name="user-navigation">
+        <UserHeadline class="user-info" />
 
-                <!--User Info-->
-                <UserHeadline class="user-info"/>
-
-                <!--Navigation-->
-                <MenuItemList :navigation="navigation" @menu="action"/>
-            </nav>
-        </transition>
-    </div>
+        <MenuMobileGroup>
+            <OptionGroup>
+                <Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" />
+                <Option @click.native="showUserProfileMenu" :title="$t('menu.settings')" icon="user" />
+                <Option @click.native="goToAdmin" :title="$t('menu.admin')" icon="settings" v-if="isAdmin" />
+                <Option @click.native="logOut" :title="$t('menu.logout')" icon="power" />
+            </OptionGroup>
+        </MenuMobileGroup>
+    </MenuMobile>
 </template>
 
 <script>
+    import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
+    import OptionGroup from '@/components/FilesView/OptionGroup'
     import UserHeadline from '@/components/Sidebar/UserHeadline'
-    import MenuItemList from '@/components/Mobile/MenuItemList'
+    import MenuMobile from '@/components/Mobile/MenuMobile'
+    import Option from '@/components/FilesView/Option'
     import {mapGetters} from 'vuex'
-    import {events} from '@/bus'
 
     export default {
-        name: 'UserMobileNavigation',
+        name: 'MobileNavigation',
         components: {
-            MenuItemList,
+            MenuMobileGroup,
             UserHeadline,
+            OptionGroup,
+            MenuMobile,
+            Option,
         },
         computed: {
             ...mapGetters([
+                'homeDirectory',
                 'user',
-                'homeDirectory'
             ]),
-            navigation() {
-                return [
-                    {
-                        icon: 'hard-drive',
-                        title: this.$t('menu.files'),
-                        routeName: 'Files',
-                        isVisible: true,
-                    },
-                    {
-                        icon: 'user',
-                        title: this.$t('menu.settings'),
-                        routeName: 'UserProfileMobileMenu',
-                        isVisible: true,
-                    },
-                    {
-                        icon: 'settings',
-                        title: this.$t('menu.admin'),
-                        routeName: 'AdminMobileMenu',
-                        isVisible: this.user.data.attributes.role === 'admin',
-                    },
-                    {
-                        icon: 'power',
-                        title: this.$t('menu.logout'),
-                        routeName: 'LogOut',
-                        isVisible: true,
-                    },
-                ]
-            },
-        },
-        data() {
-            return {
-                isVisible: false,
+            isAdmin() {
+                return this.user && this.user.data.attributes.role === 'admin'
             }
         },
         methods: {
-            action(name) {
-
-                /*if (name === 'latest') {
-
-                }
-
-                if (name === 'trash') {
-
-                }*/
-
-                if (name === 'hard-drive') {
-                    this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
-                }
-
-                if (name === 'power') {
-                    this.$store.dispatch('logOut')
-                }
-
-                events.$emit('mobile-navigation:hide')
+            goToFiles() {
+                this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
+            },
+            showUserProfileMenu() {
+
+            },
+            goToAdmin() {
+
+            },
+            logOut() {
+                this.$store.dispatch('logOut')
             },
-        },
-        created() {
-            events.$on('mobile-navigation:show', () => this.isVisible = true)
-            events.$on('mobile-navigation:hide', () => this.isVisible = false)
         }
     }
 </script>
 
 <style scoped lang="scss">
-    @import '@assets/vuefilemanager/_variables';
-    @import '@assets/vuefilemanager/_mixins';
-
-    .mobile-navigation {
-        padding: 20px;
-        width: 100%;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: 99;
-        background: white;
-        border-top-left-radius: 12px;
-        border-top-right-radius: 12px;
-        max-height: 80%;
-        overflow-y: auto;
-    }
 
     .user-info {
-        margin-bottom: 10px;
+        padding: 20px 20px 10px;
     }
-
-    @media (prefers-color-scheme: dark) {
-        .mobile-navigation {
-            background: $dark_mode_background;
-        }
-    }
-
-    // Transition
-    .context-menu-enter-active,
-    .fade-enter-active {
-        transition: all 200ms;
-    }
-
-    .context-menu-leave-active,
-    .fade-leave-active {
-        transition: all 200ms;
-    }
-
-    .fade-enter,
-    .fade-leave-to {
-        opacity: 0;
-    }
-
-    .context-menu-enter,
-    .context-menu-leave-to {
-        opacity: 0;
-        transform: translateY(100%);
-    }
-
-    .context-menu-leave-active {
-        position: absolute;
-    }
-
 </style>
diff --git a/resources/js/components/Others/Vignette.vue b/resources/js/components/Others/Vignette.vue
index 2119d9ed..bbe2f3da 100644
--- a/resources/js/components/Others/Vignette.vue
+++ b/resources/js/components/Others/Vignette.vue
@@ -27,7 +27,6 @@
             closePopup() {
                 events.$emit('popup:close')
                 events.$emit('mobile-menu:hide')
-                events.$emit('mobile-navigation:hide')
             }
         },
         created() {
@@ -37,10 +36,8 @@
             events.$on('alert:open', () => this.isVisibleVignette = true)
             events.$on('success:open', () => this.isVisibleVignette = true)
             events.$on('confirm:open', () => this.isVisibleVignette = true)
-            events.$on('mobile-navigation:show', () => this.isVisibleVignette = true)
 
             // Hide vignette
-            events.$on('mobile-navigation:hide', () => this.isVisibleVignette = false)
             events.$on('mobile-menu:hide', () => this.isVisibleVignette = false)
             events.$on('popup:close', () => this.isVisibleVignette = false)
         }
diff --git a/resources/js/views/Platform.vue b/resources/js/views/Platform.vue
index 8b532ac4..bc424ffa 100644
--- a/resources/js/views/Platform.vue
+++ b/resources/js/views/Platform.vue
@@ -83,10 +83,8 @@
             }
         },
         mounted() {
-            events.$on('mobile-navigation:show', () => this.isScaledDown = true)
             events.$on('mobile-menu:show', () => this.isScaledDown = true)
 
-            events.$on('mobile-navigation:hide', () => this.isScaledDown = false)
             events.$on('fileItem:deselect', () => this.isScaledDown = false)
             events.$on('mobile-menu:hide', () => this.isScaledDown = false)
         }
diff --git a/resources/js/views/Shared.vue b/resources/js/views/Shared.vue
index 4475e0f3..67a0c5be 100644
--- a/resources/js/views/Shared.vue
+++ b/resources/js/views/Shared.vue
@@ -74,8 +74,6 @@
             }
         },
         mounted() {
-            events.$on('mobile-navigation:show', () => this.isScaledDown = true)
-            events.$on('mobile-navigation:hide', () => this.isScaledDown = false)
             events.$on('mobile-menu:show', () => this.isScaledDown = true)
             events.$on('fileItem:deselect', () => this.isScaledDown = false)