family connect

src/app/components/family-connect/family-connect.component.html

@@ -1,5 +1,5 @@
 
-  <ion-card class="connect-invite">
+  <ion-card class="connect-invite" *ngIf="show_invite==true;">
     <ion-card-header>
       <ion-card-subtitle><div>You have an invitation waiting</div></ion-card-subtitle>
     </ion-card-header>
@@ -13,7 +13,7 @@
     </ion-card-content>
   </ion-card>
   <p></p>
-  <ion-card class="connect-card">
+  <ion-card class="connect-card" *ngIf="show_connect == true;">
     <ion-card-header>
       <ion-card-title>Family Connect</ion-card-title>
 <!--      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>-->

src/app/components/family-connect/family-connect.component.ts

@@ -6,6 +6,8 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./family-connect.component.scss'],
 })
 export class FamilyConnectComponent implements OnInit {
+show_invite:boolean = false;
+show_connect: boolean = false;
 
   constructor() { }
 

src/app/pages/my-course/my-course.page.html

@@ -17,12 +17,12 @@
     </ion-segment>
 
     <div *ngIf="tabs =='on'">
-
+      <div class="top_items">
+        <ion-label class="bold">Available Task(s)</ion-label>
+        <ion-icon slot="start" name="options-outline" (click)="toggleFilter()" color="primary"></ion-icon>
+      </div>
       <div class="lesson">
-        <div class="flex">
-          <ion-label class="bold">Available Task(s)</ion-label>
-        </div>
-        <div>
+        <div *ngIf="show_filter==true;">
           <ion-searchbar placeholder="Filter by name"></ion-searchbar>
         </div>
         <div class="video" *ngFor="let item of jobsData;" (click)="viewMarketItem( item )">

src/app/pages/my-course/my-course.page.scss

@@ -29,6 +29,7 @@ ion-content {
 
 
 
+
     .flex {
       display: flex;
       align-items: center;
@@ -107,3 +108,28 @@ ion-content {
     }
   }
 }
+
+.top_items {
+  //background-color: rebeccapurple;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid lightgrey;
+  padding-bottom: 10px;
+    .bold{
+      font-weight: bolder;
+    }
+  .stud {
+    display: flex;
+    align-items: center;
+
+    ion-icon {
+      margin-right: 5px;
+    }
+
+    ion-label {
+      color: grey;
+    }
+  }
+}

src/app/pages/my-course/my-course.page.ts

@@ -56,4 +56,9 @@ export class MyCoursePage implements OnInit {
       this.session_image_server = this.marketDataService.session_image_server;
     }, 5000);
   }
+
+  show_filter:boolean= false;
+  toggleFilter(){
+   this.show_filter = !this.show_filter;
+  }
 }