Live Client Project

The Woods + Sidebar

Two bars at one address, handled as two connected experiences instead of one confusing page.

The Woods + Sidebar homepage — a split hero with a packed indoor bar room under The Woods wordmark on the left and Sidebar's white storefront and street-side patio on the right, a live open/closed pill above each side, and a card between them reading "The Woods + Sidebar — two bars at one address on Poplar".

The Woods and Sidebar share an address at 17 N Poplar Street in Oxford, Ohio. They are not the same room, and neither one is the main event.

The design problem

One address, two bars, and a real risk of getting the relationship wrong in either direction. Build one page and the two rooms blur into a single venue with a confusing name. Treat one as the headline and the other becomes an annex — which is not what the business is.

So the structural question was not “how do we fit both on a page” but “how does a visitor pick one, get the right answers, and still see that they are at the same address.”

What was built

The homepage opens split: The Woods on one side, Sidebar on the other, each with its own photography and its own live open/closed status. Choosing a venue is the central interaction, and the header logos are the control — the venue’s own mark selects it, and selecting it again returns to the overview. Using the logos rather than a tab bar keeps the interaction in the businesses’ own language.

Picking a side re-themes the page around that venue and gives it the larger share of the hero, but nothing practical is ever hidden. The address, phone, status, and directions stay put in every state, so choosing a room never costs you the information you came for.

Each venue describes what it actually is: The Woods as the indoor bar room with a stage at the end of it, Sidebar as a bar room with tables along Poplar and a patio out back.

Implementation

The two venues keep two entirely separate hour schedules. They currently hold the same values, but neither inherits from the other, so one bar can close for a private event or a holiday while the other stays open — a one-file edit, not a code change. The status engine runs per venue and handles the parts that usually break: America/New_York, closing times after midnight, dated exceptions, and closures.

The site is hand-built and static — no framework and no build step. Every practical answer is real markup that reads in order with JavaScript disabled, and the live status pills only appear once the script can actually calculate them, because a status indicator that cannot update is worse than no indicator. Both bars carry their own structured data, and week-to-week edits happen in small data files rather than in the page.