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 .menu-text,
|
||||||
.sidebar.collapsed .sidebar-header h2,
|
.sidebar.collapsed .sidebar-header h2,
|
||||||
.sidebar.collapsed .user-info span,
|
.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;
|
opacity: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||||||
@ -48,30 +51,16 @@ body {
|
|||||||
.menu-text,
|
.menu-text,
|
||||||
.sidebar-header h2,
|
.sidebar-header h2,
|
||||||
.user-info span,
|
.user-info span,
|
||||||
.logout-btn {
|
.logout-btn,
|
||||||
|
.menu-icon,
|
||||||
|
.sidebar-menu {
|
||||||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
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 {
|
.sidebar.collapsed .sidebar-header {
|
||||||
padding: 20px 10px;
|
padding: 20px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar.collapsed .user-info {
|
|
||||||
padding: 15px 10px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-header {
|
.sidebar-header {
|
||||||
padding: 30px 20px;
|
padding: 30px 20px;
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user