adds more student component

src/app/app-routing.module.ts

@@ -4,12 +4,18 @@ import { LoginComponent } from './login/login.component';
 import { SignupComponent } from './signup/signup.component';
 import { CoursesComponent } from './student/courses/courses.component';
 import { ProgressComponent } from './student/progress/progress.component';
+import { ProfileComponent } from './student/profile/profile.component';
+import { TeachersComponent } from './student/teachers/teachers.component';
 
 const routes: Routes = [
   {path: 'login', component:LoginComponent},
   {path: 'signup', component:SignupComponent},
   {path: 'courses', component:CoursesComponent},
-  {path: 'progress', component:ProgressComponent}
+  {path: 'progress', component:ProgressComponent},
+  { path: 'profile', component: ProfileComponent },
+  { path: 'teachers', component: TeachersComponent }
+
+
 
 ];
 

src/app/app.component.ts

@@ -13,7 +13,7 @@ export class AppComponent {
   constructor(private router: Router){
     this.router.events.subscribe((event:any)=>{
       if(event instanceof NavigationEnd){
-        this.showHeaderFooter = !(event.url ==='/login' ||event.url==='/signup' ||event.url==='/courses' ||event.url==='/progress');
+        this.showHeaderFooter = !(event.url === '/login' || event.url === '/signup' || event.url === '/courses' || event.url === '/progress' || event.url === '/profile' || event.url === '/teachers');
       }
     });
   }

src/app/app.module.ts

@@ -15,6 +15,8 @@ import { SignupComponent } from './signup/signup.component';
 import { CoursesComponent } from './student/courses/courses.component';
 import { ProgressComponent } from './student/progress/progress.component';
 import { ServiceWorkerModule } from '@angular/service-worker';
+import { ProfileComponent } from './student/profile/profile.component';
+import { TeachersComponent } from './student/teachers/teachers.component';
 
 @NgModule({
   declarations: [
@@ -29,7 +31,9 @@ import { ServiceWorkerModule } from '@angular/service-worker';
     LoginComponent,
     SignupComponent,
     CoursesComponent,
-    ProgressComponent
+    ProgressComponent,
+    ProfileComponent,
+    TeachersComponent
   ],
   imports: [
     BrowserModule,

src/app/signup/signup.component.css

@@ -33,10 +33,11 @@ a:hover{
 }
 
 .panel{
-  max-height: calc(100%-70px);
+  max-height: 100%;
   box-shadow: 20px 20px 80px rgb(218,218,218);
   border-radius: 12px;
-  margin-top:10px;
+  margin-top:20%;
+
 }
 
 .input-field{

src/app/student/courses/courses.component.css

@@ -35,3 +35,7 @@ section>p{
   transform: translateY(-10%);
 }
 
+.courses_component {
+  padding: 0% 0% 50% 0%;
+}
+

src/app/student/courses/courses.component.html

@@ -1,3 +1,4 @@
+<div class="courses_component">
 <header class="p-3 mb-3 border-bottom bg-color light">
   <div class="container">
     <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
@@ -31,14 +32,15 @@
           <section class="mt-4 text-center">
             <h5 class="">My Stuff</h5>
             <ul class="list-unstyled">
-              <li><a class="nav-link my-3" routerLink="/courses">Courses</a></li>
+              <li><a class="nav-link my-3 p-3" routerLink="/courses">Courses</a></li>
             </ul>
           </section>
           <section class="text-center">
             <h5>My Account</h5>
             <ul class="list-unstyled">
-              <li><a class="nav-link my-3" routerLink="/progress">Progress</a></li>
-              <li><a class="nav-link my-3" routerLink="/Profile">Profile</a></li>
+              <li><a class="nav-link my-3 p-3" routerLink="/progress">Progress</a></li>
+              <li><a class="nav-link my-3 p-3" routerLink="/Profile">Profile</a></li>
+              <li><a class="nav-link my-3 p-3" routerLink="/Profile">Teachers</a></li>
             </ul>
           </section>
         </nav>
@@ -150,4 +152,5 @@ <h1>My Courses</h1>
       </div>
     </div>
   </div>
+</div>
 </div>

src/app/student/profile/profile.component.css

@@ -0,0 +1,3 @@
+.profile_component {
+  padding: 0% 0% 50% 0%;
+}

src/app/student/profile/profile.component.html

@@ -0,0 +1,52 @@
+<div class="profile_component">
+<header class="p-3 mb-3 border-bottom bg-color light">
+  <div class="container">
+    <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
+      <button class="border-0 bg-primary px-2 mx-2 rounded">Your EXP
+        <span class="fa fa-bolt"></span>
+      </button>
+
+      <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
+        <li><a href="#" class="nav-link px-2 link-dark">Courses</a></li>
+        <li><a href="#" class="nav-link px-2 link-dark">Practice</a></li>
+        <li><a href="#" class="nav-link px-2 link-dark">Resources</a></li>
+      </ul>
+
+      <p class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3 text-center">username</p>
+
+      <div class="user_profile">
+        <a routerLink="/" class="text-decoration-none" id="user">
+          <img src="https://img.freepik.com/free-vector/businessman-character-avatar-isolated_24877-60111.jpg"
+            alt="image" width="32" height="32" class="rounded-circle">
+        </a>
+      </div>
+    </div>
+  </div>
+</header>
+
+<div class="container">
+  <div class="row">
+    <div class="col-sm-12 col-md-2 nav_content mt-0">
+      <main class="container">
+        <nav id="navbar">
+          <section class="mt-4 text-center">
+            <h5 class="">My Stuff</h5>
+            <ul class="list-unstyled">
+              <li><a class="nav-link my-3 p-3" routerLink="/courses">Courses</a></li>
+            </ul>
+          </section>
+          <section class="text-center">
+            <h5>My Account</h5>
+            <ul class="list-unstyled">
+              <li><a class="nav-link my-3 p-3" routerLink="/progress">Progress</a></li>
+              <li><a class="nav-link my-3 p-3" routerLink="/Profile">Profile</a></li>
+              <li><a class="nav-link my-3 p-3" routerLink="/teachers">Teachers</a></li>
+            </ul>
+          </section>
+        </nav>
+      </main>
+
+    </div>
+  </div>
+</div>
+</div>

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

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

src/app/student/profile/profile.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrl: './profile.component.css'
+})
+export class ProfileComponent {
+
+}

src/app/student/progress/progress.component.css

@@ -0,0 +1,10 @@
+select{
+  height: 40px;
+  width:90%;
+  border-radius:8px;
+  text-align: center;
+  margin: 10px;
+}
+.progress_component{
+  padding: 0% 0% 50% 0%;
+}