Login projects home profile page

frontend/sitcomm/package-lock.json

@@ -18,6 +18,7 @@
         "@angular/platform-browser": "^14.2.0",
         "@angular/platform-browser-dynamic": "^14.2.0",
         "@angular/router": "^14.2.0",
+        "ngx-cookie-service": "^14.0.1",
         "rxjs": "~7.5.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.11.4"
@@ -7990,6 +7991,18 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/ngx-cookie-service": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-14.0.1.tgz",
+      "integrity": "sha512-PHjpA/bpp1ZgvQ2AWdXA6oxPQgE9k0WljQ7tvUH/u0Acl6p6akzF8kWlQiWxkgR3hBs7xB3paIsTk6GKdtakMg==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^14.0.0",
+        "@angular/core": "^14.0.0"
+      }
+    },
     "node_modules/nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
@@ -17648,6 +17661,14 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "ngx-cookie-service": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-14.0.1.tgz",
+      "integrity": "sha512-PHjpA/bpp1ZgvQ2AWdXA6oxPQgE9k0WljQ7tvUH/u0Acl6p6akzF8kWlQiWxkgR3hBs7xB3paIsTk6GKdtakMg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",

frontend/sitcomm/package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "^14.2.0",
     "@angular/platform-browser-dynamic": "^14.2.0",
     "@angular/router": "^14.2.0",
+    "ngx-cookie-service": "^14.0.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
@@ -37,4 +38,4 @@
     "karma-jasmine-html-reporter": "~2.0.0",
     "typescript": "~4.7.2"
   }
-}
\ No newline at end of file
+}

frontend/sitcomm/src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [];
+import { LoginComponent } from './login/login.component';
+import { HomeComponent } from './home/home.component';
+import { ProfileComponent } from './profile/profile.component';
+import { GithubComponent } from './github/github.component';
+import { SlackComponent } from './slack/slack.component';
+import { JiraComponent } from './jira/jira.component';
+import { ConfluenceComponent } from './confluence/confluence.component';
+import { ProjectComponent } from './project/project.component';
+const routes: Routes = [
+  { path: 'login', component: LoginComponent },
+  { path: 'home', component: HomeComponent },
+  { path: 'profile', component: ProfileComponent },
+  { path: 'github', component: GithubComponent },
+  { path: 'slack', component: SlackComponent },
+  { path: 'jira', component: JiraComponent },
+  { path: 'confluence', component: ConfluenceComponent },
+  { path: 'project', component: ProjectComponent},
+  { path: '', redirectTo: '/login', pathMatch: 'full' }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

frontend/sitcomm/src/app/app.component.ts

 import { Component } from '@angular/core';
-
+import { CookieService } from 'ngx-cookie-service';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'sitcomm';
+  private cookieName = 'default';
+  private all_cookies:any=''
+  title = 'Sitcomm';
+  inst = this;
+  constructor(private cookieService: CookieService) {
+  }
+  setCookie(name: string,value: string){
+    this.cookieService.set(name,value);
+  }
+  getCookie(name: string){
+    return this.cookieService.get(name);
+  }
+  deleteCookie(name: string){
+    this.cookieService.delete(name);
+  }
+  getAllCookies(){
+    this.all_cookies = this.cookieService.getAll();
+  }
+  ngOnInit(): void {
+    this.setCookie(this.cookieName,'test');
+    this.getCookie(this.cookieName);
+    this.deleteCookie(this.cookieName);
+    this.getAllCookies();
+    this.all_cookies = JSON.stringify(this.all_cookies);
+  }
 }

frontend/sitcomm/src/app/app.module.ts

@@ -4,17 +4,54 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
+import { LoginComponent } from './login/login.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CookieService } from 'ngx-cookie-service';
+import { HomeComponent } from './home/home.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatCardModule } from '@angular/material/card';
+import { ProfileComponent } from './profile/profile.component';
+import { GithubComponent } from './github/github.component';
+import { SlackComponent } from './slack/slack.component';
+import { JiraComponent } from './jira/jira.component';
+import { ConfluenceComponent } from './confluence/confluence.component';
+import { ProjectComponent } from './project/project.component';
+import { MatTab, MatTabsModule } from '@angular/material/tabs';
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    LoginComponent,
+    HomeComponent,
+    ProfileComponent,
+    GithubComponent,
+    SlackComponent,
+    JiraComponent,
+    ConfluenceComponent,
+    ProjectComponent,
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatIconModule,
+    MatToolbarModule,
+    MatSidenavModule,
+    MatGridListModule,
+    MatCardModule,
+    MatTabsModule
   ],
