mobile toolbar implementation

resources/js/App.vue

@@ -146,7 +146,7 @@ export default {
 @import '/resources/sass/vuefilemanager/_mixins';
 
 .card {
-	@apply dark:bg-dark-foreground bg-white lg:p-6 p-4 rounded-xl lg:mb-6 mb-4
+	@apply dark:bg-dark-foreground bg-white p-6 rounded-xl lg:mb-6 mb-5
 }
 
 .widget-card {

resources/js/views/Admin.vue

@@ -16,6 +16,8 @@
         <!--Navigation Sidebar-->
         <SidebarNavigation/>
 
+		<MobileNavigationToolbar />
+
         <ContentSidebar>
 			<ContentGroup v-for="(menu, i) in nav" :title="menu.groupTitle" :slug="menu.groupTitle" :can-collapse="false">
 				<router-link v-for="(item, i) in menu.groupLinks" :key="i" :to="{name: item.route}" class="flex items-center py-2.5" :class="{'router-link-active': item.linkActivation && item.linkActivation.includes($router.currentRoute.fullPath.split('/')[2])}">
@@ -36,11 +38,12 @@
             </ContentGroup>
         </ContentSidebar>
 
-        <router-view class="lg:pl-0 pl-6 pr-6 w-full overflow-x-hidden relative lg:pt-6 pt-4" />
+        <router-view class="md:px-6 px-2.5 w-full overflow-x-hidden relative lg:pt-6" />
     </div>
 </template>
 
 <script>
+	import MobileNavigationToolbar from "./MobileNavigationToolbar";
     import FilePreview from '/resources/js/components/FilePreview/FilePreview'
 	import Spotlight from '/resources/js/components/Spotlight/Spotlight'
     import { DollarSignIcon, HelpCircleIcon, RefreshCwIcon, UsersIcon, SettingsIcon, FileTextIcon, CreditCardIcon, DatabaseIcon, BoxIcon, MonitorIcon, GlobeIcon } from 'vue-feather-icons'
@@ -158,6 +161,7 @@
 			}
         },
         components: {
+			MobileNavigationToolbar,
 			FilePreview,
 			Spotlight,
             SidebarNavigation,

resources/js/views/MobileNavigationToolbar.vue

@@ -0,0 +1,30 @@
+<template>
+	<div class="flex text-center py-5 px-4 w-full justify-between items-center z-20 lg:hidden block">
+
+		<!-- Go back-->
+		<div @click="$router.back()" class="go-back-button flex text-left items-center">
+			<chevron-left-icon size="17" class="transform align-middle mr-2 -ml-1" />
+
+			<!--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;">
+				{{ $t('Profile') }}
+			</div>
+		</div>
+
+		<!--More Actions-->
+		<div @click="$showMobileMenu('user-navigation')" class="pr-2">
+			<menu-icon size="17" />
+		</div>
+	</div>
+</template>
+<script>
+    import {MenuIcon, ChevronLeftIcon } from 'vue-feather-icons'
+
+	export default {
+		name: 'MobileNavigationToolbar',
+		components: {
+			ChevronLeftIcon,
+			MenuIcon,
+		}
+	}
+</script>

resources/js/views/Profile.vue

@@ -21,7 +21,12 @@
 
 		<SidebarNavigation />
 
-        <div v-if="user" class="px-6 w-full overflow-x-hidden relative pt-6 xl:max-w-screen-lg md:max-w-4xl mx-auto">
+		<!--Navigations-->
+        <MobileNavigation />
+
+		<MobileNavigationToolbar />
+
+        <div v-if="user" class="md:px-6 px-2.5 w-full overflow-x-hidden relative lg:pt-6 xl:max-w-screen-lg md:max-w-4xl mx-auto">
             <div v-if="! isLoading" id="page-content">
 
 				<div class="card shadow-card sticky top-0 z-10" style="padding-bottom: 0">
@@ -61,11 +66,11 @@
 </template>
 
 <script>
+	import MobileNavigation from "../components/Others/MobileNavigation";
 	import SelectSingleChargeMethodPopup from "../components/Others/SelectSingleChargeMethodPopup";
-	import ButtonBase from "../components/FilesView/ButtonBase";
 	import SelectPlanSubscriptionPopup from "../components/Subscription/SelectPlanSubscriptionPopup";
 	import ConfirmPopup from "../components/Others/Popup/ConfirmPopup";
-    import FilePreview from '/resources/js/components/FilePreview/FilePreview'
+	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'
@@ -76,16 +81,17 @@
 	import Spinner from '/resources/js/components/FilesView/Spinner'
 	import {mapGetters} from 'vuex'
 	import CardNavigation from "../components/Admin/CardNavigation";
-	import {events} from "../bus";
 	import ConfirmPassword from "../components/Others/ConfirmPassword";
+	import MobileNavigationToolbar from "./MobileNavigationToolbar";
 
 	export default {
         name: 'Settings',
         components: {
+			MobileNavigationToolbar,
+			MobileNavigation,
 			ConfirmPassword,
 			SelectSingleChargeMethodPopup,
 			SelectPlanSubscriptionPopup,
-			ButtonBase,
 			ConfirmPopup,
 			CardNavigation,
 			FilePreview,

resources/js/views/User/Settings.vue

@@ -1,42 +1,5 @@
 <template>
     <div>
-
-		<div class="card shadow-card">
-			<FormLabel>
-				{{ $t('Appearance') }}
-			</FormLabel>
-
-			<AppInputText :title="$t('Theme Mode')" :description="$t('Set your theme mode on dark, light or based on your system settings.')" :is-last="! $isApple()">
-				<div class="flex items-center md:space-x-6 space-x-4">
-					<div
-						v-for="(theme, i) in themeSetup"
-						:key="i"
-						:title="theme.title"
-						@click="$store.dispatch('toggleThemeMode', theme.type)"
-						class="w-full rounded-xl shadow-lg overflow-hidden cursor-pointer border-3"
-						:class="{'border-theme': config.defaultThemeMode === theme.type, 'border-transparent': config.defaultThemeMode !== theme.type}"
-					>
-						<img :src="theme.image" :alt="theme.type">
-					</div>
-				</div>
-            </AppInputText>
-
-			<AppInputText v-if="$isApple()" :title="$t('Default Emojis')" :description="$t('Set your default emojis for your folder custom icons. You can set Twemoji or default Apple emojis.')" :is-last="true">
-				<div class="flex items-center md:space-x-6 space-x-4">
-					<div
-						v-for="(emoji, i) in emojiSetup"
-						:key="i"
-						:title="emoji.title"
-						@click="$store.dispatch('toggleEmojiType', emoji.type)"
-						class="w-full rounded-xl shadow-lg overflow-hidden cursor-pointer border-3"
-						:class="{'border-theme': currentEmojis === emoji.type, 'border-transparent': currentEmojis !== emoji.type}"
-					>
-						<img :src="isDarkMode ? emoji.image.dark : emoji.image.light" :alt="emoji.type">
-					</div>
-				</div>
-			</AppInputText>
-		</div>
-
         <div class="card shadow-card">
             <FormLabel>
 				{{ $t('Account Settings') }}
@@ -73,6 +36,42 @@
             </AppInputText>
         </div>
 
+		<div class="card shadow-card">
+			<FormLabel>
+				{{ $t('Appearance') }}
+			</FormLabel>
+
+			<AppInputText :title="$t('Theme Mode')" :description="$t('Set your theme mode on dark, light or based on your system settings.')" :is-last="! $isApple()">
+				<div class="md:flex items-center md:space-x-6 md:space-x-4 md:space-y-0 space-y-4">
+					<div
+						v-for="(theme, i) in themeSetup"
+						:key="i"
+						:title="theme.title"
+						@click="$store.dispatch('toggleThemeMode', theme.type)"
+						class="w-full rounded-xl shadow-lg overflow-hidden cursor-pointer border-3"
+						:class="{'border-theme': config.defaultThemeMode === theme.type, 'border-transparent': config.defaultThemeMode !== theme.type}"
+					>
+						<img :src="theme.image" :alt="theme.type">
+					</div>
+				</div>
+            </AppInputText>
+
+			<AppInputText v-if="$isApple()" :title="$t('Default Emojis')" :description="$t('Set your default emojis for your folder custom icons. You can set Twemoji or default Apple emojis.')" :is-last="true">
+				<div class="md:flex items-center md:space-x-6 md:space-x-4 md:space-y-0 space-y-4">
+					<div
+						v-for="(emoji, i) in emojiSetup"
+						:key="i"
+						:title="emoji.title"
+						@click="$store.dispatch('toggleEmojiType', emoji.type)"
+						class="w-full rounded-xl shadow-lg overflow-hidden cursor-pointer border-3"
+						:class="{'border-theme': currentEmojis === emoji.type, 'border-transparent': currentEmojis !== emoji.type}"
+					>
+						<img :src="isDarkMode ? emoji.image.dark : emoji.image.light" :alt="emoji.type">
+					</div>
+				</div>
+			</AppInputText>
+		</div>
+
         <div class="card shadow-card">
             <FormLabel>
                 {{ $t('user_settings.title_billing') }}