fixing header

package.json

@@ -4,6 +4,7 @@
 	"scripts": {
 		"update-model": "json2ts ./src/lib/model/schemas/job.json ./src/lib/model/job.ts && json2ts ./src/lib/model/schemas/logo.json ./src/lib/model/logo.ts",
 		"dev": "vite dev",
+		"dev-exposed": "vite dev --host",
 		"build": "vite build",
 		"postbuild": "npx svelte-sitemap --domain https://pettinato.eu",
 		"preview": "vite preview",
@@ -50,4 +51,4 @@
 		"svelte-sitemap": "^2.6.0",
 		"typesafe-i18n": "^5.20.0"
 	}
-}
+}

src/lib/elements/MenuMobile.svelte

@@ -51,7 +51,7 @@
 
 	function setOpen() {
 		menuOpen = !menuOpen;
-		const animation = menuContainer.animate([{ height: '0px' }, { height: '360px' }], {
+		const animation = menuContainer.animate([{ height: '0px' }, { height: '240px' }], {
 			duration: 100,
 			fill: 'both'
 		});
@@ -61,12 +61,14 @@
 </script>
 
 <div class="menu-container">
-	<div class="header">
+	<div class="header {menuOpen ? 'borderclass' : ''}">
 		<button on:click={setOpen} tabindex="0" title={menuButton[Number(menuOpen)][currentLanguage]}>
-			{#if !menuOpen}<FontAwesomeIcon icon={barsDefinition} size="lg" />
+			<i>
-			{:else}
+				{#if !menuOpen}<FontAwesomeIcon icon={barsDefinition} />
-				<FontAwesomeIcon icon={xDefinition} size="lg" />
+				{:else}
-			{/if}
+					<FontAwesomeIcon icon={xDefinition} />
+				{/if}
+			</i>
 		</button>
 		<div class="title">
 			<h1>Gianmarco Pettinato</h1>
@@ -75,7 +77,7 @@
 	</div>
 	<ul class="wrapper" bind:this={menuContainer}>
 		<li>
-			<a class="menu-element" href="#top">
+			<a on:click={setOpen} class="menu-element" href="#top">
 				<i>
 					<FontAwesomeIcon icon={homeIconDefinition} />
 				</i>
@@ -83,28 +85,28 @@
 			>
 		</li>
 		<li>
-			<a class="menu-element" href="#jobs"
+			<a on:click={setOpen} class="menu-element" href="#jobs"
 				><i>
 					<FontAwesomeIcon icon={userTieDefinition} />
 				</i><span>{menu.job[currentLanguage]}</span></a
 			>
 		</li>
 		<li>
-			<a class="menu-element" href="#training"
+			<a on:click={setOpen} class="menu-element" href="#training"
 				><i>
 					<FontAwesomeIcon icon={graduationDefinition} />
 				</i><span>{menu.school[currentLanguage]}</span></a
 			>
 		</li>
 		<li>
-			<a class="menu-element" href="#portfolio"
+			<a on:click={setOpen} class="menu-element" href="#portfolio"
 				><i>
 					<FontAwesomeIcon icon={userClockDefinition} />
 				</i><span>{menu.portfolio[currentLanguage]}</span></a
 			>
 		</li>
 		<!-- <li>
-			<a class="menu-element" href="/blog"
+			<a on:click={setOpen} class="menu-element" href="/blog"
 				><i>
 					<FontAwesomeIcon icon={addressCardDefinition} />
 				</i><span>{menu.blog[currentLanguage]}</span></a
@@ -115,26 +117,50 @@
 
 <style lang="scss">
 	@import '../../app.scss';
+	.borderclass {
+		border-bottom: solid $border-hover-color 2px;
+		border-radius: $default-border-radius;
+	}
+
 	.header {
 		display: flex;
-		width: 100%;
+		justify-content: space-evenly;
-		padding-top: 10px;
-		height: 10%;
-		justify-content: space-between;
 		align-items: center;
 		button {
-			height: 80px;
-			width: 80px;
 			border: none;
-			font-size: 40px;
 			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;
-		width: 80%;
 		margin: auto;
 	}
 	ul {
@@ -145,31 +171,36 @@
 		margin: auto;
 	}
 	a {
-		padding-left: 10px;
 		display: flex;
-		justify-content: start;
+		justify-content: space-evenly;
 		align-items: center;
 		background-color: $basecolor2;
-		font-size: larger;
+		font-size: 20px;
 		height: 60px;
+		border-bottom: solid $border-hover-color 2px;
+		border-radius: 0px 0px $default-border-radius $default-border-radius;
 		i {
-			margin-right: 10%;
+			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;
 		}
-	}
-	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;
+		border-radius: 0px 0px $default-border-radius $default-border-radius;
 	}
 </style>

src/routes/+page.svelte

@@ -52,7 +52,7 @@
 	<!-- svelte-ignore a11y-invalid-attribute -->
 	<LanguageSelector bind:currentLanguage />
 	<Menu {currentLanguage} />
-	<div id="home" class="default test">
+	<div id="home" class="default">
 		<AboutMe {currentLanguage} />
 	</div>
 	<div id="jobs" class="default">

static/photo_2023-05-27_14-07-56.webp:Zone.Identifier

@@ -1,4 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=https://cloudconvert.com/
-HostUrl=https://storage.cloudconvert.com/tasks/d2e68ca0-c4ea-4d5c-a821-99cb9bc0e2a1/photo_2023-05-27_14-07-56.webp?AWSAccessKeyId=cloudconvert-production&Expires=1685275786&Signature=e0WAf7JckXFaWlpmjR2VoxHuGsQ%3D&response-content-disposition=attachment%3B%20filename%3D%22photo_2023-05-27_14-07-56.webp%22&response-content-type=image%2Fwebp

vite.config.ts

@@ -1,5 +1,5 @@
 import { sveltekit } from '@sveltejs/kit/vite';
-import type { UserConfig } from 'vite';
+import type { UserConfig, defineConfig } from 'vite';
 
 const config: UserConfig = {
 	plugins: [sveltekit()]