-  providers: [],
+  providers: [CookieService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

frontend/sitcomm/src/app/confluence/confluence.component.html

+<p>confluence works!</p>

frontend/sitcomm/src/app/confluence/confluence.component.spec.ts

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

frontend/sitcomm/src/app/confluence/confluence.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-confluence',
+  templateUrl: './confluence.component.html',
+  styleUrls: ['./confluence.component.css']
+})
+export class ConfluenceComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/sitcomm/src/app/github/github.component.html

+<p>github works!</p>

frontend/sitcomm/src/app/github/github.component.spec.ts

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

frontend/sitcomm/src/app/github/github.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-github',
+  templateUrl: './github.component.html',
+  styleUrls: ['./github.component.css']
+})
+export class GithubComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/sitcomm/src/app/home/home.component.css

+#nav{
+    display:flex;
+    justify-content: space-between;
+}
+.example-container {
+  width: 100%;
+  height: 100%;
+  background-color: #f5f5f5;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+}
+#nav-options{
+    display:flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+.nav-btns{
+    justify-content: center;
+    padding: 10px;
+}
+.example-sidenav {
+  padding: 20px;
+}
+
+.mat-card-css{
+  width: 85%;
+  height: 85%;
+  background-color: snow;
+}
\ No newline at end of file

frontend/sitcomm/src/app/home/home.component.html

+
+<mat-drawer-container class="example-container" autosize>
+  <mat-drawer #drawer id='nav-options' class="flex-container example-sidenav" mode="side">
+    <div class="flex-item nav-btns">
+      <h1 style="justify-content: center;">Go To</h1>
+    </div>
+    <div class="flex-item nav-btns">
+    <button color="primary" style="width: 100%;"class="" [routerLink]="['/github']" mat-raised-button>
+      Github
+    </button>
+    </div>
+    <div class="flex-item nav-btns">
+    <button color="primary" style="width: 100%;" [routerLink]="['/jira']" mat-raised-button>
+      Jira
+    </button>
+    </div>
+    <div class="flex-item nav-btns">
+    <button color="primary" style="width: 100%;"class="" [routerLink]="['/confluence']" mat-raised-button>
+      Confluence
+    </button>
+    </div>
+    <div class="flex-item nav-btns">
+    <button color="primary" style="width: 100%;"class="" [routerLink]="['/slack']" mat-raised-button>
+      Slack
+    </button>
+    </div>
+  </mat-drawer>
+  <p>
+    <mat-toolbar id='nav' color="primary" class="flex-container">
+      <div class="flex-item">
+        <button mat-icon-button class="example-icon" (click)="drawer.toggle()" aria-label="">
+          <mat-icon>menu</mat-icon>
+        </button>
+        <span>Projects</span>
+        <span class="example-spacer"></span>
+      </div>
+      <div class="flex-item">
+        <button mat-icon-button class="" aria-label="" [routerLink]="['/profile']">
+          <mat-icon>person_pin</mat-icon>
+        </button>
+        <button mat-icon-button class="" aria-label="">
+          <mat-icon>settings</mat-icon>
+        </button>
+      </div>
+    </mat-toolbar>
+    <mat-grid-list cols={{calColCount()}} rowHeight="2:1" [gutterSize]="'10px'" style="padding: 10px;">
+      <mat-grid-tile
+          *ngFor="let tile of projects"
+          [colspan]=1
+          [rowspan]=1>
+        <mat-card class="mat-card-css">
+          <mat-card-title>{{tile.name}}</mat-card-title>
+          <mat-card-content>
+            <p>{{tile.description}}</p>
+            <p>{{tile.content}}</p>
+          </mat-card-content>
+          <mat-card-actions>
+            <button mat-button [routerLink]="['/project']" [state]="{id:tile.id, name: tile.name}">Open</button>
+          </mat-card-actions>
+        </mat-card>
+      </mat-grid-tile>
+    </mat-grid-list> 
+  </p>
+</mat-drawer-container>
\ No newline at end of file

frontend/sitcomm/src/app/home/home.component.spec.ts

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

frontend/sitcomm/src/app/home/home.component.ts

+import { Component, OnInit } from '@angular/core';
+import { CookieService } from 'ngx-cookie-service';
+import { PROJECTS } from './projects';
+export interface Tile {
+  color: string;
+  cols: number;
+  rows: number;
+  text: string;
+}
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+  constructor(private cookieService: CookieService) { }
+  setCookie(name: string,value: string){
+    this.cookieService.set(name,value);
+  }
+  getCookie(name: string){
+    return this.cookieService.get(name);
+  }
+  deleteCookie(name: string){
+    this.cookieService.delete(name);
+  }
+  calColCount(){
+    console.log(window.innerWidth);
+    if(window.innerWidth > 1000){
+      return 3;
+    }else if(window.innerWidth > 600){
+      return 2;
+    }else{
+      return 1;
+    }
+  }
+  ngOnInit(): void {
+  }
+  tiles: Tile[] = [
+    {text: 'One', cols: 1, rows: 1, color: 'white'},
+  ];
+  projects = PROJECTS;
+}

