💄 Style: add ui for user-profile

.hintrc

@@ -9,6 +9,8 @@
       {
         "button-name": "off"
       }
-    ]
+    ],
+    "button-type": "off",
+    "no-inline-styles": "off"
   }
 }

src/app/app.routes.ts

@@ -30,12 +30,12 @@ export const routes: Routes = [
       },
       {
         path:'posts',
-        loadComponent: () => import('../app/views/fireblog-page/fireblog-page.component')
+        loadComponent: () => import('../app/components/fireblog-page/fireblog-page.component')
         .then(mod => mod.FireblogPageComponent)
       },
       {
         path:'blog-detail',
-        loadComponent: () => import('../app/views/fireblog-detail/fireblog-detail.component')
+        loadComponent: () => import('../app/components/fireblog-detail/fireblog-detail.component')
         .then(mod => mod.FireblogDetailComponent)
       }
     ]

src/app/components/create-post/create-post.component.html

@@ -1,19 +1,16 @@
 <section class="create-post">
   <div class="content">
-    <div class="profile">
-      <img id="profile-img" src="../../../assets/images/avatars/image-juliusomo.png" alt="" title="edit profile">
+    <div class="profile" (click)="toggleSidebarEvent()">
+      <img id="profile-img" src="../../../assets/images/avatars/image-juliusomo.png" alt="" title="toggle sidebar">
       <div>
         <img src="../../../assets/images/icon-edit.svg" alt="">
       </div>
     </div>
-
   </div>
   <div class="content-grp">
-    <textarea name="content" id="post"></textarea>
-    <button (click)="createPost()" title="create post">
-      create post
+    <textarea name="content" id="post" [(ngModel)]="content"></textarea>
+    <button mat-raised-button color="primary" (click)="createPost()" title="create post">
+      Create Post
     </button>
   </div>
-
-
 </section>

src/app/components/create-post/create-post.component.scss

@@ -1,6 +1,8 @@
 @use '../../../partials/variables' as *;
 
