WIP: Responsive header menu

2022-09-08 15:01:02 +02:00
parent af2da01729
commit 0c10e46d1a
4 changed files with 46 additions and 0 deletions
@@ -1,5 +1,15 @@
 <div id="header">
 	<p id="header-title">Doppelkopf-Stats</p>
+	<span id="menu">
+		<div id="menu-desktop">
+			<div>Home</div>
+			<div>Game night</div>
+			<div>Stats</div>
+		</div>
+		<div id="menu-mobile">
+			<div>Open</div>
+		</div>
+	</span>
 	<span id="user-info">
 		<p>{{getUserName()}}</p>
 		<img src="assets/images/user.png" alt="User Icon" (click)="openProfile()">
@@ -34,3 +34,33 @@
 #user-info img:hover {
 	cursor: pointer;
 }
+
+@media (min-width: 768px) {
+	#menu-mobile {
+		display: none;
+	}
+	#menu-desktop {
+		display: inherit;
+	}
+}
+@media(max-width: 767px) {
+	#menu-desktop {
+		display: none;
+	}
+	#menu-mobile {
+		display: inherit;
+	}
+}
+
+#menu {
+	display: flex;
+	justify-content: center;
+	max-width: 100%;
+	height: 100%;
+	align-items: center;
+}
+
+#menu div div {
+	padding-left: 2em;
+	padding-right: 2em;
+}