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

resources/js/views/Admin/AppSettings/AppSettings.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
 		<!--Page Tab links-->
-		<div class="card shadow-card sticky top-0 z-10" style="padding-bottom: 0; padding-top: 0;">
+		<div class="card shadow-card z-10" style="padding-bottom: 0; padding-top: 0;">
 			<CardNavigation :pages="pages" class="-mx-1" />
 		</div>
 
@@ -12,7 +12,7 @@
 
 <script>
 	import CardNavigation from "../../../components/Admin/CardNavigation";
-	import {mapGetters} from 'vuex'
+
 
 	export default {
 		name: 'AppSettings',

resources/js/views/Admin/PaymentSettings/PaymentSettings.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
 		<!--Page Tab links-->
-		<div class="card shadow-card sticky top-0 z-10" style="padding-bottom: 0; padding-top: 0;">
+		<div class="card shadow-card z-10" style="padding-bottom: 0; padding-top: 0;">
 			<CardNavigation :pages="pages" class="-mx-1" />
 		</div>
 

resources/js/views/Admin/Plans/FixedPlan.vue

@@ -3,10 +3,10 @@
 		<div v-if="plan" class="card shadow-card sticky top-0 z-10" style="padding-bottom: 0">
 
 			<div class="mb-2">
-				<h1 class="font-bold text-xl">
+				<h1 class="font-bold sm:text-xl text-lg">
 					{{ plan.attributes.name }}
 				</h1>
-				<small class="text-sm font-bold text-gray-500">
+				<small class="sm:text-sm text-xs font-bold text-gray-500">
 					{{ plan.attributes.price }} / {{ $t(`interval.${plan.attributes.interval}`) }}
 				</small>
 			</div>

resources/js/views/Admin/Plans/MeteredPlan.vue

@@ -3,15 +3,16 @@
 		<div v-if="plan" class="card shadow-card sticky top-0 z-10" style="padding-bottom: 0;">
 
 			<div class="mb-2">
-				<h1 class="font-bold text-xl">
+				<h1 class="font-bold sm:text-xl text-lg">
 					{{ plan.attributes.name }}
 				</h1>
-				<small class="text-sm font-bold text-gray-500">
+				<small class="sm:text-sm text-xs font-bold text-gray-500">
 					{{ $t('30 Days intervals') }}
 				</small>
 			</div>
 
-			<CardNavigation :pages="pages" class="-mx-1.5" />
+			<!--Navigation-->
+			<CardNavigation :pages="pages" class="-mx-1" />
 		</div>
 
 		<router-view v-if="! isLoading" :plan="plan" />

resources/js/views/MobileNavigationToolbar.vue

@@ -3,27 +3,33 @@
 
 		<!-- Go back-->
 		<div @click="$router.back()" class="go-back-button flex text-left items-center cursor-pointer">
-			<chevron-left-icon size="17" class="transform align-middle mr-2 -ml-1" />
+			<chevron-left-icon size="17" class="transform align-middle mr-2 -ml-1 dark:text-gray-100 vue-feather" />
 
-			<!--Folder Title-->
-			<div class="text-sm align-middle font-bold overflow-hidden overflow-ellipsis inline-block whitespace-nowrap transition-all duration-200" style="max-width: 200px;">
+			<!--Location Title-->
+			<div class="text-sm dark:text-gray-100 align-middle font-bold overflow-hidden overflow-ellipsis inline-block whitespace-nowrap transition-all duration-200" style="max-width: 200px;">
 				{{ locationName }}
 			</div>
 		</div>
 
 		<!--More Actions-->
-		<div @click="$showMobileMenu('user-navigation')" class="pr-2 cursor-pointer">
-			<menu-icon size="17" />
+		<div class="flex items-center">
+			<div @click="$openSpotlight()" class="px-2 mr-4 cursor-pointer">
+				<search-icon size="17" class="vue-feather dark:text-gray-100" />
+			</div>
+			<div @click="$showMobileMenu('user-navigation')" class="pr-2 cursor-pointer">
+				<menu-icon size="17" class="vue-feather dark:text-gray-100" />
+			</div>
 		</div>
 	</div>
 </template>
 <script>
-    import {MenuIcon, ChevronLeftIcon } from 'vue-feather-icons'
+    import {MenuIcon, ChevronLeftIcon, SearchIcon } from 'vue-feather-icons'
 
 	export default {
 		name: 'MobileNavigationToolbar',
 		components: {
 			ChevronLeftIcon,
+			SearchIcon,
 			MenuIcon,
 		},
 		computed: {

resources/js/views/Profile.vue

@@ -30,27 +30,27 @@
             <div v-if="! isLoading" id="page-content">
 
 				<div class="card shadow-card sticky top-0 z-10" style="padding-bottom: 0">
-					<!--User thumbnail-->
-                    <div class="mb-3">
-                        <div class="user-thumbnail">
-                            <div class="avatar">
-                                <UserImageInput
-									v-model="avatar"
-									:avatar="user.data.relationships.settings.data.attributes.avatar.md"
-								/>
-                            </div>
-                            <div class="info">
-                                <b class="name">
-                                    {{ user.data.relationships.settings.data.attributes.first_name }} {{ user.data.relationships.settings.data.attributes.last_name }}
 
-                                    <ColorLabel v-if="this.config.subscriptionType === 'fixed'" :color="subscriptionColor">
-                                        {{ subscriptionStatus }}
-                                    </ColorLabel>
-                                </b>
-                                <span class="email">{{ user.data.attributes.email }}</span>
-                            </div>
-                        </div>
-                    </div>
+					<!--User thumbnail-->
+					<div class="flex items-center mb-3">
+
+						<!--Image input for replace avatar-->
+						<UserImageInput v-model="avatar" :avatar="user.data.relationships.settings.data.attributes.avatar.md" />
+
+						<!--User name & email-->
+						<div class="pl-4">
+							<b class="sm:text-lg text-md font-bold block sm:leading-6 leading-3">
+								{{ user.data.relationships.settings.data.attributes.first_name }} {{ user.data.relationships.settings.data.attributes.last_name }}
+
+								<ColorLabel v-if="config.subscriptionType === 'fixed'" :color="subscriptionColor">
+									{{ subscriptionStatus }}
+								</ColorLabel>
+							</b>
+							<span class="sm:text-sm text-xs text-gray-600">
+								{{ user.data.attributes.email }}
+							</span>
+						</div>
+					</div>
 
 					<CardNavigation :pages="pages" class="-mx-1" />
 				</div>
@@ -155,70 +155,9 @@
         },
         data() {
             return {
-                avatar: undefined,
+				avatar: undefined,
                 isLoading: false,
             }
-        },
-		created() {
-			//setTimeout(() => this.$openUpgradeOptions(), 300)
-		}
+        }
 	}
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-
-    .user-thumbnail {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-
-        .avatar {
-            margin-right: 20px;
-
-            img {
-                line-height: 0;
-                width: 62px;
-                height: 62px;
-                border-radius: 12px;
-                z-index: 1;
-                position: relative;
-            }
-        }
-
-        .info {
-
-            .name {
-                display: block;
-                @include font-size(17);
-                line-height: 1;
-            }
-
-            .email {
-                color: $text-muted;
-                @include font-size(14);
-            }
-        }
-    }
-
-    .message-box {
-        margin-top: -15px;
-    }
-
-    .dark {
-        .user-thumbnail {
-
-            .info {
-
-                .name {
-                    color: $dark_mode_text_primary;
-                }
-
-                .email {
-                    color: $dark_mode_text_secondary;
-                }
-            }
-        }
-    }
-</style>