quackscape/assets/css/scene.css
Kumi e9e8719a93
feat: improve sidebar UX with toggle functionality
Introduced new styles for the sidebar's open and close buttons to
enhance visibility and user interaction. Updated the sidebar logic in
the JavaScript to include a toggle functionality, allowing users to
easily open and close the sidebar. This improves the user experience by
making navigation more intuitive and the UI cleaner. The 'Close Sidebar'
button now directly closes the sidebar, and a new 'Open Sidebar' button
appears when the sidebar is closed, providing a clear action cue to the
users.
2024-03-16 07:58:14 +01:00

50 lines
733 B
CSS

#sceneNavbar {
z-index: 99999;
position: fixed;
width: 100%;
}
#sceneSidebar {
z-index: 99999;
position: fixed;
width: 250px;
height: 100%;
background-color: #f8f9fa;
opacity: 0.7;
}
.btn-close-sidebar {
width: 100%;
padding: 10px;
background-color: #ff4081;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
border-radius: 0;
}
.btn-close-sidebar:hover {
background-color: #e03570;
}
.hide {
display: none;
}
.btn-open-sidebar {
z-index: 99999;
position: fixed;
width: 250px;
background-color: #40ffbe;
color: black;
border: none;
cursor: pointer;
font-size: 16px;
border-radius: 0;
opacity: 0.7;
}
.btn-open-sidebar:hover {
background-color: #0dffad;
}