Skip to main content
← All notes
Building

The sidebar opens to the section you asked for

softwareaccessibility

Every service page has a sidebar with three sections — packages, book a call, and send a brief. The sidebar is a FormAccordion component that reads the URL hash on mount. If you land on /software#book-call, the booking section is already open. If you land on /accessibility#send-brief, the contact form is already open. No scroll-to animation, no flash of the wrong section. It just opens to where you wanted to go. The accordion listens for hashchange events too, so in-page links work the same way. The homepage service cards link to /audio#packages-sidebar. The call-to-action buttons link to /production#book-call. Every link can target a specific accordion section on any service page. Under the hood, the FormAccordion initialises its active state from window.location.hash. Three string comparisons — one for each section ID. A useEffect registers a hashchange listener so browser back-and-forward navigation updates the accordion without a page reload. Each section is wrapped in a BlurReveal with staggered delays so the panels animate in sequence when the page first loads. The collapsed panels are still interactive — they respond to click, Enter, and Space — because they set role button and tabIndex 0 when inactive. One accordion component handles deep-linking, keyboard access, and progressive disclosure for all five service pages.

Comments coming soon

Sign in with TikTok to leave a comment. Coming soon.