Dynamic JavaScript Menus for HTML

My client’s brochure-style site is built entirely in static HTML. Each of the 60+ pages carries a duplicated top and side menu, so every time we add or remove a product I have to open every file and manually paste the new navigation. I’d like you to eliminate that chore by writing a small, self-contained solution—most likely JavaScript plus a single external menu file—that will:

• Pull the menu markup from one central location and inject it into every page at load time.
• Preserve the existing look and layout exactly as it is; no redesign, just smarter delivery.
• Remain fully responsive so the current mobile breakpoints keep working.
• Add a lightweight search field that filters our menu links in real time.

The code needs to be clean, well-commented, and easy for me to update when the client hands me new items. No server-side processing is available, so please stay within plain HTML, CSS, and vanilla JavaScript (or a minimalist library if there’s a compelling reason).

Acceptance criteria
1. One source file controls both the top and side menus across all pages.
2. Updating that file alone instantly reflects on every page without additional edits.
3. Existing styling and page structure remain untouched.
4. Menus work smoothly on modern desktop and mobile browsers.
5. Inline documentation shows me where to add or remove links and adjust the search feature.

If this sounds straightforward to you, let’s talk timings and get a quick proof of concept running on two sample pages before rolling it out site-wide.