/* app/assets/stylesheets/application.css or a dedicated stylesheet */
.side-panel {
  position: fixed;
  top: 0;
  right: 0; /* Or left: 0 for a left-side panel */
  width: 300px; /* Adjust as needed */
  height: 100vh;
  background-color: #f0f0f0;
  transform: translateX(100%); /* Hides the panel off-screen initially */
  transition: transform 0.3s ease-in-out; /* Smooth transition for opening/closing */
  z-index: 1000;
  padding-left: 5px;
}

.side-panel.hidden {
  transform: translateX(100%); /* Ensures it's hidden when the 'hidden' class is present */
}

/* When the 'hidden' class is removed, the panel slides in */
.side-panel:not(.hidden) {
  transform: translateX(0);
}