refactoring part 3

resources/js/App.vue

@@ -57,7 +57,12 @@ export default {
 			const webApp = document.getElementsByTagName("html")[0];
 
 			webApp.classList.toggle("dark-mode");
-		}
+		},
+		spotlightListener(e) {
+			if (e.key === 'k' && e.metaKey) {
+				events.$emit('spotlight:show');
+			}
+		},
     },
     beforeMount() {
 
@@ -111,7 +116,12 @@ export default {
     	if (this.$isWIndows()) {
 			document.body.classList.add('windows')
 		}
-    }
+
+		window.addEventListener("keydown", this.spotlightListener);
+	},
+	destroyed() {
+		window.removeEventListener("keydown", this.spotlightListener);
+	}
 }
 </script>
 

resources/js/components/Sidebar/SidebarNavigation.vue

@@ -1,26 +1,24 @@
 <template>
     <nav class="menu-bar">
-
-        <!--Navigation Icons-->
         <div class="icon-navigation menu" v-if="user">
 
             <router-link :to="{name: 'Profile'}" class="icon-navigation-item user">
                 <UserAvatar />
             </router-link>
 
-            <router-link :to="{name: 'Files'}" :title="$t('locations.home')" class="icon-navigation-item home">
+            <router-link :to="{name: 'Files'}" :class="{'is-active': isSection('Platform')}" :title="$t('locations.home')" class="icon-navigation-item home">
                 <div class="button-icon text-theme">
                     <hard-drive-icon size="19" class="text-theme" />
                 </div>
             </router-link>
 
-            <router-link :to="{name: 'Profile'}" :class="{'is-active': isUserProfileRoute}" :title="$t('locations.profile')" class="icon-navigation-item settings">
+            <router-link :to="{name: 'Profile'}" :class="{'is-active': isSection('Profile')}" :title="$t('locations.profile')" class="icon-navigation-item settings">
                 <div class="button-icon">
                     <user-icon size="19" />
                 </div>
             </router-link>
 
-            <router-link v-if="user.data.attributes.role === 'admin'" :to="{name: 'Dashboard'}" :class="{'is-active': $isThisRoute($route, adminRoutes)}" :title="$t('locations.settings')" class="icon-navigation-item users">
+            <router-link :to="{name: 'Dashboard'}" :class="{'is-active': isSection('Admin')}" v-if="user.data.attributes.role === 'admin'" :title="$t('locations.settings')" class="icon-navigation-item users">
                 <div class="button-icon">
                     <settings-icon size="19" />
                 </div>
@@ -35,13 +33,13 @@
         </div>
 
         <!--Logout-->
-        <ul class="icon-navigation logout">
-            <li @click="$store.dispatch('logOut')" :title="$t('locations.logout')" class="icon-navigation-item">
+        <div class="icon-navigation logout">
+            <div @click="$store.dispatch('logOut')" :title="$t('locations.logout')" class="icon-navigation-item">
                 <div class="button-icon">
                     <power-icon size="19" />
                 </div>
-            </li>
-        </ul>
+            </div>
+        </div>
     </nav>
 </template>
 
