d

frontend/src/components/Nav.jsx

@@ -102,7 +102,8 @@ function Nav() {
 					</a>
 				</div>
 			</div>
-			<div>
+			{/* <div>
+				
 				<div className="nav-info">
 					<p
 						className={
@@ -112,7 +113,7 @@ function Nav() {
 						{gz} GZ
 					</p>
 				</div>
-			</div>
+					</div> */}
 			<div className="month-navigation">
 				<div
 					className="nav-arrows-previous"
@@ -128,7 +129,7 @@ function Nav() {
 					onClick={nextMonth}
 				></div>
 			</div>
-			<div>
+			{/*<div>
 				<div className="working-hours">
 					<div className="working-hours-input-block">
 						<div className="working-hours-input-container">
@@ -144,9 +145,9 @@ function Nav() {
 
 					<small>Working hours</small>
 				</div>
-			</div>
+			</div>*/}
 			<div className="nav-account">
-				<p>Welcome back, Username!</p>
+				<p>Hey, Username!</p>
 				<a className="logout-a" href="/logout">
 					Log out
 				</a>

frontend/src/css/components/nav.scss

@@ -2,8 +2,10 @@
 	width: 100%;
 	height: 30px;
 	background-color: rgb(13, 13, 13);
-	display: grid;
-	grid-template-columns: 0.5fr 0.5fr 1fr 0.5fr 0.5fr;
+	display: flex;
+	flex-wrap: wrap;
+	align-content: center;
+	justify-content: space-between;
 	padding-top: 10px;
 	padding-bottom: 10px;
 
@@ -23,11 +25,10 @@
 	}
 
 	div {
-		grid-area: auto;
-
 		.nav-overview {
 			margin-top: 3px;
 			margin-left: 30px;
+			width: 300px;
 			a {
 				background-color: #0f9f5f;
 
@@ -144,6 +145,7 @@
 	.month-navigation {
 		display: grid;
 		grid-template-columns: 1fr 2fr 1fr;
+		width: 30%;
 
 		div {
 			background-color: transparent;
@@ -174,8 +176,10 @@
 	}
 	.nav-account {
 		display: flex;
-
+		justify-content: flex-end;
+		width: 300px;
 		p {
+			margin-left: 0px;
 			padding-top: 3px;
 			font-size: 12pt;
 			font-weight: bold;
@@ -193,3 +197,10 @@
 		}
 	}
 }
+
+@media screen and (max-width: 1000px) {
+	.nav {
+		height: 60px;
+		grid-template-columns: 1fr 1fr 1fr;
+	}
+}