From 8df1c009697ea5fda20b147d6d82330ffd4d434e Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <commits@nhcarrigan.com>
Date: Sat, 27 Dec 2025 14:59:20 -0800
Subject: [PATCH] feat: set up nav bar and news ticker

---
 src/app/app.css            |  4 ++++
 src/app/app.html           |  5 ++++-
 src/app/app.ts             |  3 ++-
 src/app/nav/nav.css        |  4 ++++
 src/app/nav/nav.html       | 14 +++++++++++++-
 src/app/nav/nav.ts         |  3 ++-
 src/app/ticker/ticker.css  | 16 ++++++++++++++++
 src/app/ticker/ticker.html | 16 +++++++++++++++-
 src/app/ticker/ticker.ts   |  7 ++++++-
 9 files changed, 66 insertions(+), 6 deletions(-)

diff --git a/src/app/app.css b/src/app/app.css
index e69de29..f4279fe 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -0,0 +1,4 @@
+main {
+    margin-top: 120px; /* Space for nav and ticker */
+}
+
diff --git a/src/app/app.html b/src/app/app.html
index 3ca9f3d..421a50a 100644
--- a/src/app/app.html
+++ b/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>
diff --git a/src/app/app.ts b/src/app/app.ts
index 93b8956..3df041a 100644
--- a/src/app/app.ts
+++ b/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",
diff --git a/src/app/nav/nav.css b/src/app/nav/nav.css
index e69de29..49d962a 100644
--- a/src/app/nav/nav.css
+++ b/src/app/nav/nav.css
@@ -0,0 +1,4 @@
+nav {
+    background-color: var(--color-secondary);
+    color: var(--color-primary);
+}
\ No newline at end of file
diff --git a/src/app/nav/nav.html b/src/app/nav/nav.html
index f23d834..21e2ee5 100644
--- a/src/app/nav/nav.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/nav/nav.ts b/src/app/nav/nav.ts
index a1ad6f1..12eaa9c 100644
--- a/src/app/nav/nav.ts
+++ b/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",
diff --git a/src/app/ticker/ticker.css b/src/app/ticker/ticker.css
index e69de29..dddde44 100644
--- a/src/app/ticker/ticker.css
+++ b/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%);
+    }
+}
\ No newline at end of file
diff --git a/src/app/ticker/ticker.html b/src/app/ticker/ticker.html
index dcef208..52f8745 100644
--- a/src/app/ticker/ticker.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/ticker/ticker.ts b/src/app/ticker/ticker.ts
index 2ba7722..f68710f 100644
--- a/src/app/ticker/ticker.ts
+++ b/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.",
+  ];
 }