<template>
	<div :class="applicationClassList"
		 :data-lang="language">
		<navigation-bar />
		<Nuxt />
		<contact-btn />
		<app-footer />
	</div>
</template>
<script>
import appFooter from "~/components/shared/footer/app_footer.vue";
import navigationBar from "~/components/shared/navigation/navigation_bar.vue";
import contactBtn from "~/components/shared/contact/floatedContactBtn.vue";

export default {
	name: "Default",
	components: {
		appFooter,
		navigationBar,
		contactBtn
	},
	computed: {
		applicationClassList() {
			const lang = this.language;
			let classList = {
				app: true
			};
			classList[`app--${lang}`] = true;
			return classList;
		},
		language() {
			return this.$i18n.localeProperties.code || "fa";
		}
	}
};
</script>
<style lang="scss">
@import "~@/assets/scss/fonts/_index.scss";

* {
	box-sizing: border-box;
}

html {
	background: $color-white--dark;
	font-family: $font-family;
	font-size: $font-size;
	min-height: 100vh;
}

body {
	margin: 0;
	min-height: 100vh;
	padding: 0;
}

.app {
	direction: rtl;
	display: flex;
	flex-direction: column;
	justify-content: start;
	min-height: 100vh;
	padding-top: $navigation-bar-height;

	&--en {
		direction: ltr;
		font-family: $font-family-en;
	}
}
</style>