Seanmclem

<h3>
  Create Project 
</h3>
        
<p *ngIf="errorMessage">{{errorMessage}}</p>
<p *ngIf="successMessage">{{successMessage}}</p>

<!-- <p>{{model.mainImage | async}}</p> -->
<div class="full-center">
       

Seanmclem

  ngOnInit() {
    this.firebaseService.readRecord('blog', this.cuid)
    .then(result => {
      this.model = result.data();
      this.recordRef = result;
      debugger;
      this.loadData(this.model.body);
    })
    .catch(error => {
      debugger;

Seanmclem

<!--basic nav-->
<nav>
  <a routerLink="/home" routerLinkActive="active">Home</a>
  <a routerLink="/blog" routerLinkActive="active">Blog</a>
  <a routerLink="/login" routerLinkActive="active">Login</a>
  <a routerLink="/logout" routerLinkActive="active">Logout</a>
  <a routerLink="/signup" routerLinkActive="active">Signup</a>
</nav>

Seanmclem

nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
}

Seanmclem

nav {
    display: flex;
    justify-content: space-around;
    height: 50px;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    background-color: #3700b3;
    box-shadow: 0 2px 2px 0 gray;

    a{

Seanmclem

<!-- Added below for mobile -->
<nav class="mobile" (click)="toogleMenu();"></nav>
<div class="mobile-menu" (click)="toogleMenu();" [class.open]="menuOpen" [class.closed]="!menuOpen">
  <a routerLink="/home" routerLinkActive="active">Home</a>
  <a routerLink="/blog" routerLinkActive="active">Blog</a>
  <a routerLink="/login" routerLinkActive="active">Login</a>
  <a routerLink="/logout" routerLinkActive="active">Logout</a>
  <a routerLink="/signup" routerLinkActive="active">Signup</a>
</div>

Seanmclem

@media only screen and (min-width: 551px) {
    /* desktop */
    .mobile-menu{
        display:none;
    }

    .mobile{
        display:none;
    }
}

Seanmclem

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'app';
  menuOpen: boolean = false;

Seanmclem

.mobile-menu{
    //for animations
    height:0px;
    overflow:hidden;
    transition: height 0.5s ease;
    &.open{
        height:260px;
    }
    //

Seanmclem

<nav class="mobile">
  <div class="container" [class.open]="menuOpen" (click)="toogleMenu();">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
</nav>