From 9c3547f712bd629307c7511031f9ccbbed489d43 Mon Sep 17 00:00:00 2001
From: Julian Brunner <brunner_julian@yahoo.com>
Date: Fri, 9 Sep 2022 03:28:23 +0200
Subject: [PATCH] Fix dropdown menu location (mobile menu).

---
 .../components/header/header.component.scss   | 21 +++++++++++++++----
 src/app/components/header/header.component.ts |  1 -
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
index 8d506d7..98b54f5 100644
--- a/src/app/components/header/header.component.scss
+++ b/src/app/components/header/header.component.scss
@@ -50,6 +50,7 @@
 	}
 	#menu-mobile {
 		display: inherit;
+		width: 10em;
 	}
 }
 
@@ -59,11 +60,13 @@
 	max-width: 100%;
 	height: 100%;
 	align-items: center;
+
 }
 
-#menu div div {
+#menu div#menu-desktop div {
 	padding-left: 2em;
 	padding-right: 2em;
+	text-align: center;
 }
 
 #menu-desktop div:hover {
@@ -75,13 +78,23 @@
 
 #menu-mobile-dropdown-content {
 	display: none;
-	z-index: 1;
+	z-index: 2;
 	position: absolute;
-	min-width: 160px;
+	top: $header_height + 0.3em;
+	padding-left: 2em;
 
 }
 
 #menu-mobile-dropdown-content div {
-	padding: 12px 16px;
+	color: #F2F1E8;
+	border: solid 1px;
+	text-align: center;
+	padding: 0.3em;
 
 }
+
+#menu-mobile-dropdown-button{
+	padding: 10px;
+	width: 100%;
+	text-align: center;
+}
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
index b71beb2..a744ed4 100644
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@@ -40,7 +40,6 @@ export class HeaderComponent implements OnInit {
 	toggleMobileDropdown(): void {
 		const dropdownContentStyle = document.getElementById('menu-mobile-dropdown-content')!.style;
 		if (dropdownContentStyle.display == 'block') {
-			//FIXME: Currently doesn't work because content overlaps button
 			dropdownContentStyle.display = 'none';
 		} else {
 			dropdownContentStyle.display = 'block';