From d6f356ccdf43401689bd04717abd47ade3cc16e0 Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <commits@nhcarrigan.com>
Date: Sat, 27 Dec 2025 15:02:21 -0800
Subject: [PATCH] feat: hamburger menu on small screens

---
 src/app/nav/nav.css       | 83 +++++++++++++++++++++++++++++++++++++++
 src/app/nav/nav.html      | 25 ++++++++----
 src/app/nav/nav.ts        | 14 +++++++
 src/app/ticker/ticker.css |  1 +
 src/app/ticker/ticker.ts  |  2 +-
 5 files changed, 116 insertions(+), 9 deletions(-)

diff --git a/src/app/nav/nav.css b/src/app/nav/nav.css
index 49d962a..9724358 100644
--- a/src/app/nav/nav.css
+++ b/src/app/nav/nav.css
@@ -1,4 +1,87 @@
 nav {
     background-color: var(--color-secondary);
     color: var(--color-primary);
+    position: relative;
+}
+
+.nav-menu {
+    display: flex;
+    gap: 1rem;
+    list-style: none;
+}
+
+.hamburger-btn {
+    display: none;
+    flex-direction: column;
+    gap: 5px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 5px;
+    z-index: 31;
+}
+
+.hamburger-btn span {
+    width: 25px;
+    height: 3px;
+    background-color: var(--color-accent);
+    transition: all 0.3s ease;
+}
+
+.hamburger-btn:hover span {
+    background-color: var(--color-primary);
+}
+
+/* Mobile styles */
+@media (max-width: 500px) {
+    .hamburger-btn {
+        display: flex;
+    }
+
+    .nav-menu {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        flex-direction: column;
+        background-color: var(--color-secondary);
+        padding: 1rem;
+        gap: 0;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease;
+        opacity: 0;
+    }
+
+    .nav-menu.menu-open {
+        max-height: 500px;
+        opacity: 1;
+    }
+
+    .nav-menu a {
+        display: block;
+        padding: 0.75rem 0;
+        border-bottom: 1px solid rgba(224, 224, 224, 0.1);
+    }
+
+    .nav-menu a:last-child {
+        border-bottom: none;
+    }
+
+    /* Hamburger animation */
+    nav.menu-open .hamburger-btn {
+        gap: 0;
+    }
+
+    nav.menu-open .hamburger-btn span:nth-child(1) {
+        transform: rotate(45deg) translateY(4px);
+    }
+
+    nav.menu-open .hamburger-btn span:nth-child(2) {
+        opacity: 0;
+    }
+
+    nav.menu-open .hamburger-btn span:nth-child(3) {
+        transform: rotate(-45deg) translateY(-4px);
+    }
 }
\ No newline at end of file
diff --git a/src/app/nav/nav.html b/src/app/nav/nav.html
index 21e2ee5..95a9c35 100644
--- a/src/app/nav/nav.html
+++ b/src/app/nav/nav.html
@@ -1,13 +1,22 @@
-<nav class="w-full z-30 p-2 flex justify-between items-center">
+<nav class="w-full z-30 p-2 flex justify-between items-center" [class.menu-open]="isMenuOpen">
     <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>
+    <button 
+        class="hamburger-btn" 
+        (click)="toggleMenu()"
+        aria-label="Toggle menu"
+        aria-expanded="{{isMenuOpen}}">
+        <span></span>
+        <span></span>
+        <span></span>
+    </button>
+    <ul class="nav-menu" [class.menu-open]="isMenuOpen">
+        <a routerLink="/about" (click)="closeMenu()"><li>About</li></a>
+        <a routerLink="/handbook" (click)="closeMenu()"><li>Handbook</li></a>
+        <a routerLink="/bulletin" (click)="closeMenu()"><li>Bulletin</li></a>
+        <a routerLink="/faq" (click)="closeMenu()"><li>FAQ</li></a>
+        <a routerLink="/reviews" (click)="closeMenu()"><li>Reviews</li></a>
+        <a routerLink="/staff" (click)="closeMenu()"><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 12eaa9c..83bd829 100644
--- a/src/app/nav/nav.ts
+++ b/src/app/nav/nav.ts
@@ -16,5 +16,19 @@ import { RouterLink } from "@angular/router";
   templateUrl: "./nav.html",
 })
 export class Nav {
+  public isMenuOpen = false;
 
+  /**
+   * Toggles the mobile menu open/closed state.
+   */
+  public toggleMenu(): void {
+    this.isMenuOpen = !this.isMenuOpen;
+  }
+
+  /**
+   * Closes the mobile menu.
+   */
+  public closeMenu(): void {
+    this.isMenuOpen = false;
+  }
 }
diff --git a/src/app/ticker/ticker.css b/src/app/ticker/ticker.css
index dddde44..dbaa3ef 100644
--- a/src/app/ticker/ticker.css
+++ b/src/app/ticker/ticker.css
@@ -1,5 +1,6 @@
 .ticker-bg {
     background-color: var(--color-ticker);
+    color: var(--color-primary);
 }
 
 .ticker-scroll {
diff --git a/src/app/ticker/ticker.ts b/src/app/ticker/ticker.ts
index f68710f..67a5e0b 100644
--- a/src/app/ticker/ticker.ts
+++ b/src/app/ticker/ticker.ts
@@ -17,7 +17,7 @@ import { Component } from "@angular/core";
 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.",
+    "[MEMO]: Please stop asking Keiko 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.",
   ];