Merge pull request #36 from Tudwall/feature/link-pages

Feature/link pages
Tudwall · Dec 12, 2024 · ac09dfb · ac09dfb
2 parents 39488d0 + 569d3be
commit ac09dfb
Show file tree

Hide file tree

Showing 11 changed files with 249 additions and 76 deletions.
diff --git a/collection.html b/collection.html
@@ -64,15 +64,28 @@
 						aria-label="Barre de recherche"
 						class="menu-icon search-icon"
 					/>
-					<a
-						href="#"
-						class="notification-menu"
-						aria-label="Menu des notifications"
-						><img src="assets/icons/Notification-bell.svg" class="menu-icon"
-					/></a>
-					<a href="login.html" class="account-menu" aria-label="Menu du compte"
-						><img src="assets/icons/User.svg" class="menu-icon"
-					/></a>
+
+					<div class="dropdown">
+						<img
+							src="assets/icons/Notification-bell.svg"
+							class="menu-icon"
+							id="notification-icon"
+						/>
+						<div id="notification-dropdown" class="dropdown-content">
+							<p>Aucune notification</p>
+						</div>
+					</div>
+
+					<div class="dropdown">
+						<img src="assets/icons/User.svg" class="menu-icon" id="user-icon" />
+						<div id="user-dropdown" class="dropdown-content">
+							<a href="profile.html">Profil</a>
+							<a href="collection.html">Collection</a>
+							<a href="wishlist.html">Liste de souhait</a>
+							<a href="preferences.html">Préférences</a>
+							<a href="#">Se déconnecter</a>
+						</div>
+					</div>
 				</div>
 			</div>
 			<nav>
@@ -137,5 +150,6 @@ <h2>Collection</h2>
 		<footer>
 			<div class="lines"></div>
 		</footer>
+		<script src="js/buttons.js"></script>
 	</body>
 </html>
diff --git a/home.html b/home.html
@@ -64,15 +64,28 @@
 						aria-label="Barre de recherche"
 						class="menu-icon search-icon"
 					/>
-					<a
-						href="#"
-						class="notification-menu"
-						aria-label="Menu des notifications"
-						><img src="assets/icons/Notification-bell.svg" class="menu-icon"
-					/></a>
-					<a href="login.html" class="account-menu" aria-label="Menu du compte"
-						><img src="assets/icons/User.svg" class="menu-icon"
-					/></a>
+
+					<div class="dropdown">
+						<img
+							src="assets/icons/Notification-bell.svg"
+							class="menu-icon"
+							id="notification-icon"
+						/>
+						<div id="notification-dropdown" class="dropdown-content">
+							<p>Aucune notification</p>
+						</div>
+					</div>
+
+					<div class="dropdown">
+						<img src="assets/icons/User.svg" class="menu-icon" id="user-icon" />
+						<div id="user-dropdown" class="dropdown-content">
+							<a href="profile.html">Profil</a>
+							<a href="collection.html">Collection</a>
+							<a href="wishlist.html">Liste de souhait</a>
+							<a href="preferences.html">Préférences</a>
+							<a href="#">Se déconnecter</a>
+						</div>
+					</div>
 				</div>
 			</div>
 			<nav>
@@ -152,5 +165,6 @@ <h2><a href="#">Ça pourrait vous intéresser ></a></h2>
 		<footer>
 			<div class="lines"></div>
 		</footer>
+		<script src="js/buttons.js"></script>
 	</body>
 </html>
diff --git a/index.html b/index.html
@@ -64,15 +64,28 @@
 						aria-label="Barre de recherche"
 						class="menu-icon search-icon"
 					/>
-					<a
-						href="#"
-						class="notification-menu"
-						aria-label="Menu des notifications"
-						><img src="assets/icons/Notification-bell.svg" class="menu-icon"
-					/></a>
-					<a href="login.html" class="account-menu" aria-label="Menu du compte"
-						><img src="assets/icons/User.svg" class="menu-icon"
-					/></a>
+
+					<div class="dropdown">
+						<img
+							src="assets/icons/Notification-bell.svg"
+							class="menu-icon"
+							id="notification-icon"
+						/>
+						<div id="notification-dropdown" class="dropdown-content">
+							<p>Aucune notification</p>
+						</div>
+					</div>
+
+					<div class="dropdown">
+						<img src="assets/icons/User.svg" class="menu-icon" id="user-icon" />
+						<div id="user-dropdown" class="dropdown-content">
+							<a href="profile.html">Profil</a>
+							<a href="collection.html">Collection</a>
+							<a href="wishlist.html">Liste de souhait</a>
+							<a href="preferences.html">Préférences</a>
+							<a href="#">Se déconnecter</a>
+						</div>
+					</div>
 				</div>
 			</div>
 			<nav>
