Fix sidebar icons visibility when collapsed
- Hide all menu icons when sidebar is collapsed - Hide all menu text, header text, and footer content - Create completely minimal collapsed state (60px wide) - Only collapse button remains visible for expanding - Smooth transitions for all elements - Clean, distraction-free collapsed sidebar experience When collapsed, sidebar now shows: - Only the expand button (›) - Clean gradient background - 60px minimal width - No icons or text bleeding through 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
8f141beef5
commit
91544ddd91
25
styles.css
25
styles.css
@ -39,7 +39,10 @@ body {
|
||||
.sidebar.collapsed .menu-text,
|
||||
.sidebar.collapsed .sidebar-header h2,
|
||||
.sidebar.collapsed .user-info span,
|
||||
.sidebar.collapsed .logout-btn {
|
||||
.sidebar.collapsed .logout-btn,
|
||||
.sidebar.collapsed .sidebar-footer,
|
||||
.sidebar.collapsed .menu-icon,
|
||||
.sidebar.collapsed .sidebar-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||||
@ -48,30 +51,16 @@ body {
|
||||
.menu-text,
|
||||
.sidebar-header h2,
|
||||
.user-info span,
|
||||
.logout-btn {
|
||||
.logout-btn,
|
||||
.menu-icon,
|
||||
.sidebar-menu {
|
||||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .menu-icon {
|
||||
margin-right: 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .menu-item {
|
||||
justify-content: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .sidebar-header {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.sidebar.collapsed .user-info {
|
||||
padding: 15px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 30px 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user