finished dropdown menu for now

src/app/app.component.html

 <div class="app-container">
-    <app-nav-bar></app-nav-bar>
-  <div class="main-content">
+    <app-nav-bar (navState)="toggleNavState($event)"></app-nav-bar>
+  <div class="main-content" [@nav-bar-state]="navState">
+
     <app-search-bar></app-search-bar>
      <!--<div class="place-window">-->
       <app-place-window></app-place-window>

src/app/app.component.ts

 import { Component } from '@angular/core';
 import { DataProviderService } from './data-provider.service';
 import { Place } from './place';
+import {
+	trigger,
+	state,
+	style,
+	animate,
+	transition,
+	keyframes
+} from '@angular/animations';
 @Component({
 	selector: 'app-root',
 	templateUrl: './app.component.html',
 	styleUrls: ['./app.component.scss'],
-	providers: [DataProviderService]
+	providers: [DataProviderService],
+	animations: [
+		trigger('nav-bar-state', [
+			state('expanded', style({
+				transform: 'translateY(325px)',
+			})),
+			state('collapsed', style({
+				transform: 'translateY(0px)',
+			})),
+			transition('expanded => collapsed', animate('250ms cubic-bezier(.35,0,.61,1)')),
+			transition('collapsed => expanded', animate('250ms ease-in-out'))
+		])
+	]
 })
 export class AppComponent {
+	navState='expanded';
+	toggleNavState(event): void {
+		if (event === 'expanded') {
+			this.navState = 'expanded';
 
+		} else {
+			this.navState = 'collapsed';
+		}
+	}	
 }

src/app/nav-bar/_collapsed-nav.scss

 
 .small-nav-background {
-	// position:absolute;
+	position:relative;
 	top:0;
 	width: 100%;
-	height: 95px;
+	height: 75px;
 	// background-color: #006633;
 }
 
@@ -16,14 +16,15 @@
 }
 
 .small-title-container {
-	width:200px;
-	height:60px;
 	margin-left:5px;
+	height:60px;
 }
 
 .small-title {
-	font-family: Nunito-Bold;
-	font-size: 24px;
+	margin-top:2px;
+	font-family: Nunito-SemiBold;
+	font-size: 25px;
+	line-height: 30px;
 	color: #FFFFFF;
 }
 
@@ -32,6 +33,7 @@
 	font-family: NunitoSans-Regular;
 	font-size: 15px;
 	color: #FFFFFF;
+	margin-top:2px;
 }
 
 .long-container{
@@ -42,31 +44,28 @@
 	align-items:center;
 }
 
