appsmith-statistics-app/.cursor/skills/navigation-button-add/SKILL.md

name, description

name	description
navigation-button-add	Implements a new navigation button with the existing highlight/default colors. Use when the user asks to add buttons to the nav block, mentions page navigation, or instructs to keep the highlight behavior consistent with the latest change.

Navigation Button Addition

Instructions

1. Understand the current navigation canvas by checking pages/*/widgets/Container1/. Each page reuses the same container structure. The navigation is organized into sections, each with a Text label and one or more buttons:
   • Sales section: Text1 (label), Button1 (Capacity Planning), Button1Copy (Units Shipped), Button1Copy2 (Units Ordered)
   • Pending POs section: Text2 (label), Button2 (SLx Pending)
   • Future sections follow the same pattern (Text3/Button3, etc.)
2. Follow the established color scheme:
   • The highlighted button (current page) uses appsmith.theme.colors.backgroundColor.
   • The inactive buttons use #ffffff.
3. When adding a new navigation button:
   • Copy one of the existing Button* definitions, adjusting text, onClick, widgetId, widgetName, topRow, bottomRow, and any other placement metadata so it fits below the existing items in its section.
   • Set buttonColor to #ffffff (inactive) unless the button is on its own page; then set its definition to appsmith.theme.colors.backgroundColor with dynamicBindingPathList: [{"key": "buttonColor"}].
   • Ensure dynamicBindingPathList stays empty when buttonColor is static white.
   • Point onClick to navigateTo('<Page Name>', {}, 'SAME_WINDOW') and keep placement/responsiveBehavior matching other nav buttons.
   • Set parentId to the Canvas widget ID inside that page's Container1.json (the widgetId of the CANVAS_WIDGET child). This varies per page -- always read Container1.json to find the correct value.
4. Add the button on ALL pages (not just pages in the same section). Every page gets the full navigation.
5. If adding a button to a new section, follow the navigation-section-add skill first to create the section label.
6. Run git status/diff to verify only the intended files changed before reporting back.

Row Layout

Each widget occupies 4 rows. Sections are separated by a 2-row gap:

Widget	topRow	bottomRow
Text1 "Sales"	0	4
Button1 "Capacity Planning"	4	8
Button1Copy "Units Shipped"	8	12
Button1Copy2 "Units Ordered"	12	16
(2-row gap)	16	18
Text2 "Pending POs"	18	22
Button2 "SLx Pending"	22	26

When adding a new button within a section, increment from the last button's bottomRow by 4. When adding a new section after the last one, add 2 rows gap, then 4 for the label, then 4 for each button.

Examples

• Adding "Units Ordered" button to Sales section:

  1. Copy Button1Copy (Units Shipped) in each page's Container1.
  2. Set text to "Units Ordered", onClick to navigateTo('Sales - Units Ordered', {}, 'SAME_WINDOW');.
  3. Assign buttonColor to #ffffff for inactive cases and to appsmith.theme.colors.backgroundColor inside the Sales - Units Ordered page definition for highlight.
  4. Set topRow: 12, bottomRow: 16 (next slot after Units Shipped).

• Adding a second button to Pending POs section:

  1. Create Button2Copy.json in each page's Container1.
  2. Set topRow: 26, bottomRow: 30 (next slot after SLx Pending at 22-26).
  3. Follow the same highlight/inactive pattern.