fixed navigation for mobile version

resources/js/components/Admin/CardNavigation.vue

@@ -1,15 +1,19 @@
 <template>
-	<div class="whitespace-nowrap overflow-x-auto">
-		<router-link
-			class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme"
-			:class="{'text-theme': routeName === page.route, 'dark:text-gray-400 text-gray-600': routeName !== page.route}"
-			v-for="(page, i) in pages"
-			:to="{name: page.route}"
-			:key="i"
-			replace
-		>
-			{{ page.title }}
-		</router-link>
+	<div id="card-navigation" style="height: 62px" class="mb-7">
+		<div :class="{'fixed top-0 left-0 right-0 px-6 rounded-none backdrop-filter backdrop-blur-lg dark:bg-dark-foreground bg-white bg-opacity-50 z-10': fixedNav}">
+			<div class="whitespace-nowrap overflow-x-auto">
+				<router-link
+					class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme"
+					:class="{'text-theme': routeName === page.route, 'dark:text-gray-100 text-gray-600': routeName !== page.route}"
+					v-for="(page, i) in pages"
+					:to="{name: page.route}"
+					:key="i"
+					replace
+				>
+					{{ page.title }}
+				</router-link>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -24,5 +28,18 @@ export default {
 			return this.$route.name
 		}
 	},
+	data() {
+		return {
+			fixedNav: false,
+		}
+	},
+	created() {
+		// Handle fixed mobile navigation
+		window.addEventListener("scroll", () => {
+			let card = document.getElementById('card-navigation')
+
+			this.fixedNav = card.getBoundingClientRect().top < 0;
+		});
+	}
 }
 </script>

resources/js/components/Spotlight/Spotlight.vue

@@ -26,7 +26,7 @@
 
 				<!--Text search field-->
 				<input
-					class="w-full border-none text-xl font-semibold placeholder-gray-700 dark:placeholder-gray-400 bg-transparent focus:outline-none"
+					class="w-full border-none sm:text-xl text-lg font-semibold placeholder-gray-700 dark:placeholder-gray-400 bg-transparent focus:outline-none"
 					v-model="query"
 					@keydown.delete="undoFilter"
 					@keydown.enter="showSelected"
@@ -516,11 +516,13 @@ export default {
 				this.results = []
 				this.actions = []
 
+			let formattedQuery = query.toLowerCase()
+
 			// Reset selection index
 			this.index = 0
 
 			// Go for filter keyword
-			let getFilterQuery = query.substr(0, 2)
+			let getFilterQuery = formattedQuery.substr(0, 2)
 
 			// search for the users
 			if (getFilterQuery === 'u ' && this.isAdmin && ! this.activeFilter) {
@@ -529,10 +531,10 @@ export default {
 
 			// Browse actions
 			if (! this.activeFilter) {
-				this.actions = this.actionList.filter(el => el.title.toLowerCase().indexOf(query) > -1).slice(0, 3)
+				this.actions = this.actionList.filter(el => el.title.toLowerCase().indexOf(formattedQuery) > -1).slice(0, 3)
 			}
 
-			this.findResult(query)
+			this.findResult(formattedQuery)
 		},
 	},
 	methods: {