-.links {
-	position:absolute;
-	top:50%;
-	left:50%;
-	transform:translate(-50%,-50%);		
+.collapsed-links {
 	display: flex;
 	flex-direction: row;
 	width: 340px;
 	justify-content: space-between;
-	margin:auto;
+	margin:auto 0px auto 25px;
+	color:white;	
 }
 
-.link-font {
-	font-family: NunitoSans-SemiBold;
+.collapsed-link-font {
+	font-family: NunitoSans-Regular;
 	font-size: 18px;
 	color:inherit;
 }
 
-.check-code-button {
+.collapsed-check-code-button {
 	position: absolute;
-	top: 30px;
+	top: 50%;
 	right: 30px;
 	height: 35px;
 	width: 160px;
-
+	transform: translateY(-50%);
 	// background-color:green;
 	border-color: #FFCC33;
 	border-style: solid;

src/app/nav-bar/_expanded-nav.scss

@@ -3,7 +3,7 @@
 	width: 100%;
 	top: 0px;
 	left: 0px;
-	height: 55%;
+	height: 400px;
 	background: #ffffff;
 	box-shadow: 0px 8px 20px 0px $shadow-color;
 	z-index: 500;
@@ -19,6 +19,23 @@
 		position: absolute;
 	}
 }
+.links {
+	position: absolute;
+	top:47.5px;
+	left:50%;
+	transform: translate(-50%,-50%);
+	display: flex;
+	flex-direction: row;
+	width: 370px;
+	justify-content: space-between;
+	color:#354052;	
+}
+
+.link-font {
+	font-family: NunitoSans-SemiBold;
+	font-size: 18px;
+	color:inherit;
+}
 
 .header-background {
 	//width: 56.65%;
@@ -98,3 +115,24 @@
 	background-image: radial-gradient(48% 50%, rgba(255, 255, 255, 0.54) 51%, rgba(255, 255, 255, 0) 100%);
 	background-image: radial-gradient(52% 50%, rgba(255, 255, 255, 0.2) 47%, rgba(255, 255, 255, 0) 100%);
 }
+.check-code-button {
+	position: absolute;
+	top: 30px;
+	right: 30px;
+	height: 35px;
+	width: 160px;
+	background-color:#006633;
+	border-color: #FFCC33;
+	border-style: solid;
+	border-width: 2px;
+	border-radius: 50px;
+	opacity: 0.9;
+	font-family: NunitoSans-Regular;
+	font-size: 13px;
+	color: #FFFFFF;
+	text-align: center;
+	vertical-align: middle;
+	line-height: 35px;
+	z-index: 500;
+	transition: all .2s ease-in-out;
+}
\ No newline at end of file

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

-<div class="nav-bars-container" >
-	<div class="exp-nav-background"[@toggle-large-bar]="expanded">
+<div class="exp-nav-background" [@toggle-large-bar]="state">
 	<div class="close-nav-bar-button-container">
 		<div class="close-nav-bar-button" (click)="toggleState()"></div>
 	</div>
 	<div class="header-background">
+		<div class="links">
+			<div class="link-font">Feedback</div>
+			<div class="link-font">About</div>
+			<div class="link-font">Our Projects</div>
+		</div>
 		<div class="title-and-logo">
 			<!--<img class="logo" src="../../assets/SRCT_square.svg">-->
 			<svg class="logo" viewBox="194 -6 127 127" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -53,25 +57,26 @@
 	<div class="promo-background">
 		<div class="circle"></div>
 	</div>
-
+	<div class="check-code-button">
+		Check out the code
 	</div>
-	<div [@toggle-small-bar]="expanded" class="small-nav-background">
+</div>
+<div [@toggle-small-bar]="state" class="small-nav-background">
 	<div class="long-container">
-			<img [@toggle-logo-and-text]="expanded" class="small-logo" src="../../assets/small-logo.png">
-			<div [@toggle-logo-and-text]="expanded" class="small-title-container">
+		<img [@toggle-logo-and-text]="state" class="small-logo" src="../../assets/small-logo.png">
+		<div [@toggle-logo-and-text]="state" class="small-title-container">
 			<div class="small-title">Whats Open</div>
 			<div class="small-sub-title">A Student-Built App</div>
 		</div>
-			<div class="links" [@toggle-links]="expanded">
-				<div class="link-font">Feedback</div>
-				<div class="link-font">About</div>
-				<div class="link-font">Our Projects</div>
+		<div class="collapsed-links">
+			<div class="collapsed-link-font">Feedback</div>
+			<div class="collapsed-link-font">About</div>
+			<div class="collapsed-link-font">Our Projects</div>
 		</div>
 
 	</div>
-		<div class="check-code-button">
+	<div class="collapsed-check-code-button">
 		Check out the code
 	</div>
 
-	</div>
 </div>

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

@@ -33,6 +33,3 @@
 	height:80px;
 	z-index: -10;
 }
-.nav-bars-container{
-	
-}
\ No newline at end of file

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

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import {
 	trigger,
 	state,
@@ -62,18 +62,22 @@ import {
 	]
 })
 export class NavBarComponent implements OnInit {
-	expanded: string = 'expanded';
+	state = 'collapsed';
+	@Output() navState: EventEmitter<string> = new EventEmitter<string>();
 	constructor() { }
 
 	ngOnInit() {
+		this.navState.emit(this.state);
 	}
 	toggleState(): void {
-		if (this.expanded === 'expanded') {
-			this.expanded = 'collapsed';
+		if (this.state === 'expanded') {
+			this.state = 'collapsed';
+			this.navState.emit(this.state);
+
 		} else {
-			this.expanded = 'expanded';
+			this.state = 'expanded';
+			this.navState.emit(this.state);
 		}
-		console.log('something happened')
 	}
 
 }