frontend/sitcomm/src/app/home/projects.ts

+export interface Projects{
+    id: number;
+    name: string;
+    description: string;
+
+}
+
+export const PROJECTS = [
+    {id: 1, name: 'Project 1', description: 'This is project 1', content: 'BLAH BLAH BLAH'},
+    {id: 2, name: 'Project 2', description: 'This is project 2', content: 'BLAH BLAH BLAH'},
+    {id: 3, name: 'Project 3', description: 'This is project 3', content: 'BLAH BLAH BLAH'},
+    {id: 4, name: 'Project 4', description: 'This is project 4', content: 'BLAH BLAH BLAH'},
+    {id: 5, name: 'Project 5', description: 'This is project 5', content: 'BLAH BLAH BLAH'},
+]
\ No newline at end of file

frontend/sitcomm/src/app/jira/jira.component.html

+<p>jira works!</p>

frontend/sitcomm/src/app/jira/jira.component.spec.ts

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

frontend/sitcomm/src/app/jira/jira.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-jira',
+  templateUrl: './jira.component.html',
+  styleUrls: ['./jira.component.css']
+})
+export class JiraComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/sitcomm/src/app/login/login.component.css

+#login-form{
+    width: 300px;
+    margin: 0 auto;
+    margin-top: 100px;
+    display: flex;
+    flex-direction: column;
+}
+.flex-item{
+    margin-bottom: 10px;
+}
\ No newline at end of file

frontend/sitcomm/src/app/login/login.component.html

+<div id="login-form" class="flex-container column">
+    <mat-form-field class="flex-item">
+        <mat-label>Email</mat-label>
+        <input matInput placeholder="Email" [formControl]="email">
+        <mat-error *ngIf="email.invalid">Email is required {{getErrorMessage()}}</mat-error>
+    </mat-form-field>
+    <mat-form-field class="flex-item">
+        <mat-label>Password</mat-label>
+        <input matInput placeholder="Password" [formControl]="password">
+        <mat-error *ngIf="password.invalid">Password is required {{getErrorMessage()}}</mat-error>
+    </mat-form-field>
+    <button class="flex-item" mat-raised-button color="primary" [routerLink]="['/home']" (click)="login()">
+        Login
+    </button>
+    <button class="flex-item" mat-raised-button color="primary" (click)="register()">
+        Register here
+    </button>
+</div>

frontend/sitcomm/src/app/login/login.component.spec.ts

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

frontend/sitcomm/src/app/login/login.component.ts

