From 6cb20a4d2c23b01fdd9277feb36bf8ebb304184f Mon Sep 17 00:00:00 2001
From: William Torre <pro.williamtoro@gmail.com>
Date: Tue, 24 Sep 2024 00:13:56 -0500
Subject: [PATCH] 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    | 21 ++++++++++++++++-----
 src/components/header/HeaderStyle.css |  7 ++++++-
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/header/Header.astro b/src/components/header/Header.astro
index de84235..1affd56 100644
--- a/src/components/header/Header.astro
+++ b/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>
 
diff --git a/src/components/header/HeaderStyle.css b/src/components/header/HeaderStyle.css
index 4ab9daf..3de7ab8 100644
--- a/src/components/header/HeaderStyle.css
+++ b/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;
+  }
+
 }