<!--

<nav id="header" class="w-full z-30 top-0 py-1">
<div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-6 py-3">

<label for="menu-toggle" class="cursor-pointer md:hidden block">
<svg class="fill-current text-gray-900" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<title>menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
</svg>
</label>
<input class="hidden" type="checkbox" id="menu-toggle" />

<div class="hidden md:flex md:items-center md:w-auto w-full order-3 md:order-1" id="menu">
<nav>
<ul class="md:flex items-center justify-between text-base text-gray-700 pt-4 md:pt-0">

<li><a class="inline-block no-underline hover:text-black hover:underline py-2 px-4" routerLink="/register" routerLinkActive="active" href="#">Register</a></li>

<li><a class="inline-block no-underline hover:text-black hover:underline py-2 px-4" routerLink="/music" routerLinkActive="active" href="#">Music</a></li>
<li><a class="inline-block no-underline hover:text-black hover:underline py-2 px-4" routerLink="/yoga" routerLinkActive="active" href="#">Yoga</a></li>

<li><a class="inline-block no-underline hover:text-black hover:underline py-2 px-4" routerLink="/food">Food</a></li>
<li><a class="inline-block no-underline hover:text-black hover:underline py-2 px-4" routerLink="/about">About</a></li>

<li><a class="inline-block no-underline hover:text-black hover:underline py-2 px-4" routerLink="/sponsors">Sponsors</a></li>
-->
<!-- <li><a class="inline-block no-underline hover:text-black hover:underline py-2 px-4" routerLink="/volunteers">Volunteers</a></li>

<li><a class="inline-block no-underline hover:text-black hover:underline py-2 px-4" routerLink="/schedule">Schedule</a></li>

<li><a class="inline-block no-underline hover:text-black hover:underline py-2 px-4" routerLink="/yogi2019">2019</a></li>

<li><a class="inline-block no-underline hover:text-black hover:underline py-2 px-4" routerLink="/guru">Guru</a></li>

</ul>
</nav>
</div>

-->
<!--- <svg-icon src="assets/YogiRunlogo.svg" [svgStyle]="{ 'width.px':90 }"></svg-icon> --->
<div class="order-1 md:order-2">
<a class="flex items-center tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl " href="#">
<!--- <svg class="fill-current text-gray-800 mr-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M5,22h14c1.103,0,2-0.897,2-2V9c0-0.553-0.447-1-1-1h-3V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H4C3.447,8,3,8.447,3,9v11 C3,21.103,3.897,22,5,22z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M5,10h2v2h2v-2h6v2h2v-2h2l0.002,10H5V10z" />
</svg> --->
YOGI RUN
</a>
</div>

<div class="order-2 md:order-3 flex items-center" id="nav-content">

<a class="inline-block no-underline hover:text-black" routerLink="/team">
<svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<circle fill="none" cx="12" cy="7" r="3" />
<path d="M12 2C9.243 2 7 4.243 7 7s2.243 5 5 5 5-2.243 5-5S14.757 2 12 2zM12 10c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3S13.654 10 12 10zM21 21v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h2v-1c0-2.757 2.243-5 5-5h4c2.757 0 5 2.243 5 5v1H21z" />
</svg>

</a>

<a class="pl-3 inline-block no-underline hover:text-black" routerLink="/winners">
<svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
<circle cx="10.5" cy="18.5" r="1.5" />
<circle cx="17.5" cy="18.5" r="1.5" />
</svg>
</a>

<a class="pl-3 inline-block no-underline hover:text-black" routerLink="/team">
<svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z" />
<circle cx="10.5" cy="18.5" r="1.5" />
<circle cx="17.5" cy="18.5" r="1.5" />
</svg>
</a>

<a class="pl-3 inline-block no-underline hover:text-black" routerLink="/team">
<svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M10.496 2.132a1 1 0 00-.992 0l-7 4A1 1 0 003 8v7a1 1 0 100 2h14a1 1 0 100-2V8a1 1 0 00.496-1.868l-7-4zM6 9a1 1 0 00-1 1v3a1 1 0 102 0v-3a1 1 0 00-1-1zm3 1a1 1 0 012 0v3a1 1 0 11-2 0v-3zm5-1a1 1 0 00-1 1v3a1 1 0 102 0v-3a1 1 0 00-1-1z" clip-rule="evenodd" />
<circle cx="10.5" cy="18.5" r="1.5" />
<circle cx="17.5" cy="18.5" r="1.5" />
</svg>
</a>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
</svg>
</div>
</div>
</nav>

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

@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {

constructor() { }

hamburgerOpen = false;

ngOnInit(): void {
}

toggleHamburger(): void {
this.hamburgerOpen = !this.hamburgerOpen;
}

}