+import { Component, OnInit } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { CookieService } from 'ngx-cookie-service';
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit {
+  email = new FormControl('', [Validators.required, Validators.email]);
+  password = new FormControl('', [Validators.required]);
+  getErrorMessage() {
+    if (this.email.hasError('required')) {
+      return 'You must enter a value';
+    }
+    return this.email.hasError('email') ? 'Not a valid email' : '';
+  }
+  constructor(private cookieService: CookieService) {
+    
+  }
+  login() {
+    console.log(this.email.value);
+    console.log(this.password.value);
+    this.setCookie('email',String(this.email.value));
+    this.setCookie('password',String(this.password.value));
+    this.setCookie('login','true');
+
+  }
+  gotoRegister() {
+    console.log('gotoRegister');
+  }
+  register(){
+    this.setCookie('email',String(this.email.value));
+    this.setCookie('password',String(this.password.value));
+    console.log(this.email.value);
+  }
+  setCookie(name: string,value: string){
+    this.cookieService.set(name,value);
+  }
+  getCookie(name: string){
+    return this.cookieService.get(name);
+  }
+  deleteCookie(name: string){
+    this.cookieService.delete(name);
+  }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/sitcomm/src/app/profile/profile.component.css

+.example-card {
+  max-width: 400px;
+}
+
+.example-header-image {
+  background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
+  background-size: cover;
+}
+#nav{
+    display:flex;
+    justify-content: space-between;
+}
+.example-container {
+  width: 100%;
+  height: 100%;
+  background-color: #f5f5f5;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+}
+#nav-options{
+    display:flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+.nav-btns{
+    justify-content: center;
+    padding: 10px;
+}
+.example-sidenav {
+  padding: 20px;
+}
+
+.mat-card-css{
+  width: 85%;
+  height: 85%;
+  background-color: snow;
+}
\ No newline at end of file

frontend/sitcomm/src/app/profile/profile.component.html

+<mat-drawer-container class="example-container" autosize>
+  <mat-drawer #drawer id='nav-options' class="flex-container example-sidenav" mode="side">
+    <div class="flex-item nav-btns">
+      <h1 style="justify-content: center;">Go To</h1>
+    </div>
+    <div class="flex-item nav-btns">
+    <button color="primary" style="width: 100%;"class="" [routerLink]="['/github']" mat-raised-button>
+      Github
+    </button>
+    </div>
+    <div class="flex-item nav-btns">
+    <button color="primary" style="width: 100%;" [routerLink]="['/jira']" mat-raised-button>
+      Jira
+    </button>
+    </div>
+    <div class="flex-item nav-btns">
+    <button color="primary" style="width: 100%;"class="" [routerLink]="['/confluence']" mat-raised-button>
+      Confluence
+    </button>
+    </div>
+    <div class="flex-item nav-btns">
+    <button color="primary" style="width: 100%;"class="" [routerLink]="['/slack']" mat-raised-button>
+      Slack
+    </button>
+    </div>
+  </mat-drawer>
+  <p>
+    <mat-toolbar id='nav' color="primary" class="flex-container">
+      <div class="flex-item">
+        <button mat-icon-button class="example-icon" (click)="drawer.toggle()" aria-label="">
+          <mat-icon>menu</mat-icon>
+        </button>
+        <span>Projects</span>
+        <span class="example-spacer"></span>
+      </div>
+      <div class="flex-item">
+        <button mat-icon-button class="" aria-label="" [routerLink]="['/profile']">
+          <mat-icon>person_pin</mat-icon>
+        </button>
+        <button mat-icon-button class="" aria-label="">
+          <mat-icon>settings</mat-icon>
+        </button>
+      </div>
+    </mat-toolbar>
+  </p>
+    <div>
+        <mat-card class="example-card">
+        <mat-card-header>
+            <div mat-card-avatar class="example-header-image"></div>
+            <mat-card-title>Shiba Inu</mat-card-title>
+            <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+        </mat-card-header>
+        <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
+        <mat-card-content>
+            <p>
+            The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
+            A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
+            bred for hunting.
+            </p>
+                </mat-card-content>
+                <mat-card-actions>
+                    <button mat-button>Edit Profile</button>
+                </mat-card-actions>
+                </mat-card>
+    </div>
+</mat-drawer-container>

frontend/sitcomm/src/app/profile/profile.component.spec.ts

+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();
+  });
+});

frontend/sitcomm/src/app/profile/profile.component.ts

+import { Component, OnInit } from '@angular/core';
+import { CookieService } from 'ngx-cookie-service';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.css']
+})
+export class ProfileComponent implements OnInit {
+
+  constructor(private cookieService: CookieService) { }
+
+  ngOnInit(): void {
+  }
+  setCookie(name: string,value: string){
+    this.cookieService.set(name,value);
+  }
+  getCookie(name: string){
+    return this.cookieService.get(name);
+  }
+  deleteCookie(name: string){
+    this.cookieService.delete(name);
+  }
+
+}

frontend/sitcomm/src/app/project/project.component.css