@@ -96,13 +109,16 @@
 				Lorem ipsum dolor sit amet consectetur. Volutpat vestibulum nunc duis
 				ornare congue sit. Nec vitae et feugiat.
 			</p>
-			<button class="cta"><a href="signup.html">Rejoins-nous !</a></button>
+			<a href="signup.html">
+				<button class="cta" id="cta-btn">Rejoins-nous !</button>
+			</a>
 		</main>
 
 		<footer>
 			<div class="line yellow"></div>
 			<div class="line red"></div>
 			<div class="line blue"></div>
 		</footer>
+		<script src="js/buttons.js"></script>
 	</body>
 </html>
diff --git a/js/buttons.js b/js/buttons.js
@@ -0,0 +1,27 @@
+const userIcon = document.getElementById("user-icon");
+
+userIcon.addEventListener("click", () => {
+	document.getElementById("user-dropdown").classList.toggle("show");
+});
+
+const notifIcon = document.getElementById("notification-icon");
+
+notifIcon.addEventListener("click", () => {
+	document.getElementById("notification-dropdown").classList.toggle("show");
+});
+
+window.addEventListener("click", (e) => {
+	if (
+		!e.target.matches("#user-icon") &&
+		!e.target.matches("#notification-icon")
+	) {
+		let dropdowns = document.getElementsByClassName("dropdown-content");
+		console.log(dropdowns);
+		for (let i = 0; i < dropdowns.length; i++) {
+			let openDropdown = dropdowns[i];
+			if (openDropdown.classList.contains("show")) {
+				openDropdown.classList.remove("show");
+			}
+		}
+	}
+});
diff --git a/login.html b/login.html
@@ -63,15 +63,28 @@
 						aria-label="Barre de recherche"
 						class="menu-icon search-icon"
 					/>
-					<a
-						href="#"
-						class="notification-menu"
-						aria-label="Menu des notifications"
-						><img src="assets/icons/Notification-bell.svg" class="menu-icon"
-					/></a>
-					<a href="login.html" class="account-menu" aria-label="Menu du compte"
-						><img src="assets/icons/User.svg" class="menu-icon"
-					/></a>
+
+					<div class="dropdown">
+						<img
+							src="assets/icons/Notification-bell.svg"
+							class="menu-icon"
+							id="notification-icon"
+						/>
+						<div id="notification-dropdown" class="dropdown-content">
+							<p>Aucune notification</p>
+						</div>
+					</div>
+
+					<div class="dropdown">
+						<img src="assets/icons/User.svg" class="menu-icon" id="user-icon" />
+						<div id="user-dropdown" class="dropdown-content">
+							<a href="profile.html">Profil</a>
+							<a href="collection.html">Collection</a>
+							<a href="wishlist.html">Liste de souhait</a>
+							<a href="preferences.html">Préférences</a>
+							<a href="#">Se déconnecter</a>
+						</div>
+					</div>
 				</div>
 			</div>
 			<nav>
@@ -118,5 +131,6 @@
 			<div class="lines"></div>
 		</footer>
 		<script src="js/login.js"></script>
+		<script src="js/buttons.js"></script>
 	</body>
 </html>
diff --git a/preferences.html b/preferences.html
@@ -64,15 +64,28 @@
 						aria-label="Barre de recherche"
 						class="menu-icon search-icon"
 					/>
