Skip to content

feat: add Purpose dropdown, active nav indicators, and Featured Projects grid#8

Open
ramonloganjr wants to merge 1 commit intobettergovph:masterfrom
ramonloganjr:master
Open

feat: add Purpose dropdown, active nav indicators, and Featured Projects grid#8
ramonloganjr wants to merge 1 commit intobettergovph:masterfrom
ramonloganjr:master

Conversation

@ramonloganjr
Copy link

@ramonloganjr ramonloganjr commented Mar 11, 2026

Changes

Navigation

  • Replaced separate Mission and Vision links with a Purpose dropdown containing both as submenu items (desktop + mobile)
  • Added active state indicator (bottom border underline + brand color text) for the currently active page
  • Parent dropdown labels (Purpose, Contributing) highlight when any child route is active
  • Replaced hamburger character (☰) with a proper SVG icon that toggles to an X when the mobile menu is open
  • Added aria-current="page" attributes on active nav items for accessibility

Homepage

  • Removed the Our Mission / Our Vision preview sections to avoid duplication with the dedicated pages
  • Added Featured Projects section displaying the 6 most recently added projects (sorted by dateAdded) in a 3-column × 2-row card grid
  • Each card shows project title, truncated summary, status badge, and primary sector
  • Interactive hover effects: border highlights to brand color, shadow elevation, title color transition, subtle press scale, and focus ring
  • Status badges use consistent color-coded styling matching the Directory page (green = stable, blue = beta, yellow = alpha, gray = planning)
Screenshot 2026-03-11 at 15-33-45 Open Source Technology for the Philippines - OpenBayan

Files Changed

  • src/lib/components/SiteHeader.svelte — navigation restructure + active states
  • src/routes/+page.svelte — homepage section updates
  • src/routes/+page.ts — data loader updated to sort by dateAdded

…cts grid

- Navigation: Replace separate Mission/Vision links with a Purpose dropdown
  containing Mission and Vision submenu items (desktop + mobile)
- Navigation: Add active state indicator (underline + brand color) for the
  current page, including parent dropdown highlighting
- Navigation: Replace hamburger character with SVG icon (toggles to X when open)
- Homepage: Remove Our Mission / Our Vision sections to avoid duplication
- Homepage: Add Featured Projects section with 3x2 card grid showing the 6
  most recently added projects sorted by dateAdded
- Homepage: Add interactive hover effects on project cards (shadow elevation,
  border highlight, press scale, focus ring)
- Homepage: Use consistent status badge styling (rounded-full pills with
  color-coded backgrounds) matching the Directory page conventions
- Use aria-current attributes for accessibility on active nav items
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant