feat: add search bar to menu (resolves #178)

[greatislander]

• I've read the guidelines for Contributing to the Platform Co-op Toolkit
• This isn't a duplicate of an existing pull request

Description

Adds a search bar to the menu. On mobile devices, the input is hidden by default but can be revealed by pressing a toggle button. The search input can be hidden by pressing escape, tabbing into the menu, or pressing the toggle button again.

Also resolves #178; an open menu dropdown should be collapsed if another is expanded via click event.

Steps to test

Review menu components (default and home) at all screen sizes.

Additional information

Not applicable.

Related issues

• Blocks Add search bar coop-library#116.
• Resolves Menu: opening a dropdown via click event does not close already open dropdowns #178.

[netlify]

Deploy preview for pinecone ready!

Built with commit 9d6f76c

https://deploy-preview-182--pinecone.netlify.com

[cherylhjli]

It looks great! Is it possible for the search button to be square? It looks a little rectangular right now.
Also I don't think the home page nav needs a search bar as there's a giant prominent one in the center of the page.

[greatislander]

@cherylhjli Fixed.

[cherylhjli]

Aspect ratio looks great, it looks like the search bar is still there on the home page though:

[greatislander]

https://deploy-preview-182--pinecone.netlify.com/components/preview/menu--home.html ?

[greatislander]

Fixed now — deploying @cherylhjli

[jhung]

The Search submit button doesn't have a text label, but the dev branch of the Search molecule has a text label. Is this because some changes have not been merged?

The span inside the label is also empty, which can be removed since the form has role=search already.

[greatislander]

@jhung to clarify, should the label wrapper around the search input be removed altogether? I've fixed the button text in 9d6f76c (I wasn't rendering the search component properly).