added a show hide sidebar button

.gitignore

@@ -43,4 +43,4 @@ Thumbs.db
 scraper.js
 results.json
 dummy-results.json
-*.swp
\ No newline at end of file
+*.swp 
\ No newline at end of file

src/app/app.module.ts

@@ -14,6 +14,7 @@ import { PlaceWindowComponent } from './place-window/place-window.component';
 import { PlaceCardComponent } from './place-window/area/place-card/place-card.component';
 import { AreaComponent } from './place-window/area/area.component';
 import { FilterBarComponent } from './filter-bar/filter-bar.component';
+import { ShowHideArrowComponent } from './context-bar/show-hide-arrow/show-hide-arrow.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -27,7 +28,8 @@ import { FilterBarComponent } from './filter-bar/filter-bar.component';
     PlaceCardComponent,
     AreaComponent,
     FilterBarComponent,
-    FilterBarComponent
+    FilterBarComponent,
+    ShowHideArrowComponent
   ],
   imports: [
     BrowserModule,

src/app/context-bar/context-bar.component.html

-<div class="light-card context-bar">
-    <div class="header">
+<div class="context-bar-button-container">
+<!--<button class="show-hide-button"(click)="show=!show">Click Me</button>-->
+<app-show-hide-arrow class="show-hide-button" [isRight]='true' (change)="show = $event"></app-show-hide-arrow>
+<div [ngClass]="(show)?'light-card context-bar-open' : 'light-card context-bar-closed'">
+    
+    <div class="context-bar-header">
         <img class="image" src="../../assets/BKing.jpg">
-        <div class="title">Burger King</div>
+        <div class="content-bar-title">Burger King</div>
     </div>
     <hr>
     <div>
@@ -50,3 +54,4 @@
         <!--<hr>-->
         <app-map></app-map>
     </div>
+</div>
\ No newline at end of file

src/app/context-bar/context-bar.component.scss

 @import '../../global-styles';
 
+.show-hide-button{
+    margin-top:auto;
+    margin-bottom: auto;
+}
 
+.context-bar-button-container{
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+}
 .context-bar {
     height: 100%;
-    width: 374px;
+//    width: 374px;
     // float: right;
+//    padding-left: 11px;
+//    padding-right: 11px
+    box-sizing: content-box;
+    transition: all .41s ease-in-out;
+    overflow: hidden;
+}
+.context-bar-closed{
+    @extend .context-bar;
+    width:0px;
+    padding:0px;
+}
+.context-bar-open{
+    @extend .context-bar;
+    width:374px;    
     padding-left: 11px;
     padding-right: 11px;
-    box-sizing: content-box;
 }
-
 .image{
     width: 77.8px;
 	height: 82.7px;
     border-radius: 50%;
 }
-.title{
+.content-bar-title{
 font-family: HelveticaNeue-Medium;
 	font-size: 32px;
 	font-weight: 500;
@@ -25,11 +46,11 @@ font-family: HelveticaNeue-Medium;
 	color: $primary;
     margin-left: 50.5px;
 }
-.header{
+.context-bar-header{
     display: flex;
     align-items: center;
     height: 104.6px;
-    width: 100%;
+    width: 374px;
 }
 hr{
     background-color: $border-color;
@@ -55,6 +76,8 @@ hr{
 .info-block{
     display: flex;
     flex-direction: column;
+    width:187px;
+    height:28;
     
 }
 .spacer{

src/app/context-bar/context-bar.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit} from '@angular/core';
 
 @Component({
   selector: 'app-context-bar',
+ 
   templateUrl: './context-bar.component.html',
   styleUrls: ['./context-bar.component.scss']
 })
 export class ContextBarComponent implements OnInit {
-
+  show: boolean = true;
   constructor() { }
 
   ngOnInit() {
   }
-
+  private tempF =function(event){
+    console.log(event);
+  } 
 }

src/app/context-bar/show-hide-arrow/show-hide-arrow.component.html

+<svg (click)="onClick()"width="18px" height="32px" viewBox="0 0 18 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator`: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>Close Arrow</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Close-Arrow">
+            <g transform="translate(0.000000, 0.333984)">
+                <path d="M18,0.127530847 C17.3295121,0.0433831801 16.6460035,0 15.9521484,0 C7.14202013,0 0,6.99436473 0,15.6223509 C0,24.250337 7.14202013,31.2447017 15.9521484,31.2447017 C16.6460035,31.2447017 17.3295121,31.2013186 18,31.1171709 L18,0.127530847 Z" id="Combined-Shape" stroke="#E6EAEE" fill="#FFFFFF"></path>
+                <text id="Arrow-Right-Icon" font-family="FontAwesome" font-size="18" font-weight="normal" fill="#9FA9BA">
+                    <tspan x="3.00081759" y="21.7194516">{{arrow}}</tspan>
+                </text>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/app/context-bar/show-hide-arrow/show-hide-arrow.component.scss

+#Arrow-Right-Icon{
+    user-select: none;
+    cursor: default;
+}
\ No newline at end of file

src/app/context-bar/show-hide-arrow/show-hide-arrow.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ShowHideArrowComponent } from './show-hide-arrow.component';
+
+describe('ShowHideArrowComponent', () => {
+  let component: ShowHideArrowComponent;
+  let fixture: ComponentFixture<ShowHideArrowComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ShowHideArrowComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ShowHideArrowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/context-bar/show-hide-arrow/show-hide-arrow.component.ts

+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-show-hide-arrow',
+  templateUrl: './show-hide-arrow.component.html',
+  styleUrls: ['./show-hide-arrow.component.scss']
+})
+export class ShowHideArrowComponent implements OnInit {
+  @Input() isRight: boolean;
+  private arrow: string;
+  private show: boolean;
+  @Output() change: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  constructor() { }
+
+  ngOnInit() {
+    this.show = this.isRight;
+    if (this.isRight) {
+      this.arrow = ''; // arrow pointing right
+      this.change.emit(true);
+    } else {
+      this.arrow = ''; // arrow pointing left
+      this.change.emit(false);
+    }
+
+  }
+  onClick = function (event) {
+    this.show = !this.show;
+    if (this.show) {
+      this.arrow = ''; // arrow pointing right
+      this.change.emit(true);
+    } else {
+      this.arrow = ''; // arrow pointing left
+      this.change.emit(false);
+    }
+  }
+}

src/assets/show-hide-button.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="32px" viewBox="0 0 18 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>Close Arrow</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Close-Arrow">
+            <g transform="translate(0.000000, 0.333984)">
+                <path d="M18,0.127530847 C17.3295121,0.0433831801 16.6460035,0 15.9521484,0 C7.14202013,0 0,6.99436473 0,15.6223509 C0,24.250337 7.14202013,31.2447017 15.9521484,31.2447017 C16.6460035,31.2447017 17.3295121,31.2013186 18,31.1171709 L18,0.127530847 Z" id="Combined-Shape" stroke="#E6EAEE" fill="#FFFFFF"></path>
+                <text id="Arrow-Right-Icon" font-family="FontAwesome" font-size="18" font-weight="normal" fill="#9FA9BA">
+                    <tspan x="3.00081759" y="21.7194516"></tspan>
+                </text>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file