clean code design

src/app/app.component.html

@@ -1,12 +1,10 @@
 <div [ngClass]="{ 'blur-background': sharedService.isAnyDialogOpen }">
   <div class="container">
     <app-sidebar></app-sidebar>
-    <main>
     <app-header></app-header>
     <div class="main-content">
       <router-outlet></router-outlet>
     </div>
-    </main>
   </div>
   <app-sidebar-mobile></app-sidebar-mobile>
 </div>

src/app/app.component.scss

@@ -1,11 +1,19 @@
 .container {
   display: flex;
-  height: 100vh;
+}
+
+app-header {
+  position: fixed;
+  left: 232px;
+  height: 96px;
+  width: 100%;
+  background-color: var(--white);
+  z-index: 2;
 }
 
 app-sidebar {
   width: 232px;
-  height: 100%;
+  height: 100vh;
 }
 
 app-sidebar-mobile {
@@ -16,24 +24,13 @@ app-sidebar-mobile {
   height: 80px;
 }
 
-main {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  min-width: calc(100vw - 232px);
-}
-
-app-header {
-  height: 96px;
-  width: 100%;
-  background-color: var(--white);
-}
-
 .main-content {
-  width: calc(100% - 128px);
+  position: fixed;
-  min-width: calc(100vw - 296px);
+  top: 96px;
-  height: 100vh;
+  left: 232px;
-  padding: 64px 0 0 64px;
+  bottom: 0;
+  right: 0;
+  padding: 64px;
   background-color: var(--bgContent);
   overflow-y: auto;
 }
@@ -44,20 +41,13 @@ app-header {
 
 @media screen and (max-width: 910px) {
   .main-content {
-    position: absolute;
-    top: 96px;
-    width: calc(100vw - 64px);
-    height: calc(100vh - 240px);
     padding: 32px;
-  }
+    left: 0;
-
+    bottom: 80px;
-  main {
-    min-width: calc(100vw);
   }
 
   app-header {
-    position: fixed;
+    left: 0;
-    z-index: 2;
   }
 
   app-sidebar {
@@ -65,14 +55,12 @@ app-header {
   }
 
   app-sidebar-mobile {
-    position: fixed;
     display: unset;
   }
 }
 
 @media screen and (max-width: 450px) {
   .main-content {
-    width: calc(100vw - 32px);
+    padding: 16px;
-    padding: 32px 16px;
   }
 }

src/app/components/contacts/contact-detail/contact-detail.component.scss

@@ -1,12 +1,3 @@
-section {
-  position: absolute;
-  top: -64px;
-  left: 339px;
-  width: calc(100vw - 747px);
-  min-height: calc(100vh - 208px);
-  padding: 64px 48px 48px 48px;
-}
-
 .header {
   display: flex;
   justify-content: space-between;
@@ -189,45 +180,11 @@ section {
   }
 }
 
-@media screen and (max-width: 1150px) {
-  section {
-    position: unset;
-    box-shadow: unset;
-    width: calc(100vw - 312px);
-    padding: 0;
-  }
-
-  .header {
-    padding-right: 64px;
-  }
-}
-
-@media screen and (max-width: 1150px) {
-  section {
-    width: calc(100vw - 296px);
-  }
-}
-
-@media screen and (max-width: 910px) {
-  section {
-    width: calc(100vw - 48px);
-    min-height: calc(100vh - 240px);
-  }
-
-  .header {
-    padding-right: 0;
-  }
-}
-
 @media screen and (max-width: 450px) {
   .btns {
     display: none;
   }
 
-  section {
-    width: calc(100vw - 36px);
-  }
-
   .name {
     font-size: 36px;
     font-weight: 600;

src/app/components/contacts/contacts.component.html

@@ -53,8 +53,10 @@
       } }
     </div>
   </div>
+  <div class="right-frame">
     <app-contact-detail
       [ngClass]="{ 'd-none': !showAllUsers && currentUserId == undefined }"
       [currentUserId]="currentUserId"
     ></app-contact-detail>
+  </div>
 </section>

src/app/components/contacts/contacts.component.scss

@@ -1,9 +1,3 @@
-section {
-  position: relative;
-  height: 100%;
-  width: 100%;
-}
-
 .btn-inside {
   display: flex;
   justify-content: center;
@@ -39,17 +33,25 @@ section {
 }
 
 .left-frame {
-  position: absolute;
+  position: fixed;
-  top: -64px;
+  top: 96px;
-  left: -64px;
+  left: 232px;
+  bottom: 0;
   width: 400px;
-  min-height: calc(100vh - 128px);
-  height: 100%;
   background-color: var(--white);
   padding-top: 32px;
   box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.1);
   overflow: auto;
 }
+.right-frame {
+  position: fixed;
+  top: 96px;
+  left: 632px;
+  right: 0;
+  bottom: 0;
+  padding: 32px;
+  overflow: auto;
+}
 
 .content {
   display: flex;
@@ -119,7 +121,7 @@ section {
 .name {
   display: flex;
   align-items: center;
-  max-width: 100%; /* Adjust this width as necessary */
+  max-width: 100%;
   overflow: hidden;
   white-space: nowrap;
   font-size: 20px;
@@ -145,11 +147,17 @@ section {
 
 @media screen and (max-width: 1150px) {
   .left-frame {
-    position: absolute;
+    right: 0;
-    top: -64px;
+    width: auto;
-    left: -64px;
-    width: calc(100vw - 232px);
     background-color: var(--bgContent);
+    z-index: 1;
+  }
+
+  .right-frame {
+    top: 96px;
+    left: 232px;
+    bottom: 0;
+    right: 0;
   }
 
   .contact {
@@ -161,10 +169,15 @@ section {
 
 @media screen and (max-width: 910px) {
   .left-frame {
+    left: 0;
+    bottom: 80px;
     padding: 0;
-    left: -16px;
+  }
-    width: calc(100vw - 16px);
+
-    min-height: calc(100vh - 176px);
+  .right-frame {
+    top: 96px;
+    left: 0;
+    bottom: 80px;
   }
 
   .btn-inside {
@@ -194,10 +207,8 @@ section {
 }
 
 @media screen and (max-width: 450px) {
-  .left-frame {
+  .right-frame {
-    top: -32px;
+    padding: 16px;
-    left: -16px;
-    width: calc(100vw);
   }
 
   .first-letter {

src/app/components/summary/summary.component.scss

@@ -1,7 +1,3 @@
-section {
-  padding-bottom: 32px;
-}
-
 .header {
   display: flex;
   align-items: center;
@@ -192,11 +188,11 @@ section {
   .header {
     flex-direction: column;
     align-items: start;
-    padding-left: 0;
+    padding: 0;
     width: 100%;
     height: 100%;
     .metrics-txt {
-      padding-left: 0;
+      padding: 0;
     }
     .blue-bar {
       position: absolute;
@@ -209,16 +205,16 @@ section {
 
 @media screen and (max-width: 650px) {
   .left-container {
-    width: calc(100vw - 80px);
+    width: auto;
-    height: 100%;
   }
 
   .todo-done,
   .urgent,
   .tasks {
-    width: 100%;
+    width: 50%;
     height: 150px;
     border-radius: 30px;
+    padding: 12px;
   }
 
   .circle {
@@ -227,6 +223,8 @@ section {
 
   .urgent {
     margin: 20px 0;
+    padding: 6px;
+    width: auto;
     img {
       margin-left: 10%;
     }
@@ -285,15 +283,6 @@ section {
 }
 
 @media screen and (max-width: 450px) {
-  section {
-    width: calc(100vw - 48px);
-  }
-
-  .left-container {
-    width: calc(100vw - 32px);
-    height: 100%;
-  }
-
   .header {
     .title {
       font-size: 47px;
@@ -303,11 +292,16 @@ section {
     }
   }
 
+  .left-container {
+    height: fit-content;
+  }
+
   .todo-done,
   .urgent,
   .tasks {
-    width: 100%;
+    height: 100px;
     border-radius: 30px;
+    padding: 6px;
     .line {
       height: 80px;
     }
@@ -321,17 +315,21 @@ section {
       font-size: 18px;
     }
   }
+
+  .tasks {
+    height: 120px;
+    border-radius: 30px;
+    padding: 6px;
+  }
 }
 
 @media screen and (max-width: 400px) {
   .details {
     p {
-      font-size: 12px;
+      font-size: 10px;
-    }
     }
   }
 
-@media screen and (max-width: 365px) {
   .todo-done,
   .urgent,
   .tasks {
@@ -351,10 +349,10 @@ section {
 
   .date {
     p {
-      font-size: 14px;
+      font-size: 12px;
     }
     span {
-      font-size: 18px;
+      font-size: 16px;
     }
   }
 

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

@@ -1,17 +1,17 @@
-<section>
 <div class="header">
-    <img
+  <img class="logo" src="./../../../../assets/img/header/logo.svg" alt="logo" />
-      class="logo"
-      src="./../../../../assets/img/header/logo.svg"
-      alt="logo"
-    />
   <div class="headline">{{ "header.headline" | translate }}</div>
-    <div class="left-frame">
+  <div class="navbar">
     <div class="img-help" routerLink="help">
       <img src="./../../../../assets/img/header/help.svg" alt="" />
     </div>
-      <div class="img-language" (click)="toggleLanguage()">
+    <div class="img-language">
-        <img src="./../../../../assets/img/header/language.svg" alt="" />
+      <img
+        class="img-lang"
+        (click)="toggleLanguage()"
+        src="./../../../../assets/img/header/language.svg"
+        alt=""
+      />
     </div>
     <div class="img-user" (click)="toggleNavbar()">
       {{
@@ -23,7 +23,6 @@
     </div>
   </div>
 </div>
-</section>
 <app-navbar *ngIf="navbarVisible" [navbarVisible]="navbarVisible"></app-navbar>
 <app-navbar
   *ngIf="navbarLanguageVisible"

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

@@ -1,11 +1,8 @@
-section {
-  height: 96px;
-}
-
 .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  width: calc(100% - 232px);
   height: 93px;
   box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
 }
@@ -15,10 +12,9 @@ section {
   padding-left: 116px;
 }
 
-.left-frame {
+.navbar {
   display: flex;
-  justify-content: center;
+  justify-content: right;
-  align-items: center;
   padding-right: 20px;
 }
 
@@ -62,9 +58,14 @@ section {
 /*------------- RESPONSIVE -------------*/
 
 @media screen and (max-width: 910px) {
+  .header {
+    width: 100%;
+  }
+
   .headline {
     display: none;
   }
+
   .logo {
     display: unset;
   }

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

@@ -37,7 +37,7 @@ export class HeaderComponent {
     }
     if (
       !targetElement.closest('app-navbar') &&
-      !targetElement.closest('.img-language')
+      !targetElement.closest('.img-lang')
     ) {
       this.navbarLanguageVisible = false;
     }

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

@@ -1,10 +1,7 @@
 section {
-  max-width: 100%;
   word-wrap: break-word;
   overflow-wrap: break-word;
   white-space: normal;
-  padding-right: 64px;
-  margin-bottom: 32px;
   a {
     text-decoration: none;
     color: var(--gray);

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

@@ -1,10 +1,7 @@
 section {
-  max-width: 100%;
   word-wrap: break-word;
   overflow-wrap: break-word;
   white-space: normal;
-  padding-right: 64px;
-  margin-bottom: 32px;
 }
 
 .header {

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

@@ -29,20 +29,18 @@
     [ngClass]="{
       active: langService.currentLang === 'en'
     }"
+    (click)="langService.switchLanguage('en')"
   >
-    <span (click)="langService.switchLanguage('en')">{{
+    <span>{{ "navbar.english" | translate }}</span>
-      "navbar.english" | translate
-    }}</span>
   </div>
   <div
     class="link"
     [ngClass]="{
       active: langService.currentLang === 'de'
     }"
+    (click)="langService.switchLanguage('de')"
   >
-    <span (click)="langService.switchLanguage('de')">{{
+    <span>{{ "navbar.german" | translate }}</span>
-      "navbar.german" | translate
-    }}</span>
   </div>
 </nav>
 }

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

@@ -1,5 +1,5 @@
 .navbar {
-  position: absolute;
+  position: fixed;
   display: flex;
   flex-direction: column;
   top: 96px;
@@ -10,7 +10,7 @@
   border-radius: 20px 0 20px 20px;
   box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
   padding: 10px;
-  z-index: 2;
+  z-index: 5;
 }
 
 .language {
@@ -52,8 +52,3 @@ span {
   font-size: 16px;
   font-weight: 400;
 }
-
-/*------------- RESPONSIVE -------------*/
-
-@media screen and (max-width: 910px) {
-}

src/app/shared/components/privacy-policy/privacy-policy.component.scss

@@ -1,10 +1,7 @@
 section {
-  max-width: 100%;
   word-wrap: break-word;
   overflow-wrap: break-word;
   white-space: normal;
-  padding-right: 64px;
-  margin-bottom: 32px;
 }
 
 .header {