Made the header button show/hide work
This commit is contained in:
parent
48668f7f6e
commit
284e70b841
20 changed files with 585 additions and 588 deletions
34
app/styles/container.css
Normal file
34
app/styles/container.css
Normal file
|
@ -0,0 +1,34 @@
|
|||
/* container.css */
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
position: relative; /* Ensure relative positioning for proper transitions */
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
width: 30vw; /* Adjust as needed */
|
||||
transition: width 0.3s ease, visibility 0.3s ease; /* Transition for width, opacity, and visibility */
|
||||
}
|
||||
|
||||
.left-panel.hidden {
|
||||
opacity: 0; /* Fade out when hidden */
|
||||
width: 0; /* Set width to 0 when hidden */
|
||||
visibility: hidden; /* Hide the panel while keeping the space occupied */
|
||||
margin-right: -30vw;
|
||||
}
|
||||
|
||||
.conversation-container {
|
||||
flex: 1;
|
||||
transition: width 0.3s ease, visibility 0.3s ease; /* Transition for margin-left */
|
||||
}
|
||||
|
||||
/* Adjust margin-left when panel is shown or hidden */
|
||||
.conversation-container.expanded {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.conversation-container.collapsed {
|
||||
margin-left: 30vw; /* Same as the width of the left-panel */
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue