Persistent State Demo

This side panel has persistent-id="demo-panel" set, which means it saves its collapsed/expanded state to localStorage.

Try It Out

1. Click the toggle arrow to collapse or expand the side panel
2. Refresh the page (or this iframe)
3. Notice the panel returns to the same state you left it in

How It Works

When you set the persistent-id attribute, the component:

• Saves the collapsed state to localStorage whenever it changes
• Restores the saved state when the component mounts
• Uses the key format: side-panel-persistent-id-{persistentId}

This is useful for preserving user preferences across sessions, making your application feel more responsive and personalized.