Added load more and view less buttons to menu grid

[gayatridot]

📝 PR Title

Enhancement: Add Load More / View Less Toggle to Menu Grid

closes (#545)

---

📌 Description

This PR addresses Issue #545 by improving the menu grid’s usability. Previously, all menu items were rendered at once, which made scrolling long and frustrating.

With this update:

• Only 2 rows (8 items, 4 per row) are shown initially.
• A “Load More” button appears at the bottom of the grid when more items exist.
• Clicking Load More reveals all menu items.
• A “View Less” button then appears at the bottom of the expanded list.
• Clicking View Less collapses the grid back to 2 rows.

---

✅ Changes Made

• Added expanded state to track collapsed/expanded view.
• Implemented renderMenuWithToggle() function to handle menu rendering with toggle logic.
• Integrated toggle button creation and event handling.
• Updated CSS with .btn-toggle styling for consistent UI.

---

🎯 Benefits

• Reduces initial scroll length.
• Keeps the menu visually clean and less overwhelming.
• Gives users control over how much content they want to see.
• Improves overall user experience on large menus.

---

📷 Screenshot

---

🔎 Notes

• Default: 2 rows × 4 items = 8 items visible.
• Button only appears if there are more than 8 items.
• Works seamlessly with existing applyAllFilters() and createCard() logic.