src/app/app.html

@@ -1,7 +1,11 @@
 <div class="app-container">
   <header class="app-header">
     <h1>Common Cents</h1>
-    <h2>The common sense expense tracker.</h2>
+    <div class="app-navigation">
+      @for (link of navLinks(); track link) {
+        <a matButton [href]="link.href">{{ link.text }}</a>
+      }
+    </div>
     <app-divider />
   </header>
 

src/app/app.routes.ts

@@ -1,6 +1,8 @@
 import { Routes } from '@angular/router';
 import { ExpensePage } from './pages/expenses/expense-page.component';
 import { HomePage } from './pages/home/home-page.component';
+import { MetadataPageComponent } from './pages/metadata/metadata-page.component';
+import { SettingsPageComponent } from './pages/settings/settings-page.component';
 
 export const routes: Routes = [
   {
@@ -10,5 +12,13 @@ export const routes: Routes = [
   {
     path: 'expenses',
     component: ExpensePage
+  },
+  {
+    path: 'metadata',
+    component: MetadataPageComponent
+  },
+  {
+    path: 'settings',
+    component: SettingsPageComponent
   }
 ];

src/app/app.scss

@@ -14,19 +14,13 @@
 }
 
 h1 {
-  font-size: 3.125rem;
+  font-size: 2.5rem;
   line-height: 100%;
   letter-spacing: -0.125rem;
-  font-weight: 500;
+  font-weight: 400;
   margin: 0;
-  font-family: sans-serif;
 }
 
-h2 {
-  font-size: 1.2rem;
-  line-height: 100%;
-  font-weight: 500;
-  margin: 0;
-  font-family: sans-serif;
-  font-style: italic;
+.app-navigation {
+  display: flex;
 }

src/app/app.ts

@@ -1,11 +1,36 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { Divider } from './components/divider/divider';
+import { DividerComponent } from './components/divider/divider.component';
+import { MatButton } from '@angular/material/button';
+
+interface NavLink {
+  text: string;
+  href: string;
+}
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, Divider],
+  imports: [RouterOutlet, DividerComponent, MatButton],
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })
-export class App { }
+export class App {
+  public navLinks = signal<NavLink[]>([
+    {
+      text: 'Home',
+      href: '/'
+    },
+    {
+      text: 'Expenses',
+      href: '/expenses'
+    },
+    {
+      text: 'Metadata',
+      href: '/metadata'
+    },
+    {
+      text: 'Settings',
+      href: '/settings'
+    }
+  ]);
+}

src/app/components/divider/divider.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-divider',
+  imports: [],
+  templateUrl: './divider.component.html',
+  styleUrl: './divider.component.scss'
+})
+export class DividerComponent { }

src/app/components/divider/divider.ts

@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-divider',
-  imports: [],
-  templateUrl: './divider.html',
-  styleUrl: './divider.scss'
-})
-export class Divider { }

src/app/components/expense-list/expense-list.component.scss

@@ -12,9 +12,8 @@
   p {
     font-size: 1.8rem;
     line-height: 100%;
-    font-weight: 200;
+    font-weight: 400;
     margin: 0;
-    font-family: sans-serif;
   }
 
   app-divider {

src/app/components/expense-list/expense-list.component.ts

@@ -3,11 +3,11 @@ import { ExpenseService } from '../../services/expense.service';
 import { MatTableModule } from '@angular/material/table';
 import { MatCardModule } from '@angular/material/card';
 import { ExpenseComponent } from '../expense/expense.component';
-import {Divider} from '../divider/divider';
+import { DividerComponent } from '../divider/divider.component';
 
 @Component({
   selector: 'app-expense-list',
-  imports: [MatTableModule, MatCardModule, ExpenseComponent, Divider],
+  imports: [MatTableModule, MatCardModule, ExpenseComponent, DividerComponent],
   templateUrl: './expense-list.component.html',
   styleUrl: './expense-list.component.scss'
 })

src/app/pages/home/home-page.component.html

@@ -1,7 +1,3 @@
 <div class="home-container">
-  <ul>
-    <li>
-      <a routerLink="expenses">ExpenseService</a>
-    </li>
-  </ul>
+  <h2>The common sense expense tracker.</h2>
 </div>

src/app/pages/home/home-page.component.scss

@@ -0,0 +1,7 @@
+h2 {
+  font-size: 1.3rem;
+  line-height: 100%;
+  font-weight: 500;
+  margin: 0;
+  font-family: sans-serif;
+}

src/app/pages/home/home-page.component.ts

@@ -1,12 +1,9 @@
 import { Component } from '@angular/core';
-import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-home',
-  imports: [
-    RouterLink
-  ],
+  imports: [],
   templateUrl: './home-page.component.html',
-  styleUrl: './home-page.component.scss',
+  styleUrl: './home-page.component.scss'
 })
 export class HomePage { }

src/app/pages/metadata/metadata-page.component.html

@@ -0,0 +1,3 @@
+<div class="metadata-container">
+  Metadata page
+</div>

src/app/pages/metadata/metadata-page.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-metadata',
+  imports: [],
+  templateUrl: './metadata-page.component.html',
+  styleUrl: './metadata-page.component.scss'
+})
+export class MetadataPageComponent { }

src/app/pages/settings/settings-page.component.html

@@ -0,0 +1,3 @@
+<div class="settings-container">
+  Settings page
+</div>

src/app/pages/settings/settings-page.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-settings',
+  imports: [],
+  templateUrl: './settings-page.component.html',
+  styleUrl: './settings-page.component.scss'
+})
+export class SettingsPageComponent { }

src/styles.scss

@@ -10,7 +10,7 @@ html {
   height: 100%;
   @include mat.theme((
     color: (
-      primary: mat.$cyan-palette,
+      primary: mat.$azure-palette,
       tertiary: mat.$orange-palette,
     ),
     typography: Roboto,