added the sub routes for profile page

src/app/app.routes.ts

@@ -6,6 +6,9 @@ import { authGuard } from './shared/services/guard/auth.guard';
 import { MainLayoutComponent } from './shared/components/main-layout/main-layout.component';
 import { UsersComponent } from './users/users.component';
 import { ProfileComponent } from './profile/profile.component';
+import { FollowersComponent } from './profile/followers/followers.component';
+import { FollowingComponent } from './profile/following/following.component';
+import { PostsComponent } from './profile/posts/posts.component';
 
 export const routes: Routes = [
     { path: '', redirectTo: '/sign-in', pathMatch: 'full' },
@@ -17,7 +20,14 @@ export const routes: Routes = [
         children: [
             { path: 'feed', component: FeedComponent, canActivate: [authGuard] },
             { path: 'users', component: UsersComponent, canActivate: [authGuard] },
-            { path: 'profile', component: ProfileComponent, canActivate: [authGuard] }
+            {
+                path: 'profile', component: ProfileComponent, canActivate: [authGuard], children: [
+                    { path: '', redirectTo: 'posts', pathMatch: 'full' },
+                    { path: 'posts', component: PostsComponent },
+                    { path: 'followers', component: FollowersComponent },
+                    { path: 'following', component: FollowingComponent }
+                ]
+            }
         ]
     },
     { path: '**', redirectTo: '/sign-in' }

src/app/profile/followers/followers.component.html

@@ -0,0 +1 @@
+<p>followers works!</p>

src/app/profile/followers/followers.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FollowersComponent } from './followers.component';
+
+describe('FollowersComponent', () => {
+  let component: FollowersComponent;
+  let fixture: ComponentFixture<FollowersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FollowersComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FollowersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/profile/followers/followers.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-followers',
+  standalone: true,
+  imports: [],
+  templateUrl: './followers.component.html',
+  styleUrl: './followers.component.scss'
+})
+export class FollowersComponent {
+
+}

src/app/profile/following/following.component.html

@@ -0,0 +1 @@
+<p>following works!</p>

src/app/profile/following/following.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FollowingComponent } from './following.component';
+
+describe('FollowingComponent', () => {
+  let component: FollowingComponent;
+  let fixture: ComponentFixture<FollowingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FollowingComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FollowingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/profile/following/following.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-following',
+  standalone: true,
+  imports: [],
+  templateUrl: './following.component.html',
+  styleUrl: './following.component.scss'
+})
+export class FollowingComponent {
+
+}

src/app/profile/posts/posts.component.html

@@ -0,0 +1 @@
+<p>posts works!</p>

src/app/profile/posts/posts.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostsComponent } from './posts.component';
+
+describe('PostsComponent', () => {
+  let component: PostsComponent;
+  let fixture: ComponentFixture<PostsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PostsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PostsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/profile/posts/posts.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-posts',
+  standalone: true,
+  imports: [],
+  templateUrl: './posts.component.html',
+  styleUrl: './posts.component.scss'
+})
+export class PostsComponent {
+
+}

src/app/profile/profile.component.html

@@ -12,4 +12,14 @@
     </div>
   </div>
   }
+  <ul class="navigation-header">
+    <li routerLink="/app/profile/posts" routerLinkActive="active">Posts</li>
+    <li routerLink="/app/profile/followers" routerLinkActive="active">
+      Followers
+    </li>
+    <li routerLink="/app/profile/following" routerLinkActive="active">
+      Following
+    </li>
+  </ul>
+  <router-outlet></router-outlet>
 </section>

src/app/profile/profile.component.scss

@@ -6,7 +6,7 @@
 
 .user-profile {
   display: grid;
-  grid-template-columns: 1fr 3fr;
+  grid-template-columns: 1fr 2fr;
   gap: 10px;
   padding: 10px 0;
 }
@@ -29,7 +29,10 @@
 
 .user-details {
   grid-column: 2;
-
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
   .user-name {
     margin: 0;
     padding: 0;
@@ -42,3 +45,32 @@
     gap: 10px;
   }
 }
+.navigation-header {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  width: 100%;
+  padding: 0;
+  justify-content: space-around;
+  border-top: 0.5px solid rgb(190, 190, 190);
+  .active {
+    border-top: 2px solid rgb(101, 101, 101);
+  }
+  li {
+    padding: 10px 0;
+  }
+}
+@media (max-width: 768px) {
+  .feed-container {
+    padding: 10px;
+  }
+  .navigation-header {
+    width: 100%;
+  }
+  .user-details {
+    .user-name {
+      font-size: 28px;
+    }
+  }
+}

src/app/profile/profile.component.ts

@@ -1,14 +1,13 @@
 import { Component, inject } from '@angular/core';
 import { Auth } from '@angular/fire/auth';
 import { FirestoreService } from '../shared/services/firestore/firestore.service';
-import { Observable, of } from 'rxjs';
 import { CommonModule } from '@angular/common';
-import { User } from '../shared/types/User';
+import { RouterModule, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-profile',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './profile.component.html',
   styleUrl: './profile.component.scss'
 })

src/app/sign-up/sign-up.component.ts

@@ -28,7 +28,7 @@ export class SignUpComponent {
   private readonly formBuilder: FormBuilder = inject(FormBuilder);
   private readonly snackbarService: SnackbarService = inject(SnackbarService);
 
-  private firestoreService: FirestoreService = inject(FirestoreService);
+  private firestore: FirestoreService = inject(FirestoreService);
   constructor() {
     this.registerForm = this.formBuilder.group({
       name: ['', Validators.required],
@@ -56,7 +56,7 @@ export class SignUpComponent {
           photoUrl
         };
 
-        await this.firestoreService.addUserDetails(uid, userDetails);
+        await this.firestore.addUserDetails(uid, userDetails);
         this.snackbarService.show('User details added to Firestore');
 
         await updateProfile(userCredential.user, { displayName: name });
@@ -81,7 +81,7 @@ export class SignUpComponent {
 
       const userDetails: UserData = { uid, name, email, photoUrl };
 
-      await this.firestoreService.addUserDetails(uid, userDetails);
+      await this.firestore.addUserDetails(uid, userDetails);
       this.snackbarService.show('User details added to Firestore');
 
       this.router.navigateByUrl('app/feed');