- New mobile navigation experience

resources/js/components/Mobile/MenuItemList.vue

@@ -1,140 +0,0 @@
-<template>
-    <ul class="link-group">
-        <li @click="goToItem(link)" v-for="(link, i) in navigation" :key="i" v-if="link.isVisible" :class="link.icon" class="link-item">
-            <div class="menu-icon">
-                <hard-drive-icon v-if="link.icon === 'hard-drive'" size="17" />
-                <share-icon v-if="link.icon === 'share'" size="17" />
-                <trash2-icon v-if="link.icon === 'trash'" size="17" />
-                <power-icon v-if="link.icon === 'power'" size="17" />
-                <settings-icon v-if="link.icon === 'settings'" size="17" />
-                <upload-cloud-icon v-if="link.icon === 'latest'" size="17" />
-                <user-icon v-if="link.icon === 'user'" size="17" />
-                <users-icon v-if="link.icon === 'users'" size="17" />
-                <lock-icon v-if="link.icon === 'lock'" size="17" />
-                <file-text-icon v-if="link.icon === 'file-text'" size="17" />
-                <database-icon v-if="link.icon === 'database'" size="17" />
-                <credit-card-icon v-if="link.icon === 'credit-card'" size="17" />
-                <cloud-icon v-if="link.icon === 'cloud'" size="17" />
-                <monitor-icon v-if="link.icon === 'monitor'" size="17" />
-                <box-icon v-if="link.icon === 'box'" size="17" />
-                <globe-icon v-if="link.icon === 'language'" size="17" />
-            </div>
-            <b class="menu-link">
-                <span>{{ link.title }}</span>
-                <chevron-right-icon size="15" class="arrow-right"/>
-            </b>
-        </li>
-    </ul>
-</template>
-
-<script>
-    import {
-        ChevronRightIcon,
-        UploadCloudIcon,
-        CreditCardIcon,
-        HardDriveIcon,
-        FileTextIcon,
-        SettingsIcon,
-        DatabaseIcon,
-        MonitorIcon,
-        Trash2Icon,
-        CloudIcon,
-        PowerIcon,
-        GlobeIcon,
-        ShareIcon,
-        UsersIcon,
-        UserIcon,
-        LockIcon,
-        BoxIcon,
-    } from 'vue-feather-icons'
-
-    export default {
-        name: 'MenuItemList',
-        components: {
-            BoxIcon,
-            MonitorIcon,
-            ChevronRightIcon,
-            UploadCloudIcon,
-            CreditCardIcon,
-            HardDriveIcon,
-            DatabaseIcon,
-            FileTextIcon,
-            SettingsIcon,
-            Trash2Icon,
-            CloudIcon,
-            PowerIcon,
-            GlobeIcon,
-            UsersIcon,
-            ShareIcon,
-            LockIcon,
-            UserIcon,
-        },
-        props: [
-            'navigation'
-        ],
-        methods: {
-            goToItem(link) {
-                this.$emit('menu', link.icon)
-
-                // Go to next route
-                if (link.routeName !== this.$route.name)
-                    this.$router.push({name: link.routeName})
-            }
-        }
-    }
-</script>
-
-<style scoped lang="scss">
-    @import '@assets/vuefilemanager/_variables';
-    @import '@assets/vuefilemanager/_mixins';
-
-    .link-item {
-        display: flex;
-        text-decoration: none;
-        padding: 17px 0;
-        width: 100%;
-
-        .menu-icon {
-            display: block;
-            margin-right: 20px;
-
-            svg {
-                margin-top: -1px;
-                vertical-align: middle;
-            }
-
-            path, line, polyline, rect, circle, ellipse {
-                stroke: $text;
-            }
-        }
-
-        .menu-link {
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            color: $text;
-
-            span {
-                @include font-size(14);
-            }
-        }
-    }
-
-    @media (prefers-color-scheme: dark) {
-        .link-item {
-
-            .menu-icon {
-
-                path, line, polyline, rect, circle, ellipse {
-                    stroke: $dark_mode_text_primary;
-                }
-            }
-
-            .menu-link {
-                color: $dark_mode_text_primary;
-            }
-        }
-    }
-
-</style>

resources/js/components/Mobile/MenuMobile.vue

@@ -61,12 +61,12 @@
     // Transition
     .context-menu-enter-active,
     .fade-enter-active {
-        transition: all 200ms;
+        transition: all 300ms;
     }
 
     .context-menu-leave-active,
     .fade-leave-active {
-        transition: all 200ms;
+        transition: all 300ms;
     }
 
     .fade-enter,