I have successfully implemented this design using vanilla CSS and JS, but I am encountering challenges when trying to replicate it in Angular 2.
Setting aside routing concerns, here is the current state of my component:
navbar.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
menuIcon = '☰';
isCollapsed = true;
constructor() { }
onInit() {
}
public toggleNav() {
this.isCollapsed = !this.isCollapsed;
console.log(`Button menu clicked`);
!this.isCollapsed ? this.menuIcon = '✖' : this.menuIcon = '☰';
// return this.menuIcon;
}
}
navbar.component.html
<nav>
<ul class="navigation">
<li><a href="#" (click)="toggleNav()" id="menu__icon">{{menuIcon}}</a></li>
<span *ngIf="!isCollapsed">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</span>
</ul>
</nav>
navbar.component.css
.navigation {
list-style: none;
margin: 0;
background: #111;
display: flex;
justify-content: flex-end;
}
.navigation a {
text-decoration: none;
display: block;
padding: 1em;
color: white;
}
.navigation a:hover {
background: lighten(#111, 15%);
}
@media all and (max-width: 800px) {
.navigation {
justify-content: space-around;
}
}
.navigation #menu__icon {
display: none;
}
@media all and (max-width: 600px) {
.navigation {
flex-flow: column wrap;
padding: 0;
}
.navigation a {
text-align: center;
padding: 10px;
border-top: 1px solid rgba(255,255,255,0.3);
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.navigation li:last-of-type a {
border-bottom: none;
}
.navigation #menu__icon {
display: block;
}
}
.navigation #menu__icon a {
color: tomato;
font-size: 1.5em;
}
While the mobile view is as desired, how can I make it display in a row on larger screens?