feat: highlight active links in SidebarComponent

src/app/shared/components/sidebar/sidebar.component.html

@@ -7,8 +7,7 @@
       class="nav-links-inner"
       routerLink="summary"
       [ngClass]="{
-        active: currentPath == 'summary',
-        'switch-language': languageService.currentLang == 'de'
+        'active-nav': currentPath == 'summary',
       }"
     >
       <img src="./assets/img/sidebar/summary.svg" alt="summary" /><span>{{
@@ -20,8 +19,7 @@
       class="nav-links-inner"
       routerLink="add-task"
       [ngClass]="{
-        active: currentPath == 'add-task',
-        'switch-language': languageService.currentLang == 'de'
+        'active-nav': currentPath == 'add-task',
       }"
     >
       <img src="./assets/img/sidebar/add-task.svg" alt="addtask" /><span>{{
@@ -33,8 +31,7 @@
       class="nav-links-inner"
       routerLink="board"
       [ngClass]="{
-        active: currentPath == 'board',
-        'switch-language': languageService.currentLang == 'de'
+        'active-nav': currentPath == 'board',
       }"
     >
       <img src="./assets/img/sidebar/board.svg" alt="board" /><span>{{
@@ -46,8 +43,7 @@
       class="nav-links-inner"
       routerLink="contacts"
       [ngClass]="{
-        active: currentPath == 'contacts',
-        'switch-language': languageService.currentLang == 'de'
+        'active-nav': currentPath == 'contacts',
       }"
     >
       <img src="./assets/img/sidebar/contacts.svg" alt="contacts" /><span>{{
@@ -57,10 +53,22 @@
   </nav>
 
   <div class="reference">
-    <p routerLink="privacy-policy">
+    <a
+      routerLink="privacy-policy"
+      [ngClass]="{
+        'active-link': currentPath === 'privacy-policy'
+      }"
+    >
       {{ "sidebar.privacyPolicy" | translate }}
-    </p>
-    <p routerLink="imprint">{{ "sidebar.legalNotice" | translate }}</p>
-    <p (click)="logout()">{{ "sidebar.logout" | translate }}</p>
+    </a>
+    <a
+      routerLink="imprint"
+      [ngClass]="{
+        'active-link': currentPath === 'imprint'
+      }"
+    >
+      {{ "sidebar.legalNotice" | translate }}
+    </a>
+    <a (click)="logout()">{{ "sidebar.logout" | translate }}</a>
   </div>
 </section>

src/app/shared/components/sidebar/sidebar.component.scss

@@ -45,11 +45,7 @@ nav {
   }
 }
 
-.active {
-  background-color: var(--very-dark-blue);
-}
-
-.switch-language {
+.language-de {
   padding-left: 43px;
 }
 
@@ -58,13 +54,14 @@ nav {
   align-items: center;
   flex-direction: column;
   margin-bottom: 30px;
-  p {
+  a {
+    justify-content: center;
     width: fit-content;
     padding: 8px;
     margin: 12px 0;
     display: flex;
     text-align: center;
-    justify-content: center;
+    text-decoration: none;
     color: var(--light-gray);
     cursor: pointer;
     &:hover {
@@ -72,3 +69,11 @@ nav {
     }
   }
 }
+
+.active-nav {
+  background-color: var(--very-dark-blue);
+}
+
+.active-link {
+  color: var(--light-blue) !important;
+}

src/app/shared/components/sidebar/sidebar.component.ts

@@ -22,8 +22,6 @@ export class SidebarComponent implements OnInit {
   ) {}
 
   /**
-   * Lifecycle hook that is called after the component has been initialized.
-   *
    * Calls the getCurrentPath method to set the currentPath property to the current route's url.
    */
   ngOnInit(): void {

src/assets/i18n/de.json

@@ -66,7 +66,7 @@
   },
   "sidebar": {
     "summary": "Übersicht",
-    "addTask": "Neue Aufgabe",
+    "addTask": "Aufgabe",
     "addTaskMobile": "Aufgabe",
     "board": "Tafel",
     "contacts": "Kontakte",