feat: hamburger menu on small screens

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);
+    }
 }

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">
+    <button 
-        <a routerLink="/about"><li>About</li></a>
+        class="hamburger-btn" 
-        <a routerLink="/handbook"><li>Handbook</li></a>
+        (click)="toggleMenu()"
-        <a routerLink="/bulletin"><li>Bulletin</li></a>
+        aria-label="Toggle menu"
-        <a routerLink="/faq"><li>FAQ</li></a>
+        aria-expanded="{{isMenuOpen}}">
-        <a routerLink="/reviews"><li>Reviews</li></a>
+        <span></span>
-        <a routerLink="/staff"><li>Staff</li></a>
+        <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>

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;
+  }
 }

src/app/ticker/ticker.css

@@ -1,5 +1,6 @@
 .ticker-bg {
     background-color: var(--color-ticker);
+    color: var(--color-primary);
 }
 
 .ticker-scroll {

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.",
   ];