-section{
+
+
+section {
   display: flex;
   gap: 2.75rem;
   position: fixed !important;
@@ -12,27 +14,34 @@ section{
   right: 0;
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
 
-  .content{
+  .content {
     display: flex;
     gap: 3rem;
-    .profile{
+    cursor: pointer;
+
+    .profile {
       display: flex;
       gap: .25rem;
-      cursor: pointer;
-      #profile-img{
+
+      img{
+        width: 12px;
+        height: 12px;
+      }
+
+      #profile-img {
         width: 3rem;
         height: 3rem;
       }
-
     }
-
   }
-  .content-grp{
+
+  .content-grp {
     display: flex;
     flex-direction: column;
     gap: .5rem;
     width: 100%;
-    textarea{
+
+    textarea {
       resize: none;
       border: none;
       outline: none;
@@ -46,7 +55,7 @@ section{
       color: $palesky;
     }
 
-    button{
+    button {
       cursor: pointer;
       align-self: end;
       margin-right: 7rem;

src/app/components/create-post/create-post.component.ts

@@ -1,21 +1,26 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';
 import { FireblogFacadeService } from '../../services/fireblog/fireblog-facade.service';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Subscription } from 'rxjs';
-import { IUser } from '../../services/blog.interface'; // Make sure to import IUser
+import { IUser } from '../../services/blog.interface';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-create-post',
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, MatButtonModule, MatIconModule],
   templateUrl: './create-post.component.html',
   styleUrl: './create-post.component.scss'
 })
 export class CreatePostComponent implements OnInit, OnDestroy {
+  @Output() toggleSidebar = new EventEmitter<boolean>();
+
   currentUser: IUser | null = null;
   private userSubscription: Subscription | undefined;
   content = '';
+  isSidebarOpen = false;
 
   constructor(private blogFacade: FireblogFacadeService) {}
 
@@ -37,7 +42,7 @@ export class CreatePostComponent implements OnInit, OnDestroy {
       this.blogFacade.createBlogPost(this.currentUser, this.content)
         .then(() => {
           console.log('Post created successfully');
-          this.content = ''; 
+          this.content = '';
         })
         .catch(error => {
           console.error('Error creating post:', error);
@@ -46,4 +51,9 @@ export class CreatePostComponent implements OnInit, OnDestroy {
       console.error('Cannot create post: User not logged in or content is empty');
     }
   }
+
+  toggleSidebarEvent() {
+    this.isSidebarOpen = !this.isSidebarOpen;
+    this.toggleSidebar.emit(this.isSidebarOpen);
+  }
 }

src/app/components/fireblog-page/fireblog-page.component.html

@@ -0,0 +1,16 @@
+<mat-sidenav-container class="fireblog-container">
+  <mat-sidenav #sidenav [opened]="!isSidebarOpen" mode="over" position="start">
+    <!-- Add your sidebar content here -->
+    <app-user-profile/>
+  </mat-sidenav>
+
+  <mat-sidenav-content>
+    <div class="fireblog-content">
+      <section class="posts-section">
+        <h2>Fireblog Posts</h2>
+        <app-post-card></app-post-card>
+      </section>
+      <app-create-post class="create-post-section" (toggleSidebar)="toggleSidebar($event)"></app-create-post>
+    </div>
+  </mat-sidenav-content>
+</mat-sidenav-container>

src/app/components/fireblog-page/fireblog-page.component.scss

@@ -0,0 +1,108 @@
+@use '../../../partials/variables' as *;
+
+.fireblog-container {
+  padding-top: 2rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: transparent;
+  height: 100%;
+  overflow: hidden;
+
+  mat-sidenav-container {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  mat-sidenav {
+    width: 300px;
+    padding: 1rem;
+  }
+
+  mat-sidenav-content {
+    display: flex;
+    flex-direction: column;
+    background-color: transparent;
+    overflow: hidden;
+
+    .fireblog-content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+
+      .posts-section {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        padding: 1.25rem;
+        padding-bottom: 7rem;
+
+        h2 {
+          text-align: center;
+          color: $blueviolet;
+          font-family: $titlefont;
+        }
+      }
+    }
+  }
+}
+
+.create-post-section {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+}
+
+// New styles for user profile
+.user-profile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem;
+
+  h3 {
+    color: $blueviolet;
+    font-family: $titlefont;
+    margin-bottom: 1rem;
+  }
+
+  .profile-form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .profile-image {
+      position: relative;
+      margin-bottom: 1rem;
+
+      img {
+        width: 150px;
+        height: 150px;
+        border-radius: 50%;
+        object-fit: cover;
+      }
+
+      .upload-btn {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        background-color: $blueviolet;
+      }
+    }
+
+    mat-form-field {
+      width: 100%;
+      margin-bottom: 1rem;
+    }
+
+    button[mat-raised-button] {
+      background-color: $blueviolet;
+      color: white;
+    }
+  }
+}

src/app/components/fireblog-page/fireblog-page.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { PostCardComponent } from "../post-card/post-card.component";
+import { CreatePostComponent } from "../create-post/create-post.component";
+import { UserProfileComponent } from "../../views/auth/user-profile/user-profile.component";
+
+@Component({
+  selector: 'app-fireblog-page',
+  templateUrl: './fireblog-page.component.html',
+  styleUrls: ['./fireblog-page.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatSidenavModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule,
+    MatSnackBarModule,
+    PostCardComponent,
+    CreatePostComponent,
+    UserProfileComponent
+]
+})
+export class FireblogPageComponent implements OnInit {
+  @ViewChild('sidenav') sidenav!: MatSidenav;
+
+  isSidebarOpen = false;
+
+
+  ngOnInit(): void {}
+
+  toggleSidebar(event: boolean) {
+    this.isSidebarOpen = event;
+    this.sidenav.toggle();
+  }
+
+
+}

src/app/views/auth/user-profile/user-profile.component.html

@@ -1 +1,24 @@
-<p>user-profile works!</p>
+<section>
+  <h3>User Profile</h3>
+  <form class="profile-form">
+    <div class="profile-image">
+      <img id="profile-img" #userAvatar src="../../../assets/images/avatars/image-juliusomo.png" alt="User Avatar" id="userAvatar">
+      <button mat-mini-fab color="primary" class="upload-btn" (click)="onUploadButtonClick()">
+        <mat-icon>add_a_photo</mat-icon>
+      </button>
+      <input #imageUpload type="file" id="imageUpload" accept="image/*" style="display: none;" (change)="onImageSelected($event)">
+    </div>
+    <mat-form-field appearance="outline">
+      <mat-label>Username</mat-label>
+      <input matInput placeholder="Enter your username">
+    </mat-form-field>
+    <mat-form-field appearance="outline">
+      <mat-label>Email</mat-label>
+      <input matInput placeholder="Enter your email" type="email">
+    </mat-form-field>
+    <div class="button-group">
+      <button mat-raised-button color="primary" (click)="saveChanges()">Save Changes</button>
+      <button mat-raised-button color="warn" (click)="logOut()">Log Out</button>
+    </div>
+  </form>
+</section>

src/app/views/auth/user-profile/user-profile.component.scss

@@ -0,0 +1,37 @@
+section {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  .profile-form {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+
+    .profile-image {
+      position: relative;
+      width: 4rem;
+      height: 4rem;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 50%;
+      }
+
+      .upload-btn {
+        position: absolute;
+        bottom: -0.5rem;
+        right: -1.75rem;
+        transform: scale(0.7);
+      }
+    }
+
+    .button-group{
+      display: flex;
+      gap: 0.5rem;
+      justify-content: flex-end;
+    }
+  }
+}