A div is created to contain the closing of the modal when clicking on…

… a section, A single color background without transparency is created, a section is used to shape it into columns for the new div that contains the navigation elements

src/components/header/Header.astro

@@ -3,13 +3,15 @@ import { Icon } from 'astro-icon/components'
 import './HeaderStyle.css';
 import ThemeMode from '../themeMode/ThemeMode.astro';
 
+const URL_IMAGE = import.meta.env.PUBLIC_URL_IMAGE_PROFILE;
+
 ---
 
 <header class="header-style">
 	<div class="items-nav">
 		<img 
 			class="profil-photo"
-			src="profile-photo.jpg"
+			src={URL_IMAGE}
 			alt="William photo"
 		/>
 		<nav class="nav-style">
@@ -33,10 +35,12 @@ import ThemeMode from '../themeMode/ThemeMode.astro';
 				size={70}
 				id="menuToggleClose"
 			/>
-			<a href="#">Home</a>
-			<a href="#about">About</a>
-			<a href="#projects">Projects</a>
-			<a href="#contact">Contact</a>
+			<div class="menu-section" id="menuSection">
+				<a href="#">Home</a>
+				<a href="#about">About</a>
+				<a href="#projects">Projects</a>
+				<a href="#contact">Contact</a>
+			</div>
 		</div>
 	</div>
 </header>
@@ -45,6 +49,7 @@ import ThemeMode from '../themeMode/ThemeMode.astro';
 	const buttonToggleOpen = document.getElementById('menuToggleOpen');
 	const buttonToggleClose = document.getElementById('menuToggleClose');
 	const menu = document.getElementById('menuItems');
+	const menuSection = document.getElementById('menuSection');
 
 	buttonToggleOpen?.addEventListener('click', () => {
 		if(menu) {
@@ -57,6 +62,12 @@ import ThemeMode from '../themeMode/ThemeMode.astro';
 			menu.style.display = 'none';
 		}
 	});
+
+	menuSection?.addEventListener('click', () => {
+		if(menu){
+			menu.style.display = 'none';
+		}
+	});
 
 </script>
 

src/components/header/HeaderStyle.css

@@ -86,7 +86,7 @@ a:hover {
     inset-inline-start: 0;
     inline-size: 100%; 
     block-size: 100%; 
-    background-color: rgba(var(--color-primary), 0.5); 
+    background: var(--color-primary);
     display: none; 
     place-content: center; 
     list-style-type: none; 
@@ -107,4 +107,9 @@ a:hover {
     color: white; 
   }
 
+  .menu-section{
+    display: flex;
+    flex-direction: column;
+  }
+
 }