Has anyone built a collapsible sidebar inside a Layout Template where the page content resizes with it? 🤔

My setup:

• Sidebar component with 2 variants: Open (256px) and Close (76px), toggled with On Tap interactions

• Template variable "Sidebar" (Open / Close)

• Template root padding-left bound to that variable: Open = 256px, Close = 76px

On the canvas it works: switching the variable moves the content correctly.

The problem: in Preview, when I click the toggle, the sidebar collapses to 76px but the content stays at 256px, leaving a 180px gap. The interaction only changes the component's variant, not the template variable, so the padding never updates.

What I tried:

• Making the template root a horizontal stack: there's no stack direction option on the root

• Wrapping the sidebar and the Placeholder in a stack: the Placeholder can't be selected or grouped

Questions:

1. Is there a way to change a template variable at runtime from an interaction?

2. If not, how would you build this without code?

Remix to reproduce: https://framer.com/remix/mk6Y7aRSn5YttUC0IWue

Thanks in advance! 🙏

Has anyone built a collapsible sidebar inside a Layout Template where the page content resizes with it? 🤔

My setup:

• Sidebar component with 2 variants: Open (256px) and Close (76px), toggled with On Tap interactions

• Template variable "Sidebar" (Open / Close)

• Template root padding-left bound to that variable: Open = 256px, Close = 76px

On the canvas it works: switching the variable moves the content correctly.

The problem: in Preview, when I click the toggle, the sidebar collapses to 76px but the content stays at 256px, leaving a 180px gap. The interaction only changes the component's variant, not the template variable, so the padding never updates.

What I tried:

• Making the template root a horizontal stack: there's no stack direction option on the root

• Wrapping the sidebar and the Placeholder in a stack: the Placeholder can't be selected or grouped

Questions:

1. Is there a way to change a template variable at runtime from an interaction?

2. If not, how would you build this without code?

Remix to reproduce: https://framer.com/remix/mk6Y7aRSn5YttUC0IWue

Thanks in advance! 🙏