vuefilemanager/resources/js/views/Profile.vue

<template>
    <div class="lg:flex md:h-screen md:overflow-hidden dark:bg-dark-background bg-light-background">
		<!--On Top of App Components-->
        <FilePreview />
		<Spotlight />

		<ConfirmPopup />

		<ConfirmPassword />

		<!--2FA popups-->
		<TwoFactorRecoveryCodesPopup />
		<TwoFactorQrSetupPopup />

		<!--Access Token Popup-->
		<CreatePersonalTokenPopup />

		<!--Payments Popup-->
		<SelectPlanSubscriptionPopup />
		<SelectSingleChargeMethodPopup />

		<SidebarNavigation />

		<!--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">

					<!--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>

				<!--Router Content-->
				<router-view :user="user" />
            </div>
            <div id="loader" v-if="isLoading">
                <Spinner></Spinner>
            </div>
        </div>
    </div>
</template>

<script>
	import MobileNavigation from "../components/Others/MobileNavigation";
	import SelectSingleChargeMethodPopup from "../components/Others/SelectSingleChargeMethodPopup";
	import SelectPlanSubscriptionPopup from "../components/Subscription/SelectPlanSubscriptionPopup";
	import ConfirmPopup from "../components/Others/Popup/ConfirmPopup";
	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 CreatePersonalTokenPopup from '/resources/js/components/Others/CreatePersonalTokenPopup'
	import TwoFactorQrSetupPopup from '/resources/js/components/Others/TwoFactorQrSetupPopup'
	import UserImageInput from '/resources/js/components/Others/UserImageInput'
	import SidebarNavigation from "../components/Sidebar/SidebarNavigation"
	import ColorLabel from '/resources/js/components/Others/ColorLabel'
	import Spinner from '/resources/js/components/FilesView/Spinner'
	import {mapGetters} from 'vuex'
	import CardNavigation from "../components/Admin/CardNavigation";
	import ConfirmPassword from "../components/Others/ConfirmPassword";
	import MobileNavigationToolbar from "./MobileNavigationToolbar";

	export default {
        name: 'Settings',
        components: {
			MobileNavigationToolbar,
			MobileNavigation,
			ConfirmPassword,
			SelectSingleChargeMethodPopup,
			SelectPlanSubscriptionPopup,
			ConfirmPopup,
			CardNavigation,
			FilePreview,
			Spotlight,
			TwoFactorRecoveryCodesPopup,
			CreatePersonalTokenPopup,
			TwoFactorQrSetupPopup,
			SidebarNavigation,
            UserImageInput,
            ColorLabel,
            Spinner,

        },
        computed: {
            ...mapGetters([
				'config',
            	'user',
			]),
            subscriptionStatus() {
                return this.user.data.relationships.subscription
					? this.$t('global.premium')
					: this.$t('global.free')
            },
            subscriptionColor() {
                return this.user.data.relationships.subscription
					? 'green'
					: 'purple'
            },
            canShowUpgradeWarning() {
                return this.config.storageLimit && this.user.data.attributes.storage.used > 95
            },
            canShowIncompletePayment() {
                return this.user.data.attributes.incomplete_payment
            },
			pages() {
				let list = [
					{
						title: this.$t('menu.profile'),
						route: 'Profile',
					},
					{
						title: this.$t('menu.password'),
						route: 'Password',
					},
					{
						title: this.$t('menu.storage'),
						route: 'Storage',
					},
				]

				// Push billing item if subscription is set
				if (['fixed', 'metered'].includes(this.config.subscriptionType)) {
					list.push({
						title: this.$t('Billing'),
						route: 'Billing',
					})
				}

				return list
			}
        },
        data() {
            return {
				avatar: undefined,
                isLoading: false,
            }
        }
	}
</script>