add placeholder floating menu button, navigation not yet functional

This commit is contained in:
eleanor 2018-11-07 10:11:01 -05:00
parent 603c3239e4
commit 6fa059e049
6 changed files with 74 additions and 1 deletions

View File

@ -1,4 +1,5 @@
<div class="main"> <div class="main">
<app-menu></app-menu>
<app-header></app-header> <app-header></app-header>
<app-about-us></app-about-us> <app-about-us></app-about-us>
<!--<div class="content"></div>--> <!--<div class="content"></div>-->

View File

@ -1,4 +1,4 @@
import { MatIconModule, MatToolbarModule } from '@angular/material'; import { MatIconModule, MatMenuModule, MatToolbarModule } from '@angular/material';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
@ -10,6 +10,7 @@ import { CaseStudiesComponent } from './case-studies/case-studies.component';
import { ContactUsComponent } from './contact-us/contact-us.component'; import { ContactUsComponent } from './contact-us/contact-us.component';
import { FooterComponent } from './footer/footer.component'; import { FooterComponent } from './footer/footer.component';
import { HeaderComponent } from './header/header.component'; import { HeaderComponent } from './header/header.component';
import { MenuComponent } from './menu/menu.component';
import { ReviewsComponent } from './reviews/reviews.component'; import { ReviewsComponent } from './reviews/reviews.component';
@NgModule({ @NgModule({
@ -20,6 +21,7 @@ import { ReviewsComponent } from './reviews/reviews.component';
ContactUsComponent, ContactUsComponent,
FooterComponent, FooterComponent,
HeaderComponent, HeaderComponent,
MenuComponent,
ReviewsComponent ReviewsComponent
], ],
imports: [ imports: [
@ -27,6 +29,7 @@ import { ReviewsComponent } from './reviews/reviews.component';
BrowserAnimationsModule, BrowserAnimationsModule,
FlexLayoutModule, FlexLayoutModule,
MatIconModule, MatIconModule,
MatMenuModule,
MatToolbarModule MatToolbarModule
], ],
providers: [], providers: [],

View File

@ -0,0 +1,22 @@
<div class="menu">
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>menu</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button
mat-menu-item
onclick=""
>
<span>ABOUT US</span>
</button>
<button mat-menu-item>
<span>CASE STUDIES</span>
</button>
<button mat-menu-item>
<span>WHAT PEOPLE SAY</span>
</button>
<button mat-menu-item>
<span>CONTACT US</span>
</button>
</mat-menu>
</div>

View File

@ -0,0 +1,7 @@
.menu {
position: fixed;
top: 2%;
left: 2%;
z-index: 1;
}

View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MenuComponent } from './menu.component';
describe('MenuComponent', () => {
let component: MenuComponent;
let fixture: ComponentFixture<MenuComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MenuComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MenuComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {
constructor() {}
ngOnInit() {
}
}