@@ -76,48 +74,14 @@
             ...mapGetters([
 				'isDarkMode',
 				'user',
-			]),
-            isUserProfileRoute() {
-                return this.$isThisRoute(this.$route, ['Profile', 'Password', 'Storage', 'Invoice', 'Subscription', 'PaymentMethods'])
-            }
-        },
-        data() {
-            return {
-                adminRoutes: [
-                    'AppSettings',
-                    'AppAppearance',
-                    'AppBillings',
-                    'AppEmail',
-                    'AppOthers',
-                    'Dashboard',
-                    'PlanSubscribers',
-                    'PlanCreate',
-                    'PlanSettings',
-                    'PlanDelete',
-                    'UserSubscription',
-                    'UserInvoices',
-                    'UserPassword',
-                    'UserStorage',
-                    'UserDelete',
-                    'PlanCreate',
-                    'UserCreate',
-                    'AppPayments',
-                    'PageEdit',
-                    'Pages',
-                    'UserDelete',
-                    'UserDetail',
-                    'Invoices',
-                    'Gateways',
-                    'Gateway',
-                    'Plans',
-                    'Users',
-                    'User',
-                ],
-            }
+			])
         },
 		methods: {
 			toggleDarkMode() {
 				this.$store.dispatch('toggleDarkMode', !this.isDarkMode)
+			},
+			isSection(section) {
+				return this.$route.matched[0].name === section
 			}
 		},
         mounted() {

resources/js/components/Spotlight/Spotlight.vue

@@ -19,7 +19,7 @@
 				</div>
 			</div>
 
-			<div v-if="query !== ''" class="spotlight-results">
+			<div v-if="isEmptyQuery" class="spotlight-results">
 
 				<!--Show results-->
 				<div v-if="results.length !== 0" v-for="(item, i) in results" :key="item.id" class="result-item">
@@ -64,6 +64,9 @@ export default {
 		metaKeyIcon() {
 			return this.$isApple() ? '⌘' : '⊞'
 		},
+		isEmptyQuery() {
+			return this.query !== ''
+		}
 	},
 	watch: {
 		query(val) {
@@ -76,16 +79,16 @@ export default {
 	},
 	data() {
 		return {
-			index: 0,
-			query: '',
 			isVisible: false,
 			isLoading: false,
 			results: [],
+			query: '',
+			index: 0,
 		}
 	},
 	methods: {
 		proceedToSelect(e) {
-			// Preserve select and reload shortcut
+			// Preserve select and reload native shortcut
 			if (! ['a', 'r'].includes(e.key)) {
 				e.preventDefault()
 			}
@@ -103,12 +106,7 @@ export default {
 
 			// Show folder
 			if (file.type === 'folder') {
-				// todo: fixnut reload na Files stranke
-				if (this.$route.name !== 'Files') {
-					this.$router.push({name: 'Files'})
-				}
-
-				this.$store.dispatch('getFolder', this.results[this.index].id)
+				this.$router.push({name: 'Files', params: {id: this.results[this.index].id}})
 			} else {
 
 				// Show file
@@ -128,7 +126,6 @@ export default {
 				this.index++
 		},
 		onPageUp() {
-
 			if (this.index > 0) this.index--
 		},
 		searchFiles: debounce(function (value) {

resources/js/router.js

@@ -5,6 +5,7 @@ import routesAdmin from './routes/routesAdmin'
 import routesIndex from './routes/routesIndex'
 import routesAuth from './routes/routesAuth'
 import routesUser from './routes/routesUser'
+import routesFile from './routes/routesFile'
 import store from './store/index'
 import Router from 'vue-router'
 import Vue from 'vue'
@@ -21,6 +22,7 @@ const router = new Router({
         ...routesIndex,
         ...routesAuth,
         ...routesUser,
+        ...routesFile,
     ],
     scrollBehavior(to, from, savedPosition) {
         if (savedPosition) {

resources/js/routes/routesFile.js

@@ -0,0 +1,66 @@
+const routesFile = [
+	{
+		name: 'Platform',
+		path: '/platform',
+		component: () =>
+			import(/* webpackChunkName: "chunks/platform" */ '../views/Platform'),
+		children: [
+			{
+				name: 'Files',
+				path: '/platform/files/:id?',
+				component: () =>
+					import(/* webpackChunkName: "chunks/files" */ '../views/FileView/Files'),
+				meta: {
+					requiresAuth: true
+				},
+			},
+			{
+				name: 'RecentUploads',
+				path: '/platform/recent-uploads',
+				component: () =>
+					import(/* webpackChunkName: "chunks/recent-uploads" */ '../views/FileView/RecentUploads'),
+				meta: {
+					requiresAuth: true
+				},
+			},
+			{
+				name: 'MySharedItems',
+				path: '/platform/my-shared-items',
+				component: () =>
+					import(/* webpackChunkName: "chunks/my-shared-items" */ '../views/FileView/MySharedItems'),
+				meta: {
+					requiresAuth: true
+				},
+			},
+			{
+				name: 'Trash',
+				path: '/platform/trash/:id?',
+				component: () =>
+					import(/* webpackChunkName: "chunks/trash" */ '../views/FileView/Trash'),
+				meta: {
+					requiresAuth: true
+				},
+			},
+			{
+				name: 'TeamFolders',
+				path: '/platform/team-folder/:id?',
+				component: () =>
+					import(/* webpackChunkName: "chunks/team-folders" */ '../views/FileView/Trash'),
+				meta: {
+					requiresAuth: true
+				},
+			},
+			{
+				name: 'SharedWithMe',
+				path: '/platform/shared-with-me/:id?',
+				component: () =>
+					import(/* webpackChunkName: "chunks/shared-with-me" */ '../views/FileView/Trash'),
+				meta: {
+					requiresAuth: true
+				},
+			},
+		]
+	}
+]
+
+export default routesFile

resources/js/routes/routesUser.js

@@ -1,167 +1,105 @@
 const routesUser = [
 	{
-		path: '/platform',
-		name: 'Platform',
+		name: 'User',
+		path: '/user',
 		component: () =>
-			import(/* webpackChunkName: "chunks/platform" */ '../views/Platform'),
+			import(/* webpackChunkName: "chunks/settings" */ '../views/Profile'),
+		meta: {
+			requiresAuth: true
+		},
 		children: [
 			{
-				name: 'Files',
-				path: '/platform/files/:id?',
+				name: 'Profile',
+				path: '/user/profile',
 				component: () =>
-					import(/* webpackChunkName: "chunks/files" */ '../views/FileView/Files'),
-				meta: {
-					requiresAuth: true
-				},
-			},
-			{
-				name: 'RecentUploads',
-				path: '/platform/recent-uploads',
-				component: () =>
-					import(/* webpackChunkName: "chunks/recent-uploads" */ '../views/FileView/RecentUploads'),
-				meta: {
-					requiresAuth: true
-				},
-			},
-			{
-				name: 'MySharedItems',
-				path: '/platform/my-shared-items',
-				component: () =>
-					import(/* webpackChunkName: "chunks/my-shared-items" */ '../views/FileView/MySharedItems'),
-				meta: {
-					requiresAuth: true
-				},
-			},
-			{
-				name: 'Trash',
-				path: '/platform/trash/:id?',
-				component: () =>
-					import(/* webpackChunkName: "chunks/trash" */ '../views/FileView/Trash'),
-				meta: {
-					requiresAuth: true
-				},
-			},
-			{
-				name: 'TeamFolders',
-				path: '/platform/team-folder/:id?',
-				component: () =>
-					import(/* webpackChunkName: "chunks/team-folders" */ '../views/FileView/Trash'),
-				meta: {
-					requiresAuth: true
-				},
-			},
-			{
-				name: 'SharedWithMe',
-				path: '/platform/shared-with-me/:id?',
-				component: () =>
-					import(/* webpackChunkName: "chunks/shared-with-me" */ '../views/FileView/Trash'),
-				meta: {
-					requiresAuth: true
-				},
-			},
-			{
-				name: 'Settings',
-				path: '/platform/settings',
-				component: () =>
-					import(/* webpackChunkName: "chunks/settings" */ '../views/Profile'),
-				meta: {
-					requiresAuth: true
-				},
-				children: [
-					{
-						name: 'Profile',
-						path: '/platform/profile',
-						component: () =>
-							import(/* webpackChunkName: "chunks/profile" */ '../views/User/Settings'),
-						meta: {
-							requiresAuth: true,
-							title: 'routes_title.profile'
-						},
-					},
-					{
-						name: 'Password',
-						path: '/platform/settings/password',
-						component: () =>
-							import(/* webpackChunkName: "chunks/settings-password" */ '../views/User/Password'),
-						meta: {
-							requiresAuth: true,
-							title: 'routes_title.settings_password'
-						},
-					},
-					{
-						name: 'Storage',
-						path: '/platform/settings/storage',
-						component: () =>
-							import(/* webpackChunkName: "chunks/settings-storage" */ '../views/User/Storage'),
-						meta: {
-							requiresAuth: true,
-							title: 'routes_title.settings_storage'
-						},
-					},
-					{
-						name: 'Invoice',
-						path: '/platform/settings/invoices',
-						component: () =>
-							import(/* webpackChunkName: "chunks/settings-invoices" */ '../views/User/Invoices'),
-						meta: {
-							requiresAuth: true,
-							title: 'routes_title.invoices'
-						},
-					},
-					{
-						name: 'Subscription',
-						path: '/platform/settings/subscription',
-						component: () =>
-							import(/* webpackChunkName: "chunks/settings-subscription" */ '../views/User/Subscription'),
-						meta: {
-							requiresAuth: true,
-							title: 'routes_title.subscription'
-						},
-					},
-					{
-						name: 'PaymentMethods',
-						path: '/platform/settings/payment-methods',
-						component: () =>
-							import(/* webpackChunkName: "chunks/settings-payment-methods" */ '../views/User/PaymentMethods'),
-						meta: {
-							requiresAuth: true,
-							title: 'routes_title.payment_methods'
-						},
-					},
-					{
-						name: 'CreatePaymentMethod',
-						path: '/platform/settings/create-payment-method',
-						component: () =>
-							import(/* webpackChunkName: "chunks/settings-create-payment-methods" */ '../views/User/CreatePaymentMethod'),
-						meta: {
-							requiresAuth: true,
-							title: 'Create Payment Method'
-						},
-					},
-				]
-			},
-			{
-				name: 'UpgradePlan',
-				path: '/platform/upgrade/plan',
-				component: () =>
-					import(/* webpackChunkName: "chunks/upgrade-plan" */ '../views/Upgrade/UpgradePlan'),
+					import(/* webpackChunkName: "chunks/profile" */ '../views/User/Settings'),
 				meta: {
 					requiresAuth: true,
-					title: 'routes_title.upgrade_plan'
+					title: 'routes_title.profile'
 				},
 			},
 			{
-				name: 'UpgradeBilling',
-				path: '/platform/upgrade/billing',
+				name: 'Password',
+				path: '/user/settings/password',
 				component: () =>
-					import(/* webpackChunkName: "chunks/upgrade-billing" */ '../views/Upgrade/UpgradeBilling'),
+					import(/* webpackChunkName: "chunks/settings-password" */ '../views/User/Password'),
 				meta: {
 					requiresAuth: true,
-					title: 'routes_title.upgrade_billing'
+					title: 'routes_title.settings_password'
+				},
+			},
+			{
+				name: 'Storage',
+				path: '/user/settings/storage',
+				component: () =>
+					import(/* webpackChunkName: "chunks/settings-storage" */ '../views/User/Storage'),
+				meta: {
+					requiresAuth: true,
+					title: 'routes_title.settings_storage'
+				},
+			},
+			{
+				name: 'Invoice',
+				path: '/user/settings/invoices',
+				component: () =>
+					import(/* webpackChunkName: "chunks/settings-invoices" */ '../views/User/Invoices'),
+				meta: {
+					requiresAuth: true,
+					title: 'routes_title.invoices'
+				},
+			},
+			{
+				name: 'Subscription',
+				path: '/user/settings/subscription',
+				component: () =>
+					import(/* webpackChunkName: "chunks/settings-subscription" */ '../views/User/Subscription'),
+				meta: {
+					requiresAuth: true,
+					title: 'routes_title.subscription'
+				},
+			},
+			{
+				name: 'PaymentMethods',
+				path: '/user/settings/payment-methods',
+				component: () =>
+					import(/* webpackChunkName: "chunks/settings-payment-methods" */ '../views/User/PaymentMethods'),
+				meta: {
+					requiresAuth: true,
+					title: 'routes_title.payment_methods'
+				},
+			},
+			{
+				name: 'CreatePaymentMethod',
+				path: '/user/settings/create-payment-method',
+				component: () =>
+					import(/* webpackChunkName: "chunks/settings-create-payment-methods" */ '../views/User/CreatePaymentMethod'),
+				meta: {
+					requiresAuth: true,
+					title: 'Create Payment Method'
 				},
 			},
 		]
-	}
+	},
+	{
+		name: 'UpgradePlan',
+		path: '/user/upgrade/plan',
+		component: () =>
+			import(/* webpackChunkName: "chunks/upgrade-plan" */ '../views/Upgrade/UpgradePlan'),
+		meta: {
+			requiresAuth: true,
+			title: 'routes_title.upgrade_plan'
+		},
+	},
+	{
+		name: 'UpgradeBilling',
+		path: '/user/upgrade/billing',
+		component: () =>
+			import(/* webpackChunkName: "chunks/upgrade-billing" */ '../views/Upgrade/UpgradeBilling'),
+		meta: {
+			requiresAuth: true,
+			title: 'routes_title.upgrade_billing'
+		},
+	},
 ]
 
 export default routesUser

resources/js/views/Admin.vue

@@ -1,5 +1,8 @@
 <template>
     <section id="viewport">
+		<!--On Top of App Components-->
+        <FilePreview />
+		<Spotlight />
 
         <!--Mobile Navigation-->
         <MobileNavigation />
@@ -20,7 +23,7 @@
                 <div class="menu-list-wrapper vertical">
                     <router-link :to="{name: 'Dashboard'}" class="menu-list-item link">
                         <div class="icon text-theme">
-                            <box-icon size="17"></box-icon>
+                            <box-icon size="17" />
                         </div>
                         <div class="label text-theme">
                             {{ $t('admin_menu.dashboard') }}
@@ -28,7 +31,7 @@
                     </router-link>
                     <router-link :to="{name: 'Users'}" class="menu-list-item link">
                         <div class="icon text-theme">
-                            <users-icon size="17"></users-icon>
+                            <users-icon size="17" />
                         </div>
                         <div class="label text-theme">
                             {{ $t('admin_menu.users') }}
@@ -36,7 +39,7 @@
                     </router-link>
                     <router-link :to="{name: 'AppOthers'}" class="menu-list-item link">
                         <div class="icon text-theme">
-                            <settings-icon size="17"></settings-icon>
+                            <settings-icon size="17" />
                         </div>
                         <div class="label text-theme">
                             {{ $t('admin_menu.settings') }}
@@ -44,7 +47,7 @@
                     </router-link>
                     <router-link :to="{name: 'Pages'}" class="menu-list-item link">
                         <div class="icon text-theme">
-                            <monitor-icon size="17"></monitor-icon>
+                            <monitor-icon size="17" />
                         </div>
                         <div class="label text-theme">
                             {{ $t('admin_menu.pages') }}
@@ -66,7 +69,7 @@
                 <div class="menu-list-wrapper vertical">
                     <router-link :to="{name: 'Plans'}" class="menu-list-item link">
                         <div class="icon text-theme">
-                            <database-icon size="17"></database-icon>
+                            <database-icon size="17" />
                         </div>
                         <div class="label text-theme">
                             {{ $t('admin_menu.plans') }}
@@ -74,7 +77,7 @@
                     </router-link>
                     <router-link :to="{name: 'Invoices'}" class="menu-list-item link">
                         <div class="icon text-theme">
-                            <file-text-icon size="17"></file-text-icon>
+                            <file-text-icon size="17" />
                         </div>
                         <div class="label text-theme">
                             {{ $t('admin_menu.invoices') }}
@@ -89,6 +92,8 @@
 </template>
 
 <script>
+    import FilePreview from '/resources/js/components/FilePreview/FilePreview'
+	import Spotlight from '/resources/js/components/Spotlight/Spotlight'
     import { UsersIcon, SettingsIcon, FileTextIcon, CreditCardIcon, DatabaseIcon, BoxIcon, MonitorIcon, GlobeIcon } from 'vue-feather-icons'
     import SidebarNavigation from '/resources/js/components/Sidebar/SidebarNavigation'
     import MobileNavigation from '/resources/js/components/Others/MobileNavigation'
@@ -101,9 +106,13 @@
     export default {
         name: 'Settings',
         computed: {
-            ...mapGetters(['config']),
+            ...mapGetters([
+				'config'
+			]),
         },
         components: {
+			FilePreview,
+			Spotlight,
             SidebarNavigation,
             MobileNavigation,
             CreateLanguage,

resources/js/views/FileView/Components/PanelNavigationFiles.vue

@@ -105,7 +105,7 @@
 	import {mapGetters} from "vuex";
 
 export default {
-	name: "NavigationPanel",
+	name: "PanelNavigationFiles",
 	components: {
 		UpgradeSidebarBanner,
 		TreeMenuNavigator,

resources/js/views/Platform.vue

@@ -26,13 +26,13 @@
 
         <!--Navigations-->
         <MobileNavigation />
-        <SidebarNavigation />
 
         <!--Others-->
         <DragUI />
 
-		<!--Sidebar-->
-		<NavigationPanel />
+		<!--2 col Sidebars-->
+        <SidebarNavigation />
+		<PanelNavigationFiles />
 
 		<div @contextmenu.prevent.capture="contextMenu($event, undefined)" id="file-view">
 			<DesktopToolbar/>
@@ -59,7 +59,7 @@
     import FilePreview from '/resources/js/components/FilePreview/FilePreview'
     import Spotlight from '/resources/js/components/Spotlight/Spotlight'
     import DragUI from '/resources/js/components/FilesView/DragUI'
-	import NavigationPanel from "./FileView/Components/NavigationPanel"
+	import PanelNavigationFiles from "./FileView/Components/PanelNavigationFiles"
     import {events} from '/resources/js/bus'
 
     export default {
@@ -74,7 +74,7 @@
             MobileNavigation,
             ShareCreatePopup,
             ProcessingPopup,
-			NavigationPanel,
+			PanelNavigationFiles,
             RenameItemPopup,
             ShareEditPopup,
 			DesktopToolbar,
@@ -90,11 +90,6 @@
             }
         },
 		methods: {
-        	spotlightListener(e) {
-				if (e.key === 'k' && e.metaKey) {
-					events.$emit('spotlight:show');
-				}
-			},
 			contextMenu(event, item) {
 				events.$emit('context-menu:show', event, item)
 			},
@@ -103,12 +98,7 @@
             events.$on('mobile-menu:show', () => this.isScaledDown = true)
             events.$on('fileItem:deselect', () => this.isScaledDown = false)
             events.$on('mobile-menu:hide', () => this.isScaledDown = false)
-
-			window.addEventListener("keydown", this.spotlightListener);
-        },
-		destroyed() {
-			window.removeEventListener("keydown", this.spotlightListener);
-		}
+        }
 	}
 </script>
 

resources/js/views/Profile.vue

@@ -1,74 +1,14 @@
 <template>
     <section id="viewport">
-        <ContentSidebar>
+		<!--On Top of App Components-->
+        <FilePreview />
+		<Spotlight />
 
-            <!--Settings-->
-            <ContentGroup title="Menu" class="navigator">
-                <div class="menu-list-wrapper vertical">
-                    <router-link replace :to="{name: 'Profile'}" class="menu-list-item link">
-                        <div class="icon text-theme">
-                            <user-icon size="17"></user-icon>
-                        </div>
-                        <div class="label text-theme">
-                            {{ $t('menu.profile') }}
-                        </div>
-                    </router-link>
-
-                    <router-link replace :to="{name: 'Storage'}" class="menu-list-item link">
-                        <div class="icon text-theme">
-                            <hard-drive-icon size="17"></hard-drive-icon>
-                        </div>
-                        <div class="label text-theme">
-                            {{ $t('menu.storage') }}
-                        </div>
-                    </router-link>
-
-                    <router-link replace :to="{name: 'Password'}" class="menu-list-item link">
-                        <div class="icon text-theme">
-                            <lock-icon size="17"></lock-icon>
-                        </div>
-                        <div class="label text-theme">
-                            {{ $t('menu.password') }}
-                        </div>
-                    </router-link>
-                </div>
-            </ContentGroup>
-
-			<!--Subscription-->
-            <ContentGroup title="Subscription" class="navigator" v-if="canShowSubscriptionSettings">
-                <div class="menu-list-wrapper vertical">
-                    <router-link replace :to="{name: 'Subscription'}" class="menu-list-item link">
-                        <div class="icon text-theme">
-                            <cloud-icon size="17"></cloud-icon>
-                        </div>
-                        <div class="label text-theme">
-                            {{ $t('menu.subscription') }}
-                        </div>
-                    </router-link>
-
-                    <router-link replace :to="{name: 'PaymentMethods'}" class="menu-list-item link">
-                        <div class="icon text-theme">
-                            <credit-card-icon size="17"></credit-card-icon>
-                        </div>
-                        <div class="label text-theme">
-                            {{ $t('menu.payment_cards') }}
-                        </div>
-                    </router-link>
-
-                    <router-link replace :to="{name: 'Invoice'}" class="menu-list-item link">
-                        <div class="icon text-theme">
-                            <file-text-icon size="17"></file-text-icon>
-                        </div>
-                        <div class="label text-theme">
-                            {{ $t('menu.invoices') }}
-                        </div>
-                    </router-link>
-                </div>
-            </ContentGroup>
-        </ContentSidebar>
+		<SidebarNavigation />
+        <PanelNavigationUser />
 
         <div v-if="user" id="single-page">
-            <div id="page-content" class="medium-width" v-if="! isLoading">
+            <div v-if="! isLoading" id="page-content" class="medium-width">
                 <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
 
                 <div class="content-page">
@@ -132,63 +72,51 @@
 </template>
 
 <script>
+    import FilePreview from '/resources/js/components/FilePreview/FilePreview'
+	import Spotlight from '/resources/js/components/Spotlight/Spotlight'
 	import TwoFactorRecoveryCodesPopup from '/resources/js/components/Others/TwoFactorRecoveryCodesPopup'
 	import CreatePersonaTokenPopup from '/resources/js/components/Others/CreatePersonaTokenPopup'
 	import TwoFactorSetupPopup from '/resources/js/components/Others/TwoFactorSetupPopup'
-    import ContentSidebar from '/resources/js/components/Sidebar/ContentSidebar'
-    import ContentGroup from '/resources/js/components/Sidebar/ContentGroup'
     import UserImageInput from '/resources/js/components/Others/UserImageInput'
+	import SidebarNavigation from "../components/Sidebar/SidebarNavigation"
     import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
+	import PanelNavigationUser from "./User/Components/PanelNavigationUser"
     import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
     import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
     import PageHeader from '/resources/js/components/Others/PageHeader'
     import ColorLabel from '/resources/js/components/Others/ColorLabel'
     import Spinner from '/resources/js/components/FilesView/Spinner'
     import { mapGetters } from 'vuex'
-    import {
-        CreditCardIcon,
-        HardDriveIcon,
-        FileTextIcon,
-        CloudIcon,
-        UserIcon,
-        LockIcon,
-        KeyIcon,
-    } from 'vue-feather-icons'
 
     export default {
         name: 'Settings',
         components: {
+			FilePreview,
+			Spotlight,
 			TwoFactorRecoveryCodesPopup,
 			CreatePersonaTokenPopup,
+			PanelNavigationUser,
 			TwoFactorSetupPopup,
-            ContentSidebar,
-            CreditCardIcon,
+			SidebarNavigation,
             UserImageInput,
-            HardDriveIcon,
-            FileTextIcon,
             MobileHeader,
-            ContentGroup,
             ButtonBase,
             ColorLabel,
             PageHeader,
-            CloudIcon,
-            UserIcon,
-            LockIcon,
             Spinner,
             InfoBox,
-            KeyIcon,
         },
         computed: {
-            ...mapGetters(['user', 'config']),
+            ...mapGetters([
+            	'user',
+				'config'
+			]),
             subscriptionStatus() {
                 return this.user.data.attributes.subscription ? this.$t('global.premium') : this.$t('global.free')
             },
             subscriptionColor() {
                 return this.user.data.attributes.subscription ? 'green' : 'purple'
             },
-            canShowSubscriptionSettings() {
-                return this.config.isSaaS && this.config.app_payments_active
-            },
             canShowUpgradeWarning() {
                 return this.config.storageLimit && this.user.data.attributes.storage.used > 95
             },

resources/js/views/User/Components/PanelNavigationUser.vue

@@ -0,0 +1,111 @@
+<template>
+	<ContentSidebar>
+
+		<!--Settings-->
+		<ContentGroup title="Menu" class="navigator">
+			<div class="menu-list-wrapper vertical">
+				<router-link replace :to="{name: 'Profile'}" class="menu-list-item link">
+					<div class="icon text-theme">
+						<user-icon size="17" />
+					</div>
+					<div class="label text-theme">
+						{{ $t('menu.profile') }}
+					</div>
+				</router-link>
+
+				<router-link replace :to="{name: 'Storage'}" class="menu-list-item link">
+					<div class="icon text-theme">
+						<hard-drive-icon size="17" />
+					</div>
+					<div class="label text-theme">
+						{{ $t('menu.storage') }}
+					</div>
+				</router-link>
+
+				<router-link replace :to="{name: 'Password'}" class="menu-list-item link">
+					<div class="icon text-theme">
+						<lock-icon size="17" />
+					</div>
+					<div class="label text-theme">
+						{{ $t('menu.password') }}
+					</div>
+				</router-link>
+			</div>
+		</ContentGroup>
+
+		<!--Subscription-->
+		<ContentGroup v-if="canShowSubscriptionSettings" :title="$t('user_subscription.title')" class="navigator">
+			<div class="menu-list-wrapper vertical">
+				<router-link replace :to="{name: 'Subscription'}" class="menu-list-item link">
+					<div class="icon text-theme">
+						<cloud-icon size="17" />
+					</div>
+					<div class="label text-theme">
+						{{ $t('menu.subscription') }}
+					</div>
+				</router-link>
+
+				<router-link replace :to="{name: 'PaymentMethods'}" class="menu-list-item link">
+					<div class="icon text-theme">
+						<credit-card-icon size="17" />
+					</div>
+					<div class="label text-theme">
+						{{ $t('menu.payment_cards') }}
+					</div>
+				</router-link>
+
+				<router-link replace :to="{name: 'Invoice'}" class="menu-list-item link">
+					<div class="icon text-theme">
+						<file-text-icon size="17" />
+					</div>
+					<div class="label text-theme">
+						{{ $t('menu.invoices') }}
+					</div>
+				</router-link>
+			</div>
+		</ContentGroup>
+	</ContentSidebar>
+</template>
+
+<script>
+    import ContentSidebar from '/resources/js/components/Sidebar/ContentSidebar'
+	import ContentGroup from '/resources/js/components/Sidebar/ContentGroup'
+	import {mapGetters} from "vuex"
+	import {
+		CreditCardIcon,
+		HardDriveIcon,
+		FileTextIcon,
+		CloudIcon,
+		UserIcon,
+		LockIcon,
+		KeyIcon,
+	} from 'vue-feather-icons'
+
+	export default {
+		name: "PanelNavigationUser",
+		components: {
+			ContentSidebar,
+			CreditCardIcon,
+			ContentGroup,
+			HardDriveIcon,
+			FileTextIcon,
+			CloudIcon,
+			UserIcon,
+			LockIcon,
+			KeyIcon,
+		},
+		computed: {
+			...mapGetters([
+				'config',
+				'user',
+			]),
+			canShowSubscriptionSettings() {
+				return this.config.isSaaS && this.config.app_payments_active
+			},
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>