cv-site/src/lib/elements/MenuMobile.svelte

<script lang="ts">
	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
	import * as svgIcons from '@fortawesome/free-solid-svg-icons';
	import * as svgCore from '@fortawesome/fontawesome-svg-core';
	import type { CurrentLanguage, LanguagePair, MenuEntry } from '$lib/types';
	export let currentLanguage: CurrentLanguage = 'it';
	svgCore.library.add(svgIcons.faBars);

	svgCore.library.add(svgIcons.faHome);
	svgCore.library.add(svgIcons.faUserTie);
	svgCore.library.add(svgIcons.faGraduationCap);
	svgCore.library.add(svgIcons.faUserClock);
	svgCore.library.add(svgIcons.faAddressCard);
	svgCore.library.add(svgIcons.faBars);
	svgCore.library.add(svgIcons.faX);
	svgCore.library.add(svgIcons.faGlobeEurope);

	const barsLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'bars' };
	const globeLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'globe-europe' };
	const homeLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'home' };
	const userTieLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'user-tie' };
	const graduationCapLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'graduation-cap' };
	const userClockLookUp: svgCore.IconLookup = { prefix: 'fas', iconName: 'user-clock' };
	const addressCardLookUp: svgCore.IconLookup = { prefix: 'fas', iconName: 'address-card' };
	const xLookUp: svgCore.IconLookup = { prefix: 'fas', iconName: 'x' };

	const homeIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(homeLookup);
	const userTieDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(userTieLookup);
	const graduationDefinition: svgCore.IconDefinition =
		svgCore.findIconDefinition(graduationCapLookup);
	const userClockDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(userClockLookUp);
	const addressCardDefinition: svgCore.IconDefinition =
		svgCore.findIconDefinition(addressCardLookUp);
	const barsDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(barsLookup);
	const xDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(xLookUp);
	const globeDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(globeLookup);

	const menu: Record<MenuEntry, LanguagePair> = {
		home: { it: 'Home', en: 'Home' },
		job: { it: 'Esperienze', en: 'Experiences' },
		school: { it: 'Formazione', en: 'Training' },
		blog: { it: 'Blog', en: 'Blog' },
		portfolio: { it: 'Portfolio', en: 'Portfolio' }
	};
	const menuButton: Record<number, LanguagePair> = {
		1: { it: 'Apri il menu', en: 'Open menu' },
		0: { it: 'Chiudi il menu', en: 'Close menu' }
	};
	let menuContainer: Element;
	let menuOpen = false;

	function setOpen() {
		menuOpen = !menuOpen;
		const animation = menuContainer.animate([{ height: '0px' }, { height: '360px' }], {
			duration: 100,
			fill: 'both'
		});
		if (menuOpen) animation.play();
		else animation.reverse();
	}
</script>

<div class="menu-container">
	<div class="header">
		<button on:click={setOpen} tabindex="0" title={menuButton[Number(menuOpen)][currentLanguage]}>
			{#if !menuOpen}<FontAwesomeIcon icon={barsDefinition} size="lg" />
			{:else}
				<FontAwesomeIcon icon={xDefinition} size="lg" />
			{/if}
		</button>
		<div class="title">
			<h1>Gianmarco Pettinato</h1>
			<h2>Software developer</h2>
		</div>
	</div>
	<ul class="wrapper" bind:this={menuContainer}>
		<li>
			<a class="menu-element" href="#top">
				<i>
					<FontAwesomeIcon icon={homeIconDefinition} />
				</i>
				<span>{menu.home[currentLanguage]}</span></a
			>
		</li>
		<li>
			<a class="menu-element" href="#jobs"
				><i>
					<FontAwesomeIcon icon={userTieDefinition} />
				</i><span>{menu.job[currentLanguage]}</span></a
			>
		</li>
		<li>
			<a class="menu-element" href="#training"
				><i>
					<FontAwesomeIcon icon={graduationDefinition} />
				</i><span>{menu.school[currentLanguage]}</span></a
			>
		</li>
		<li>
			<a class="menu-element" href="#portfolio"
				><i>
					<FontAwesomeIcon icon={userClockDefinition} />
				</i><span>{menu.portfolio[currentLanguage]}</span></a
			>
		</li>
		<!-- <li>
			<a class="menu-element" href="/blog"
				><i>
					<FontAwesomeIcon icon={addressCardDefinition} />
				</i><span>{menu.blog[currentLanguage]}</span></a
			>
		</li> -->
	</ul>
</div>

<style lang="scss">
	@import '../../app.scss';
	.header {
		display: flex;
		width: 100%;
		padding-top: 10px;
		height: 10%;
		justify-content: space-between;
		align-items: center;
		button {
			height: 80px;
			width: 80px;
			border: none;
			font-size: 40px;
			background: none;
		}
	}

	.menu-container {
		margin: 0;
		padding: 0;
		width: 80%;
		margin: auto;
	}
	ul {
		list-style-type: none;
		overflow: hidden;
		margin: 0;
		padding: 0;
		margin: auto;
	}
	a {
		padding-left: 10px;
		display: flex;
		justify-content: start;
		align-items: center;
		background-color: $basecolor2;
		font-size: larger;
		height: 60px;
		i {
			margin-right: 10%;
		}
	}
	li {
		border-left: 1px solid;
		border-right: 1px solid;
		border-bottom: 1px solid;
	}
	li:first-of-type {
		border-top: 1px solid;
	}

	a:hover {
		background-color: $default-active-color;
		outline: solid 1px;
	}
	.wrapper {
		height: 0px;
	}
</style>