responsive design & translate

src/app/components/board/board.component.html

@@ -2,7 +2,7 @@
   <div class="header">
     <div class="title">{{ "board.headline" | translate }}</div>
     <div class="search">
-      <div>
+      <div class="search-inner">
         <input
           #searchField
           id="search-task"

src/app/components/board/board.component.scss

@@ -23,7 +23,8 @@ section {
   display: flex;
   align-items: center;
   position: relative;
-  padding-right: 32px;
+  .search-inner {
+    position: relative;
     input {
       width: 312px;
       padding: 8px 16px;
@@ -34,7 +35,7 @@ section {
     .line {
       position: absolute;
       top: 8px;
-    right: 250px;
+      right: 30px;
       height: 18px;
       width: 1px;
       background-color: var(--gray);
@@ -43,7 +44,7 @@ section {
     .icon-clear {
       position: absolute;
       top: 7px;
-    right: 225px;
+      right: 10px;
       cursor: pointer;
       &:hover {
         filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg);
@@ -56,13 +57,14 @@ section {
     .icon-search {
       position: absolute;
       top: 4px;
-    right: 223px;
+      right: 8px;
       filter: invert(41%) sepia(8%) saturate(762%) hue-rotate(176deg)
         brightness(94%) contrast(86%);
       width: 25px;
       height: 25px;
     }
   }
+}
 
 d-none {
   display: none;
@@ -82,7 +84,7 @@ d-none {
   justify-content: space-around;
   align-items: center;
   height: 32px;
-  width: 175px;
+  width: fit-content;
   padding: 8px 8px 8px 16px;
   border-radius: 10px;
   border: 0;
@@ -137,6 +139,7 @@ d-none {
 .column {
   display: flex;
   flex-direction: column;
+  width: 270px;
   padding-right: 32px;
   padding-top: 6px;
   &:first-child {
@@ -148,30 +151,37 @@ d-none {
 
 @media screen and (max-width: 1100px) {
   .search {
+    .search-inner {
       input {
         width: 220px;
       }
     }
   }
+}
 
 @media screen and (max-width: 1020px) {
   .search {
+    .search-inner {
       input {
         width: 150px;
       }
     }
+  }
 
   .title {
     font-size: 50px;
   }
 }
 
-@media screen and (max-width: 897px) {
+@media screen and (max-width: 910px) {
   .search {
+    .search-inner {
       input {
-      width: 220px;
+        width: 280px;
       }
     }
+  }
+
   .status {
     justify-content: center;
   }
@@ -188,18 +198,12 @@ d-none {
   }
 
   .search {
-    padding-right: 0;
+    width: 100%;
+    .search-inner {
+      width: 100%;
       input {
-      width: calc(100vw - 113px);
+        width: calc(100% - 34px);
       }
-    .line {
-      right: 35px;
-    }
-    .icon-clear {
-      right: 12px;
-    }
-    .icon-search {
-      right: 10px;
     }
   }
 
@@ -243,10 +247,4 @@ d-none {
   .details {
     width: calc(100vw - 55px);
   }
-
-  .search {
-    input {
-      width: calc(100vw - 80px);
-    }
-  }
 }

src/app/components/board/task/task-empty/task-empty.component.scss

@@ -3,7 +3,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  max-width: 264px;
+  max-width: 268px;
   height: 48px;
   border-radius: 10px;
   border: 1px dashed var(--gray);

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

@@ -11,7 +11,7 @@
         src="./../../../../../assets/img/sidebar/summary.svg"
         alt="summary"
       />
-      <p>Summary</p>
+      <p>{{ "sidebar.summary" | translate }}y</p>
     </div>
     <div
       class="nav-links"
@@ -21,7 +21,7 @@
       }"
     >
       <img src="./../../../../../assets/img/sidebar/board.svg" alt="board" />
-      <p>Board</p>
+      <p>{{ "sidebar.board" | translate }}</p>
     </div>
     <div
       class="nav-links"
@@ -34,7 +34,7 @@
         src="./../../../../../assets/img/sidebar/add-task.svg"
         alt="addtask"
       />
-      <p>Add Tasks</p>
+      <p>{{ "sidebar.addTask" | translate }}</p>
     </div>
     <div
       class="nav-links"
@@ -47,7 +47,7 @@
         src="./../../../../../assets/img/sidebar/contacts.svg"
         alt="contacts"
       />
-      <p>Contacts</p>
+      <p>{{ "sidebar.contacts" | translate }}</p>
     </div>
   </nav>
 </section>

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

@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-sidebar-mobile',
   standalone: true,
-  imports: [RouterModule, CommonModule],
+  imports: [RouterModule, CommonModule, TranslateModule],
   templateUrl: './sidebar-mobile.component.html',
   styleUrl: './sidebar-mobile.component.scss',
 })

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

@@ -7,52 +7,60 @@
       class="nav-links-inner"
       routerLink="summary"
       [ngClass]="{
-        active: currentPath == 'summary'
+        active: currentPath == 'summary',
+        'switch-language': languageService.currentLang == 'de'
       }"
     >
-      <img src="./assets/img/sidebar/summary.svg" alt="sumary" /><span
+      <img src="./assets/img/sidebar/summary.svg" alt="sumary" /><span>{{
-        >Summary</span
+        "sidebar.summary" | translate
-      >
+      }}</span>
     </div>
     <div
       id="navLinkAddTask"
       class="nav-links-inner"
       routerLink="add-task"
       [ngClass]="{
-        active: currentPath == 'add-task'
+        active: currentPath == 'add-task',
+        'switch-language': languageService.currentLang == 'de'
       }"
     >
-      <img src="./assets/img/sidebar/add-task.svg" alt="addtask" /><span
+      <img src="./assets/img/sidebar/add-task.svg" alt="addtask" /><span>{{
-        >Add Task</span
+        "sidebar.addTask" | translate
-      >
+      }}</span>
     </div>
     <div
       id="navLinkBoard"
       class="nav-links-inner"
       routerLink="board"
       [ngClass]="{
-        active: currentPath == 'board'
+        active: currentPath == 'board',
+        'switch-language': languageService.currentLang == 'de'
       }"
     >
-      <img src="./assets/img/sidebar/board.svg" alt="board" /><span>Board</span>
+      <img src="./assets/img/sidebar/board.svg" alt="board" /><span>{{
+        "sidebar.board" | translate
+      }}</span>
     </div>
     <div
       id="navLinkContacts"
       class="nav-links-inner"
       routerLink="contacts"
       [ngClass]="{
-        active: currentPath == 'contacts'
+        active: currentPath == 'contacts',
+        'switch-language': languageService.currentLang == 'de'
       }"
     >
-      <img src="./assets/img/sidebar/contacts.svg" alt="contacts" /><span
+      <img src="./assets/img/sidebar/contacts.svg" alt="contacts" /><span>{{
-        >Contacts</span
+        "sidebar.contacts" | translate
-      >
+      }}</span>
     </div>
   </nav>
 
   <div class="reference">
-    <div routerLink="privacy-policy">Privacy Policy</div>
+    <div routerLink="privacy-policy">
-    <div routerLink="imprint">Legal Notice</div>
+      {{ "sidebar.privacyPolicy" | translate }}
-    <div onclick="logout()">Log out</div>
+    </div>
+    <div routerLink="imprint">{{ "sidebar.legalNotice" | translate }}</div>
+    <div onclick="logout()">{{ "sidebar.logout" | translate }}</div>
   </div>
 </section>

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

@@ -16,15 +16,16 @@ section {
 nav {
   display: flex;
   flex-direction: column;
+  width: 232px;
 }
 
 .nav-links-inner {
   display: flex;
   justify-content: left;
   align-items: center;
-  padding: 4px 56px;
+  padding: 4px 0;
+  padding-left: 56px;
   height: 46px;
-  width: 120px;
   cursor: pointer;
   img {
     width: 30px;
@@ -32,10 +33,8 @@ nav {
     padding-right: 8px;
   }
   span {
-    display: flex;
+    text-align: center;
-    align-items: center;
     font-size: 16px;
-    width: 100%;
     color: var(--light-gray);
   }
   &:hover {
@@ -50,13 +49,17 @@ nav {
   background-color: var(--very-dark-blue);
 }
 
+.switch-language {
+  padding-left: 43px;
+}
+
 .reference {
   display: flex;
   align-items: center;
   flex-direction: column;
   margin-bottom: 30px;
   div {
-    width: 105px;
+    width: 216px;
     padding: 8px;
     display: flex;
     text-align: center;

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

@@ -1,18 +1,23 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { LanguageService } from '../../../services/language.service';
 
 @Component({
   selector: 'app-sidebar',
   standalone: true,
-  imports: [RouterModule, CommonModule],
+  imports: [RouterModule, CommonModule, TranslateModule],
   templateUrl: './sidebar.component.html',
   styleUrl: './sidebar.component.scss',
 })
-export class SidebarComponent {
+export class SidebarComponent implements OnInit {
   currentPath: string = '';
 
-  constructor(private router: Router) {}
+  constructor(
+    private router: Router,
+    public languageService: LanguageService
+  ) {}
 
   ngOnInit(): void {
     this.getCurrentPath();

src/assets/i18n/de.json

@@ -9,6 +9,15 @@
     "english": "Englisch",
     "german": "Deutsch"
   },
+  "sidebar": {
+    "summary": "Übersicht",
+    "addTask": "Neue Aufgabe",
+    "board": "Brett",
+    "contacts": "Kontakte",
+    "privacyPolicy": "Datenschutzerklärung",
+    "legalNotice": "Rechtlicher Hinweis",
+    "logout": "Abmelden"
+  },
   "contact-dialog-form": {
     "btn-delete": "Löschen",
     "btn-save": "Sichern",
@@ -45,7 +54,7 @@
     "inProgress": "In Bearbeitung",
     "awaitFeedback": "Warte auf Rückmeldung",
     "done": "Erledigt",
-    "addTask": "Hinzufügen",
+    "addTask": "Neue Aufgabe",
     "findTask": "Aufgabe suchen",
     "noTasks": "Keine Aufgaben"
   },

src/assets/i18n/en.json

@@ -5,10 +5,19 @@
   "navbar": {
     "privacyPolicy": "Privacy policy",
     "legalNotice": "Legal notice",
-    "logout": "Abmelden",
+    "logout": "Log out",
     "english": "English",
     "german": "German"
   },
+  "sidebar": {
+    "summary": "Summary",
+    "addTask": "Add Task",
+    "board": "Board",
+    "contacts": "Contacts",
+    "privacyPolicy": "Privacy policy",
+    "legalNotice": "Legal notice",
+    "logout": "Log out"
+  },
   "contact-dialog-form": {
     "btn-delete": "Delete",
     "btn-save": "Save",