added header & conversations mobile design

src/app/dialog-edit-profile/dialog-edit-profile.component.html

@@ -1,4 +1,4 @@
 <section class="dialog-wrapper">
     <span (click)="openDialog($event)">Profil</span>
-    <span (click)="logout()">Log out</span>
+    <span (click)="logout()">Abmelden</span>
 </section>

src/app/main/conversations/conversations.component.scss

@@ -79,25 +79,27 @@ main {
 
     >mat-expansion-panel-header {
         padding: 0 0 1rem 0;
+
         mat-panel-title {
             display: flex;
             justify-content: space-between;
-                >div {
-                    display: flex;
-                    align-items: center;
 
-                    img {
-                        padding-right: 0.5rem;
-                    }
+            >div {
+                display: flex;
+                align-items: center;
+
+                img {
+                    padding-right: 0.5rem;
                 }
             }
-
         }
 
-
     }
 
 
+}
+
+
 .channels,
 .directmessages {
 
@@ -106,7 +108,7 @@ main {
             font-size: 1.25rem;
         }
     }
-    
+
     mat-expansion-panel-header:hover {
         background: none !important;
 
@@ -369,5 +371,39 @@ mat-button-toggle {
 }
 
 ::ng-deep::ng-deep .mat-expansion-panel-body {
-    padding: 0 0 16px 24px !important;
+    padding: 0 0 1rem 1.5rem !important;
+}
+
+// Media Queries
+
+@media (max-width: 431px) {
+    .workspace {
+        display: none;
+    }
+
+    main {
+        padding: 0 2.25rem 2.25rem 2.25rem;
+        height: auto;
+    }
+
+    .container {
+        padding: 0;
+        overflow: visible;
+        display: flex;
+        flex-direction: column;
+        gap: 0.875rem;
+    }
+
+    .channels,
+    .directmessages {
+
+        >mat-expansion-panel-header {
+            height: 2.875rem;
+
+            mat-panel-title {
+                margin: 0;
+
+            }
+        }
+    }
 }

src/app/main/header/header.component.html

@@ -23,4 +23,8 @@ <h1>{{ currentuser.currentUser.name }}</h1>
             <span class="material-icons">keyboard_arrow_down</span>
         </button>
     </div>
-</section>
+</section>
+<div class="searchbar-wrapper mobile">
+    <input placeholder="Gehe zu...">
+    <img src="../../../assets/img/icons/search.svg">
+</div>

src/app/main/header/header.component.scss

@@ -67,6 +67,8 @@
             position: absolute;
             bottom: 0;
             right: 0;
+            width: 1rem;
+            height: 1rem;
 
             img {
                 width: 1rem;
@@ -98,6 +100,93 @@ h1 {
     font-size: 2rem;
 }
 
-.custom-dialog-class{
+.custom-dialog-class {
     border-radius: 1.875rem 0rem 1.875rem 1.875rem;
+}
+
+.mobile {
+    display: none;
+    padding: 2rem 0.75rem 1.5625rem 0.75rem;
+    background-color: var(--white);
+    width: calc(100% - 0.75rem - 0.75rem);
+
+    >input {
+        font-size: 1.0625rem;
+        padding: 0.5rem 3.5rem 0.5rem 1.5rem;
+        border: 1px solid var(--light-purple-line);
+        height: 2rem;
+
+        &::placeholder {
+            font-size: 1.0625rem;
+        }
+    }
+
+    >img {
+        position: absolute;
+        right: 2.25rem;
+        bottom: 2.0625rem;
+        width: 2rem;
+        height: 2rem;
+    }
+}
+
+// Media Queries
+
+@media (max-width: 431px) {
+    .mobile {
+        display: flex;
+    }
+
+    .searchbar-wrapper:not(.mobile),
+    h1 {
+        display: none;
+    }
+
+    .header-content {
+        height: unset;
+        padding: 0.9375rem 1rem;
+        background-color: var(--bg-color);
+    }
+
+    .logo {
+        gap: 0.6875rem;
+
+        >img:first-child {
+            width: 2.8125rem;
+            height: 2.8125rem;
+        }
+
+        >img:last-child {
+            width: 6.59388rem;
+            height: 1.01375rem;
+        }
+    }
+
+    .profile-info {
+        .avatar-wrapper {
+            width: 3.125rem;
+            height: 3.125rem;
+
+            >img {
+                width: 3.125rem;
+                height: 3.125rem;
+            }
+
+            .online-status {
+                width: 0.875rem;
+                height: 0.875rem;
+
+                img {
+                    width: 0.875rem;
+                    height: 0.875rem;
+                }
+            }
+        }
+
+        >button {
+            display: none;
+        }
+    }
+
+
 }

src/app/main/main.component.html

@@ -37,4 +37,7 @@
       <app-new-message ></app-new-message>
      }
     }
-</main>
+</main>
+<app-conversations class="mobile">
+</app-conversations>
+<button mat-flat-button class="new-dm mobile" type="submit" (click)="openComponent('newMessage')"><img src="../../assets/img/icons/edit_square-white.svg"></button>

src/app/main/main.component.scss

@@ -79,8 +79,94 @@ main {
     }
 }
 
+.new-dm {
+    position: fixed;
+    right: 1rem;
+    bottom: 2.25rem;
+    padding: 1rem;
+    width: 3.75rem;
+    height: 3.75rem;
+    transition: 100ms ease-out;
+    border-radius: 50%;
+
+    ::ng-deep::ng-deep .mat-mdc-button-persistent-ripple {
+        border-radius: 50%;
+        background: var(--purple-1);
+        overflow: hidden;
+        transition: 100ms ease-out;
+    }
+
+    ::ng-deep::ng-deep .mat-mdc-button-ripple {
+        border-radius: 50%;
+        overflow: hidden;
+    }
+
+    ::ng-deep::ng-deep .mdc-button__label {
+        color: var(--white);
+        font-family: Nunito;
+        font-size: 1.125rem;
+        padding: 0;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        letter-spacing: normal;
+
+        >img {
+            width: 1.5rem;
+            height: 1.5rem;
+        }
+    }
+
+    &:hover {
+
+        ::ng-deep::ng-deep .mat-mdc-button-persistent-ripple {
+            background-color: var(--purple-2);
+
+            &::before {
+                opacity: 0;
+            }
+        }
+    }
+}
+
 .closed:hover {
     >img {
         content: url(../../assets/img/icons/sidenav-open-purple.svg) !important;
     }
+}
+
+.mobile {
+    display: none;
+}
+
+
+
+// Media Queries
+
+@media (max-width: 431px) {
+    :host {
+        gap: 1.5625rem;
+        background-color: var(--white);
+        min-height: 100vh;
+    }
+
+    .mobile {
+        display: unset;
+    }
+
+    main {
+        display: none;
+    }
+
+    app-conversations {
+        margin-top: 11.6625rem;
+    }
+
+    app-header {
+        position: fixed;
+        top: 0;
+        right: 0;
+        left: 0;
+        z-index: 3;
+    }
 }

src/app/main/main.component.ts

@@ -11,6 +11,7 @@ import { DirectMessageComponent } from './chat/direct-message/direct-message.com
 import { UsersList } from '../../app/interfaces/users-list';
 import { NewMessageComponent } from './new-message/new-message.component';
 import { ChatService } from './chat/chat.service';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'app-main',
@@ -26,7 +27,8 @@ import { ChatService } from './chat/chat.service';
     ChatComponent,
     WelcomeScreenComponent,
     DirectMessageComponent,
-    NewMessageComponent
+    NewMessageComponent,
+    MatButtonModule
   ],
   templateUrl: './main.component.html',
   styleUrl: './main.component.scss'
@@ -47,6 +49,11 @@ export class MainComponent {
 
   }
 
+  openComponent(componentName: string,) {
+    this.chatService.setComponent(componentName);
+
+  }
+
   openThread() {
     this.threadDrawer.open();
   }