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: '240px' }], {
			duration: 100,
			fill: 'both'
		});
		if (menuOpen) animation.play();
		else animation.reverse();
	}
</script>

<div class="menu-container">
	<div class="header {menuOpen ? 'borderclass' : ''}">
		<button on:click={setOpen} tabindex="0" title={menuButton[Number(menuOpen)][currentLanguage]}>
			<i>
				{#if !menuOpen}<FontAwesomeIcon icon={barsDefinition} />
				{:else}
					<FontAwesomeIcon icon={xDefinition} />
				{/if}
			</i>
		</button>
		<div class="title">
			<h1>Gianmarco Pettinato</h1>
			<h2>Software developer</h2>
		</div>
	</div>
	<ul class="wrapper" bind:this={menuContainer}>
		<li>
			<a on:click={setOpen} class="menu-element" href="#top">
				<i>
					<FontAwesomeIcon icon={homeIconDefinition} />
				</i>
				<span>{menu.home[currentLanguage]}</span></a
			>
		</li>
		<li>
			<a on:click={setOpen} class="menu-element" href="#jobs"
				><i>
					<FontAwesomeIcon icon={userTieDefinition} />
				</i><span>{menu.job[currentLanguage]}</span></a
			>
		</li>
		<li>
			<a on:click={setOpen} class="menu-element" href="#training"
				><i>
					<FontAwesomeIcon icon={graduationDefinition} />
				</i><span>{menu.school[currentLanguage]}</span></a
			>
		</li>
		<li>
			<a on:click={setOpen} class="menu-element" href="#portfolio"
				><i>
					<FontAwesomeIcon icon={userClockDefinition} />
				</i><span>{menu.portfolio[currentLanguage]}</span></a
			>
		</li>
		<!-- <li>
			<a on:click={setOpen} 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';
	.borderclass {
		border-bottom: solid $border-hover-color 2px;
		border-radius: $default-border-radius;
	}

	.header {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		button {
			border: none;
			background: none;
			margin-left: 3rem;
			height: 50px;
			width: 50px;
			i {
				text-align: center;
				height: 50px;
				width: 50px;
				border: none;
				font-size: 30px;
				background: none;
			}
		}
		.title {
			justify-content: center;
			text-align: right;
			margin-left: auto;
			margin-right: 3rem;
			h1,
			h2 {
				margin-top: 0.5px;
				margin-bottom: 0.5rem;
				margin-left: 2.5rem;
				@media (min-width: 450px) {
					margin-left: unset;
				}
			}
		}
	}

	.menu-container {
		margin: 0;
		padding: 0;
		margin: auto;
	}
	ul {
		list-style-type: none;
		overflow: hidden;
		margin: 0;
		padding: 0;
		margin: auto;
	}
	a {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		background-color: $basecolor2;
		font-size: 20px;
		height: 60px;
		border-bottom: solid $border-hover-color 2px;
		border-radius: 0px 0px $default-border-radius $default-border-radius;
		i {
			text-align: center;
			height: 50px;
			width: 50px;
			border: none;
			font-size: 30px;
			background: none;
			margin-left: 3rem;
		}
		span {
			justify-content: center;
			text-align: right;
			margin-left: auto;
			margin-right: 3rem;
		}
	}

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