Updates

src/app/components/navbar/navbar.component.html

@@ -0,0 +1,55 @@
+<mat-toolbar>
+	<mat-toolbar-row>
+		<div>
+			<a class="navbar-brand d-flex align-items-center" href="#">
+				<img src="assets/img/capricorn.png" alt="Capricorn" height="45" width="45">
+				<div class="px-2">LEGIO · XXX</div>
+			</a>
+		</div>
+		<div class="flex-grow-1"></div>
+		<div *ngIf="!hamburger">
+			<a href="#about"><button mat-button class="navbar-button">About</button></a>
+			<a href="#gallery"><button mat-button class="navbar-button">Gallery</button></a>
+			<a href="#contact"><button mat-button class="navbar-button">Contact</button></a>
+			<button mat-button [matMenuTriggerFor]="learnMenu" class="navbar-button">
+				Learn <mat-icon>expand_more</mat-icon>
+			</button>
+			<mat-menu #learnMenu="matMenu">
+				<button mat-menu-item>Legio XXX</button>
+				<button mat-menu-item>Legion Structure</button>
+				<button mat-menu-item>Legion Camp</button>
+				<button mat-menu-item>Legion Headquarters</button>
+				<button mat-menu-item>Legionary Equipment</button>
+				<button mat-menu-item>Legionairy Training</button>
+				<mat-divider></mat-divider>
+				<button mat-menu-item>Resources</button>
+			</mat-menu>
+			<button mat-button [matMenuTriggerFor]="eventsMenu" class="navbar-button">
+				Events <mat-icon>expand_more</mat-icon>
+			</button>
+			<mat-menu #eventsMenu="matMenu">
+				<button mat-menu-item>Castra Aestiva</button>
+				<button mat-menu-item>Castra Hiberna</button>
+				<mat-divider></mat-divider>
+				<button mat-menu-item>Calendar</button>
+			</mat-menu>
+			<button mat-button [matMenuTriggerFor]="membersMenu" class="navbar-button">
+				Members <mat-icon>expand_more</mat-icon>
+			</button>
+			<mat-menu #membersMenu="matMenu">
+				<button mat-menu-item>Getting Started</button>
+				<mat-divider></mat-divider>
+				<button mat-menu-item>Rules & Regulations</button>
+				<button mat-menu-item>Approved Vendors</button>
+				<button mat-menu-item>Kit Assembly</button>
+				<button mat-menu-item>Kit Maintinance</button>
+				<mat-divider></mat-divider>
+				<button mat-menu-item>Login/Register</button>
+			</mat-menu>
+		</div>
+		<button *ngIf="hamburger" mat-icon-button class="mr-3">
+			<mat-icon (click)="hamburgerClick.emit()">menu</mat-icon>
+		</button>
+	</mat-toolbar-row>
+</mat-toolbar>
+<div class="navbar-spacing"><!-- Spacing --></div>

src/app/components/navbar/navbar.component.scss

@@ -0,0 +1,55 @@
+.navbar-spacing {
+	height: 64px;
+	width: 100%;
+}
+
+::ng-deep mat-toolbar {
+	background: #000 !important;
+	border-bottom: #fff solid 1px;
+	height: 64px;
+	position: fixed;
+	top: 0;
+	z-index: 100;
+
+	.mat-toolbar-row {
+		height: 100%;
+	}
+
+	.navbar-brand {
+		color: #fff;
+		text-decoration: none;
+		font-weight: lighter;
+	}
+
+	.navbar-button {
+		color: rgba(255, 255, 255, 0.55);
+		font-weight: normal;
+		padding: 0 8px 0 8px;
+
+		&:hover {
+			color: rgba(255, 255, 255, 0.75);
+		}
+	}
+}
+
+::ng-deep .mat-menu-content {
+	background: #000;
+	border: #fff solid 1px;
+	padding: 0 !important;
+	border-radius: 0.25rem;
+
+	mat-divider {
+		border-color: white;
+		margin-top: 0.2rem;
+		padding-bottom: 0.1rem;
+	}
+
+	button {
+		height: 36px;
+		line-height: 36px;
+
+		&:hover {
+			background: rgba(255, 255, 255, 0.15) !important;
+		}
+	}
+}

src/app/components/navbar/navbar.component.ts

@@ -0,0 +1,12 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+	selector: 'xxx-navbar',
+	templateUrl: './navbar.component.html',
+	styleUrls: ['./navbar.component.scss']
+})
+export class NavbarComponent {
+	@Input() hamburger = true;
+
+	@Output() hamburgerClick = new EventEmitter<void>();
+}