feat: create navigation menu

client/src/app/app.html

@@ -1,3 +1,4 @@
+<app-nav></app-nav>
 <main>
   <router-outlet></router-outlet>
 </main>

client/src/app/app.ts

@@ -6,9 +6,10 @@
 
 import { Component } from "@angular/core";
 import { RouterOutlet } from "@angular/router";
+import { Nav } from "./nav/nav.js";
 
 @Component({
-  imports:     [ RouterOutlet ],
+  imports:     [ RouterOutlet, Nav ],
   selector:    "app-root",
   styleUrl:    "./app.css",
   templateUrl: "./app.html",

client/src/app/nav/nav.css

@@ -0,0 +1,65 @@
+nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  color: var(--foreground);
+  background-color: var(--background);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+nav a:not(#logo) {
+  text-decoration: none;
+  padding: 0 15px;
+  font-size: 1.2rem;
+}
+
+nav a:hover:not(#logo) {
+  text-decoration: underline;
+  color: var(--background);
+  background-color: var(--foreground);
+}
+
+img {
+  height: 30px;
+  width: auto;
+  margin-right: 15px;
+}
+
+hr {
+  width: 100%;
+  border: none;
+  border-top: 1px solid var(--foreground);
+  margin: 0;
+}
+
+.dropdown {
+  display: none;
+}
+
+.dropdown.open {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  right: 0;
+  top: 40px;
+  background-color: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--foreground);
+  border-radius: 5px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+#logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
+  text-decoration: none;
+  font-size: 2rem;
+}

client/src/app/nav/nav.html

@@ -0,0 +1,15 @@
+<nav>
+  <a href="/" id="logo"><img src="https://cdn.nhcarrigan.com/logo.png" alt="Logo"><span id="name">Hikari</span></a>
+  <div [class]="dropdownClass">
+    <a href="/products" class="nav-link">Products</a>
+    <hr />
+    <a href="/account" class="nav-link">Account</a>
+    <hr />
+    <a href="/settings" class="nav-link">Settings</a>
+    <hr />
+    <a href="/chat" class="nav-link">Chat</a>
+    <hr />
+  </div>
+  <i class="fa-solid fa-bars" *ngIf="!navOpen" (click)="toggleNav()"></i>
+  <i class="fa-solid fa-times" *ngIf="navOpen" (click)="toggleNav()"></i>
+</nav>

client/src/app/nav/nav.ts

@@ -0,0 +1,22 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+
+@Component({
+  imports:     [ CommonModule ],
+  selector:    "app-nav",
+  styleUrl:    "./nav.css",
+  templateUrl: "./nav.html",
+})
+export class Nav {
+  public navOpen = false;
+  public dropdownClass = "dropdown";
+
+  public toggleNav(): void {
+    this.navOpen = !this.navOpen;
+    if (this.navOpen) {
+      this.dropdownClass = "dropdown open";
+    } else {
+      this.dropdownClass = "dropdown";
+    }
+  }
+}

client/src/styles.css

@@ -43,7 +43,8 @@ main {
   border-radius: 10px;
   width: 100vw;
   margin-bottom: 85px;
-  min-height: calc(100vh - 85px);
+  margin-top: 50px;
+  min-height: calc(100vh - 85px - 50px);
 }
 footer {
   width: 100%;