Skip to main content
← All notes
Building

The sidebar reads the URL hash and opens to your intent

softwareaccessibility

Every service page has a sidebar with up to three accordion panels — packages, book a call, send a brief. The FormAccordion component decides which panel opens based on the URL hash at load time. If the hash is #send-brief the email panel opens. If the hash is #book-call the call panel opens. If the hash is #packages-sidebar the packages panel opens. If there is no hash, the default is packages when packages exist or call when they do not. The component also listens for hashchange events after mount so clicking a link anywhere on the page can switch the active panel without a full navigation. The ServiceNav at the top of every service page has two call-to-action buttons — Book a Call and Send a Brief. Each one is an anchor link to the corresponding hash. Clicking either scrolls the sidebar into view and opens the right panel in one motion. The AccordionPanel component handles its own accessibility. When a panel is collapsed it gets role button and tabIndex zero so keyboard users can reach it and activate it with Enter or Space. When a panel is active those attributes are removed because the panel is now a container not a control. The Space key handler calls preventDefault to stop the browser from scrolling the page. Each panel has scroll-mt-24 so it clears the sticky header when scrolled into view. The border colour switches from the glass border token to the service accent colour when active. The background shifts from the glass token to a five percent tint of the accent using color-mix in sRGB. The border width goes from one pixel to two. Three panels, one state variable, one hashchange listener. The URL drives the UI and the UI stays in sync with the URL.

Comments coming soon

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