<script lang="ts">
	import { scrollto } from 'svelte-scrollto';
	export let currentLanguage = 'it';
	export const menu = {
		home: { it: 'Home', en: 'Home' },
		job: { it: 'Esperienze', en: 'Experiences' },
		school: { it: 'Formazione', en: 'Training' },
		contacts: { it: 'Contatti', en: 'Contacts' },
		portfolio: { it: 'Portfolio', en: 'Portfolio' }
	};
</script>

<div class="div-menu">
	<div class="wrapper">
		<a
			use:scrollto={{ element: '#home', offset: -70 }}
			href="#home"
			alt={menu.home[currentLanguage]}
		>
			<span class="hide">{menu.home[currentLanguage]}</span><i class="fas fa-home" /></a
		>

		<a
			use:scrollto={{ element: '#jobs', offset: -50 }}
			class="menu-element"
			href="#jobs"
			alt={menu.job[currentLanguage]}
			><span class="hide">{menu.job[currentLanguage]}</span><i class="fas fa-user-tie" /></a
		>

		<a
			use:scrollto={{ element: '#training', offset: -50 }}
			class="menu-element"
			href="#training"
			alt={menu.school[currentLanguage]}
			><span class="hide">{menu.school[currentLanguage]}</span><i
				class="fas fa-graduation-cap"
			/></a
		>

		<a
			use:scrollto={{ element: '#portfolio', offset: -50 }}
			class="menu-element"
			href="#portfolio"
			alt={menu.portfolio[currentLanguage]}
			><span class="hide">{menu.portfolio[currentLanguage]}</span><i class="fas fa-user-clock" /></a
		>

		<a
			use:scrollto={{ element: '#contacts', offset: -50 }}
			class="menu-element"
			href="#contacts"
			alt={menu.contacts[currentLanguage]}
			><span class="hide">{menu.contacts[currentLanguage]}</span><i
				class="fas fa-address-card"
			/></a
		>
	</div>
</div>

<style lang="scss">
	@import './static/elements.scss';
	@import './static/breakpoints.scss';
	@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
	.div-menu {
		width: 90%;
		max-width: 1024px;
	}
	.wrapper {
		width: 100%;
		display: flex;
	}
	a {
		border: solid black;
		width: 15%;
		font-size: 20px;
		margin: auto;
		text-align: center;
	}
	@media screen and (max-width: $min-tablet) {
		.hide {
			display: none;
		}
	}
</style>
