fixing header

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,7 +61,7 @@
 </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" />
 			{:else}
@@ -75,7 +75,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 +83,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 +115,33 @@
 
 <style lang="scss">
 	@import '../../app.scss';
+	.borderclass {
+		border-bottom: solid $border-hover-color 2px;
+		border-radius: $default-border-radius;
+	}
+
 	.header {
 		display: flex;
-		width: 100%;
-		padding-top: 10px;
-		height: 10%;
-		justify-content: space-between;
+		justify-content: left;
 		align-items: center;
 		button {
-			height: 80px;
-			width: 80px;
+			text-align: center;
+			height: 50px;
+			width: 50px;
 			border: none;
-			font-size: 40px;
+			font-size: 30px;
 			background: none;
 		}
+		.title {
+			justify-content: center;
+			text-align: right;
+			margin: auto;
+		}
 	}
 
 	.menu-container {
 		margin: 0;
 		padding: 0;
-		width: 80%;
 		margin: auto;
 	}
 	ul {
@@ -145,31 +152,27 @@
 		margin: auto;
 	}
 	a {
-		padding-left: 10px;
 		display: flex;
-		justify-content: start;
+		justify-content: left;
 		align-items: center;
 		background-color: $basecolor2;
-		font-size: larger;
+		font-size: 18px;
 		height: 60px;
+		border-bottom: solid $border-hover-color 2px;
+		border-radius: 0px 0px $default-border-radius $default-border-radius;
 		i {
-			margin-right: 10%;
+			width: 50px;
+			text-align: center;
 		}
+		span {
 		}
-	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>

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