d2-05-main-menu

Installation
SKILL.md

Day 2 · Step 5 — Main menu with navigation

up-app/src/app/pages/menu/menu.component.ts (standalone component):

  • Display the program/application name as a heading.
  • Provide a Go to Search button → router.navigate(['/<entity>']).
  • Provide an Add New button → router.navigate(['/<entity>/new']).
  • Use Tailwind CSS for styling (centered layout, button spacing).

Route table (app.routes.ts) — add the menu route as the landing page:

{ path: '', component: MenuComponent },  // default/home route
{ path: '<entity>', component: <Entity>SearchComponent },
{ path: '<entity>/new', component: <Entity>FormComponent },
{ path: '<entity>/:id/edit', component: <Entity>FormComponent },

Update app.component.ts to show <router-outlet/> (already done in d2-00).

Installs
1
First Seen
Aug 17, 2026
d2-05-main-menu — softinter-chiangrai/up-ai-skill-training