-					<a
-						href="#"
-						class="notification-menu"
-						aria-label="Menu des notifications"
-						><img src="assets/icons/Notification-bell.svg" class="menu-icon"
-					/></a>
-					<a href="login.html" class="account-menu" aria-label="Menu du compte"
-						><img src="assets/icons/User.svg" class="menu-icon"
-					/></a>
+
+					<div class="dropdown">
+						<img
+							src="assets/icons/Notification-bell.svg"
+							class="menu-icon"
+							id="notification-icon"
+						/>
+						<div id="notification-dropdown" class="dropdown-content">
+							<p>Aucune notification</p>
+						</div>
+					</div>
+
+					<div class="dropdown">
+						<img src="assets/icons/User.svg" class="menu-icon" id="user-icon" />
+						<div id="user-dropdown" class="dropdown-content">
+							<a href="profile.html">Profil</a>
+							<a href="collection.html">Collection</a>
+							<a href="wishlist.html">Liste de souhait</a>
+							<a href="preferences.html">Préférences</a>
+							<a href="#">Se déconnecter</a>
+						</div>
+					</div>
 				</div>
 			</div>
 			<nav>
@@ -123,5 +136,6 @@ <h2>Préférences</h2>
 		<footer>
 			<div class="lines"></div>
 		</footer>
+		<script src="js/buttons.js"></script>
 	</body>
 </html>
diff --git a/profile.html b/profile.html
@@ -64,15 +64,28 @@
 						aria-label="Barre de recherche"
 						class="menu-icon search-icon"
 					/>
-					<a
-						href="#"
-						class="notification-menu"
-						aria-label="Menu des notifications"
-						><img src="assets/icons/Notification-bell.svg" class="menu-icon"
-					/></a>
-					<a href="login.html" class="account-menu" aria-label="Menu du compte"
-						><img src="assets/icons/User.svg" class="menu-icon"
-					/></a>
+
+					<div class="dropdown">
+						<img
+							src="assets/icons/Notification-bell.svg"
+							class="menu-icon"
+							id="notification-icon"
+						/>
+						<div id="notification-dropdown" class="dropdown-content">
+							<p>Aucune notification</p>
+						</div>
+					</div>
+
+					<div class="dropdown">
+						<img src="assets/icons/User.svg" class="menu-icon" id="user-icon" />
+						<div id="user-dropdown" class="dropdown-content">
+							<a href="profile.html">Profil</a>
+							<a href="collection.html">Collection</a>
+							<a href="wishlist.html">Liste de souhait</a>
+							<a href="preferences.html">Préférences</a>
+							<a href="#">Se déconnecter</a>
+						</div>
+					</div>
 				</div>
 			</div>
 			<nav>
@@ -187,5 +200,6 @@ <h2><a href="wishlist.html"> Wishlist ></a></h2>
 		<footer>
 			<div class="lines"></div>
 		</footer>
+		<script src="js/buttons.js"></script>
 	</body>
 </html>
diff --git a/signup.html b/signup.html
@@ -63,15 +63,28 @@
 						aria-label="Barre de recherche"
 						class="menu-icon search-icon"
 					/>
-					<a
-						href="#"
-						class="notification-menu"
-						aria-label="Menu des notifications"
-						><img src="assets/icons/Notification-bell.svg" class="menu-icon"
-					/></a>
-					<a href="login.html" class="account-menu" aria-label="Menu du compte"
-						><img src="assets/icons/User.svg" class="menu-icon"
-					/></a>
+
+					<div class="dropdown">
+						<img
+							src="assets/icons/Notification-bell.svg"
+							class="menu-icon"
+							id="notification-icon"
+						/>
+						<div id="notification-dropdown" class="dropdown-content">
+							<p>Aucune notification</p>
+						</div>
+					</div>
+
+					<div class="dropdown">
+						<img src="assets/icons/User.svg" class="menu-icon" id="user-icon" />
+						<div id="user-dropdown" class="dropdown-content">
+							<a href="profile.html">Profil</a>
+							<a href="collection.html">Collection</a>
+							<a href="wishlist.html">Liste de souhait</a>
+							<a href="preferences.html">Préférences</a>
+							<a href="#">Se déconnecter</a>
+						</div>
+					</div>
 				</div>
 			</div>
 			<nav>
@@ -133,5 +146,6 @@
 		<footer>
 			<div class="lines"></div>
 		</footer>
+		<script src="js/buttons.js"></script>
 	</body>
 </html>
diff --git a/style/_mixins.scss b/style/_mixins.scss
@@ -13,6 +13,7 @@
 	}
 	&:hover {
 		background-color: darken($input-background-color, 10%);
+		cursor: pointer;
 	}
 	&:active {
 		background-color: darken($input-background-color, 20%);