+
+#nav{
+    display:flex;
+    justify-content: space-between;
+}
+.example-container {
+  width: 100%;
+  height: 100%;
+  background-color: #f5f5f5;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+}
+#nav-options{
+    display:flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+.nav-btns{
+    justify-content: center;
+    padding: 10px;
+}
+.example-sidenav {
+  padding: 20px;
+}
+
+.mat-card-css{
+  width: 85%;
+  height: 85%;
+  background-color: snow;
+}
\ No newline at end of file

frontend/sitcomm/src/app/project/project.component.html

+<mat-drawer-container class="example-container" autosize>
+  <mat-drawer #drawer id='nav-options' class="flex-container example-sidenav" mode="side">
+    <div class="flex-item nav-btns">
+      <h1 style="justify-content: center;">Go To</h1>
+    </div>
+    <div class="flex-item nav-btns">
+    <button color="primary" style="width: 100%;"class="" [routerLink]="['/github']" mat-raised-button>
+      Github
+    </button>
+    </div>
+    <div class="flex-item nav-btns">
+    <button color="primary" style="width: 100%;" [routerLink]="['/jira']" mat-raised-button>
+      Jira
+    </button>
+    </div>
+    <div class="flex-item nav-btns">
+    <button color="primary" style="width: 100%;"class="" [routerLink]="['/confluence']" mat-raised-button>
+      Confluence
+    </button>
+    </div>
+    <div class="flex-item nav-btns">
+    <button color="primary" style="width: 100%;"class="" [routerLink]="['/slack']" mat-raised-button>
+      Slack
+    </button>
+    </div>
+  </mat-drawer>
+  <p>
+    <mat-toolbar id='nav' color="primary" class="flex-container">
+      <div class="flex-item">
+        <button mat-icon-button class="example-icon" (click)="drawer.toggle()" aria-label="">
+          <mat-icon>menu</mat-icon>
+        </button>
+        <span>Projects</span>
+        <span class="example-spacer"></span>
+      </div>
+      <div class="flex-item">
+        <button mat-icon-button class="" aria-label="" [routerLink]="['/profile']">
+          <mat-icon>person_pin</mat-icon>
+        </button>
+        <button mat-icon-button class="" aria-label="">
+          <mat-icon>settings</mat-icon>
+        </button>
+      </div>
+    </mat-toolbar>
+    <ng-container *ngIf="(asyncTabs | async) === null">
+    Loading tabs...
+    </ng-container>
+
+    <mat-tab-group mat-align-tabs="center">
+    <mat-tab *ngFor="let tab of asyncTabs | async">
+        <ng-template mat-tab-label>{{tab.label}}</ng-template>
+        {{tab.content}}
+    </mat-tab>
+    </mat-tab-group>
+  </p>
+</mat-drawer-container>
\ No newline at end of file

frontend/sitcomm/src/app/project/project.component.spec.ts

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

frontend/sitcomm/src/app/project/project.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import {Observable, Observer} from 'rxjs';
+export interface ExampleTab {
+  label: string;
+  content: string;
+}
+
+@Component({
+  selector: 'app-project',
+  templateUrl: './project.component.html',
+  styleUrls: ['./project.component.css']
+})
+export class ProjectComponent implements OnInit {
+  id: number;
+  name: string;
+  asyncTabs: Observable<ExampleTab[]>;
+  constructor() {
+    console.log(window.history.state);
+    this.id = window.history.state.id;
+    this.name = window.history.state.name;
+    this.asyncTabs = new Observable((observer: Observer<ExampleTab[]>) => {
+      setTimeout(() => {
+        observer.next([
+          {label: 'Github', content: 'Content 1'},
+          {label: 'Confluence', content: 'Content 2'},
+          {label: 'JIRA', content: 'Content 3'},
+          {label: 'Slack', content: 'Content 4'}
+        ]);
+      }, 1000);
+    });
+  }
+  ngOnInit(): void {
+  }
+
+}

frontend/sitcomm/src/app/slack/slack.component.html

+<p>slack works!</p>

frontend/sitcomm/src/app/slack/slack.component.spec.ts

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

frontend/sitcomm/src/app/slack/slack.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-slack',
+  templateUrl: './slack.component.html',
+  styleUrls: ['./slack.component.css']
+})
+export class SlackComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}