src/app/app.css

@@ -0,0 +1,4 @@
+main {
+    margin-top: 120px; /* Space for nav and ticker */
+}
+

src/app/app.html

@@ -1,4 +1,7 @@
-<app-nav></app-nav>
+<div class="fixed top-0 left-0 w-full h-full z-30">
+    <app-nav></app-nav>
+    <app-ticker></app-ticker>
+</div>
 <app-disclaimer></app-disclaimer>
 <main>
     <router-outlet></router-outlet>

src/app/app.ts

@@ -8,12 +8,13 @@ import { RouterOutlet } from "@angular/router";
 import { Disclaimer } from "./disclaimer/disclaimer";
 import { Footer } from "./footer/footer";
 import { Nav } from "./nav/nav";
+import { Ticker } from "./ticker/ticker";
 
 /**
  * The root component for the application.
  */
 @Component({
-  imports:     [ RouterOutlet, Footer, Nav, Disclaimer ],
+  imports:     [ RouterOutlet, Footer, Nav, Disclaimer, Ticker ],
   selector:    "app-root",
   styleUrl:    "./app.css",
   templateUrl: "./app.html",

src/app/nav/nav.css

@@ -0,0 +1,4 @@
+nav {
+    background-color: var(--color-secondary);
+    color: var(--color-primary);
+}

src/app/nav/nav.html

@@ -1 +1,13 @@
-<p>nav works!</p>
+<nav class="w-full z-30 p-2 flex justify-between items-center">
+    <div>
+        <a routerLink="/"><p>NHCarrigan</p></a>
+    </div>
+    <ul class="flex gap-4 list-image-none">
+        <a routerLink="/about"><li>About</li></a>
+        <a routerLink="/handbook"><li>Handbook</li></a>
+        <a routerLink="/bulletin"><li>Bulletin</li></a>
+        <a routerLink="/faq"><li>FAQ</li></a>
+        <a routerLink="/reviews"><li>Reviews</li></a>
+        <a routerLink="/staff"><li>Staff</li></a>
+    </ul>
+</nav>

src/app/nav/nav.ts

@@ -4,12 +4,13 @@
  * @author Naomi Carrigan
  */
 import { Component } from "@angular/core";
+import { RouterLink } from "@angular/router";
 
 /**
  * Renders the navigation bar.
  */
 @Component({
-  imports:     [],
+  imports:     [ RouterLink ],
   selector:    "app-nav",
   styleUrl:    "./nav.css",
   templateUrl: "./nav.html",

src/app/ticker/ticker.css

@@ -0,0 +1,16 @@
+.ticker-bg {
+    background-color: var(--color-ticker);
+}
+
+.ticker-scroll {
+    animation: scroll-horizontal 60s linear infinite;
+}
+
+@keyframes scroll-horizontal {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-50%);
+    }
+}

src/app/ticker/ticker.html

@@ -1 +1,15 @@
-<p>ticker works!</p>
+<div class="w-full overflow-hidden whitespace-nowrap z-30 py-2 ticker-bg">
+    <div class="inline-block whitespace-nowrap ticker-scroll">
+        @for (phrase of phrases; track phrase) {
+            <span class="inline-block m-0 p-0 whitespace-nowrap">{{ phrase }}</span>
+            <span class="inline-block mx-4 opacity-70"> • </span>
+        }
+        <!-- Duplicate content for seamless loop -->
+        <span aria-hidden="true">
+            @for (phrase of phrases; track phrase) {
+                <span class="inline-block m-0 p-0 whitespace-nowrap">{{ phrase }}</span>
+                <span class="inline-block mx-4 opacity-70"> • </span>
+            }
+        </span>
+    </div>
+</div>

src/app/ticker/ticker.ts

@@ -15,5 +15,10 @@ import { Component } from "@angular/core";
   templateUrl: "./ticker.html",
 })
 export class Ticker {
-
+  protected readonly phrases = [
+    "[UPDATE]: Office will be closed this Tuesday for the Lunar Eclipse. (Religious Holiday).",
+    "[MEMO]: Please stop asking the Bodyguard for fashion tips. She is working.",
+    "[TECH]: Patch 4.0.1 deployed. Fixed a bug where the AI started whispering.",
+    "[NOTICE]: We are aware of the \"howling\" coming from the breakroom. Amari is watching a sad movie. It is under control.",
+  ];
 }