Add Sample Material Styling

lib/app_component.dart

@@ -1,4 +1,5 @@
 import 'package:angular/angular.dart';
+import 'package:angular_components/angular_components.dart';
 
 import 'dart:html' as html;
 import 'package:rules_of_living/src/Engine.dart';
@@ -6,7 +7,10 @@ import 'package:rules_of_living/src/Engine.dart';
 @Component(
     selector: 'my-app',
     templateUrl: "app_component.html",
-    directives: [coreDirectives])
+    directives: [coreDirectives, MaterialIconComponent],
+    styleUrls: const ['package:angular_components/app_layout/layout.scss.css'],
+    providers: const [materialProviders],
+)
 class AppComponent implements OnInit {
   var name = "World";
 

lib/app_component.html

@@ -1,4 +1,15 @@
-<h1>Cellular Automata</h1>
+<header class="material-header">
+    <div class="material-header-row">
+        <material-button icon class="material-drawer-button">
+            <material-icon icon="menu"></material-icon>
+        </material-button>
+        <span class="material-header-title">Cellular Automata</span>
+        <div class="material-spacer"></div>
+        <nav class="material-navigation">
+            <a>Link 1</a>
+        </nav>
+    </div>
+</header>
 <div id="rules-input">
     Ruleset: <input type="text" title="ruleset" content="S23/B3">
     <i class="fas fa-paint-brush"></i>
@@ -19,4 +30,4 @@
     <button id="clear" (click)="onClearClicked()"><i class="fas fa-trash-alt"></i></button>
     <i class="fas fa-clock"> Speed:</i><input type="text" title="speed" value="1">
     <button id="edges" (click)="onEdgesClicked()"><i class="fas fa-chess-board"></i> </button>
-</div>
+</div>