From 13a39be3de4d0f7e0f6be9c20e0464e86b87c676 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Date: Tue, 24 Jan 2023 21:54:48 +0000
Subject: [PATCH] feat: unindent settings page (#2996)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2996
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
---
 src/views/user/Settings.vue | 63 +++++++++++++++++++------------------
 1 file changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/views/user/Settings.vue b/src/views/user/Settings.vue
index 67e6650f6..0af37c141 100644
--- a/src/views/user/Settings.vue
+++ b/src/views/user/Settings.vue
@@ -4,7 +4,7 @@
 			<nav class="navigation">
 				<ul>
 					<li v-for="({routeName, title }, index) in navigationItems" :key="index">
-						<router-link :to="{name: routeName}">
+						<router-link class="navigation-link" :to="{name: routeName}">
 							{{ title }}
 						</router-link>
 					</li>
@@ -90,39 +90,42 @@ const navigationItems = computed(() => {
 .user-settings {
 	display: flex;
 
-	.navigation {
-		width: 25%;
-		padding-right: 1rem;
-
-		a {
-			display: block;
-			padding: .5rem;
-			color: var(--text);
-			width: 100%;
-			border-left: 3px solid transparent;
-
-			&:hover, &.router-link-active {
-				background: var(--white);
-				border-color: var(--primary);
-			}
-		}
-	}
-
-	.view {
-		width: 75%;
-	}
-
 	@media screen and (max-width: $tablet) {
 		flex-direction: column;
+	}
+}
 
-		.navigation, .view {
-			width: 100%;
-			padding-left: 0;
-		}
+.navigation {
+	width: 25%;
+	padding-right: 1rem;
 
-		.view {
-			padding-top: 1rem;
-		}
+	@media screen and (max-width: $tablet) {
+		width: 100%;
+		padding-left: 0;
+	}
+}
+
+.navigation-link {
+	display: block;
+	padding: .5rem;
+	color: var(--text);
+	width: 100%;
+	border-left: 3px solid transparent;
+
+	&:hover,
+	&.router-link-active {
+		background: var(--white);
+		border-color: var(--primary);
+	}
+}
+
+.view {
+	width: 75%;
+
+	@media screen and (max-width: $tablet) {
+		width: 100%;
+		padding-left: 0;
+		padding-top: 1rem;
 	}
 }
 </style>