Should be easy enough. You've got even a couple of options:
- You can use a popup page and style that. For example: you can add height: 100vh; width: 300px; and add some animation to make it look nice.
- You can use an NP (Non-Presistable) object in combination with conditional visibility. For Example, the container/sheet is hidden based on the NP object value (boolean). When clicking the button the boolean will be toggled, thus the container/sheet is visible. Of course you'll need to add style to make it fixed on the left/right side.
- Alternatively you can use dynamic classes with the NP object, to toggle the position of the container/sheet. This will give you a bit more animation options. See example below.
- You can also toggle it via custom JavaScript. This is however a bit more advanced. Would not recommend, unless you know what you're doing.
For example
.sheet {
position: fixed;
right: -300px;
top: 0;
width: 300px;
height: 100vh;
background-color: #f4f4f4;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
transition: right 0.3s ease;
}
.sheet--open {
right: 0;
}
Good luck!
Maurits