refactoring part 3

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) {