SIDEBAR INTERACTION

Open In Editor Video Publish Your Code

.sidebar{
    width:280px;
    height:600px;
    background:#ffffff;
    border-radius:24px;
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position:relative;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

.sidebar.shrink{
    width:95px;
}

.sidebar.shrink .menu span,
.sidebar.shrink .profile span,
.sidebar.shrink .theme-toggle {
    opacity:0;
    width:0;
    display:none;
}

.sidebar.shrink .menu i {
    font-size:20px;
    margin:0 auto;
}

.sidebar.shrink .menu li {
    justify-content:center;
    padding:12px 0;
}

.sidebar.shrink .profile {
    justify-content:center;
    padding:10px 0;
}

.sidebar.shrink .profile img {
    margin:0;
}

.theme-toggle{
    display:flex;
    background:#f1f5f9;
    border-radius:50px;
    padding:4px;
    margin-bottom:30px;
    transition:0.3s;
}

.theme-toggle button{
    flex:1;
    padding:10px 8px;
    border:none;
    background:transparent;
    border-radius:50px;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    transition:all 0.3s ease;
}

.theme-toggle button.active{
    background:#ffffff;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
    color:#0f172a;
}

.theme-toggle button i {
    margin-right:5px;
}

.menu{
    list-style:none;
    margin-bottom:20px;
}

.menu li{
    display:flex;
    align-items:center;
    gap:15px;
    padding:12px 16px;
    border-radius:12px;
    cursor:pointer;
    transition:all 0.2s ease;
    margin-bottom:4px;
    color:#334155;
}

.menu li:hover{
    background:#f1f5f9;
    transform:translateX(5px);
}

.menu li.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.4);
}

.menu i{
    font-size:20px;
    width:24px;
    text-align:center;
}

.menu span{
    font-size:15px;
    font-weight:500;
    transition:opacity 0.3s ease;
    white-space:nowrap;
}

.profile{
    display:flex;
    align-items:center;
    gap:12px;
    background:#f8fafc;
    padding:12px;
    border-radius:16px;
    transition:0.3s;
    border:1px solid #e2e8f0;
}

.profile img{
    width:40px;
    height:40px;
    border-radius:12px;
    object-fit:cover;
    border:2px solid white;
    box-shadow:0 2px 5px rgba(0,0,0,0.1);
}

.profile span{
    font-weight:600;
    font-size:14px;
    color:#1e293b;
    transition:opacity 0.3s ease;
    white-space:nowrap;
}

.profile-info {
    display:flex;
    flex-direction:column;
    transition:0.3s;
}

.profile-role {
    font-size:12px;
    color:#64748b;
    transition:0.3s;
}

.toggle-btn{
    position:absolute;
    right:-12px;
    top:50%;
    transform:translateY(-50%);
    background:#ffffff;
    border-radius:50%;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 2px 10px rgba(0,0,0,0.2);
    border:2px solid #e2e8f0;
    transition:all 0.3s ease;
    font-size:16px;
    color:#475569;
    z-index:10;
}

.toggle-btn:hover {
    background:#f1f5f9;
    transform:translateY(-50%) scale(1.1);
}

.sidebar.shrink .toggle-btn {
    transform:translateY(-50%) rotate(180deg);
}

/* DARK MODE */
body.dark{
    background:linear-gradient(135deg,#0a0f1e,#020617);
}

body.dark .sidebar{
    background:#1e293b;
    box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

body.dark .theme-toggle{
    background:#334155;
}

body.dark .theme-toggle button{
    color:#94a3b8;
}

body.dark .theme-toggle button.active{
    background:#0f172a;
    color:#ffffff;
}

body.dark .menu li{
    color:#cbd5e1;
}

body.dark .menu li:hover{
    background:#334155;
}

body.dark .menu li.active {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

body.dark .profile{
    background:#334155;
    border-color:#475569;
}

body.dark .profile span{
    color:#f1f5f9;
}

body.dark .profile-role{
    color:#94a3b8;
}

body.dark .toggle-btn{
    background:#334155;
    border-color:#475569;
    color:#f1f5f9;
}

body.dark .toggle-btn:hover{
    background:#475569;
}
</style>
</head>
<body>

<div class="sidebar" id="sidebar">
    <div>
        <div class="theme-toggle">
            <button id="lightBtn" class="active">
                <i class="fas fa-sun"></i> Light
            </button>
            <button id="darkBtn">
                <i class="fas fa-moon"></i> Dark
            </button>
        </div>

<ul class="menu">
            <li class="active">
                <i class="fas fa-home"></i>
                <span>Dashboard</span>
            </li>
            <li>
                <i class="fas fa-inbox"></i>
                <span>Inbox</span>
            </li>
            <li>
                <i class="fas fa-calendar"></i>
                <span>Calendar</span>
            </li>
            <li>
                <i class="fas fa-chart-line"></i>
                <span>Activity</span>
            </li>
            <li>
                <i class="fas fa-cog"></i>
                <span>Settings</span>
            </li>
            <li>
                <i class="fas fa-bell"></i>
                <span>Notifications</span>
            </li>
        </ul>
    </div>

<div class="profile">
        <img src="https://i.pravatar.cc/100?u=okbitsnok" alt="Profile">
        <div class="profile-info">
            <span>KEVAKIBHACK</span>
            <span class="profile-role">Admin</span>
        </div>
    </div>

// Theme toggle
lightBtn.onclick = () => {
    body.classList.remove("dark");
    lightBtn.classList.add("active");
    darkBtn.classList.remove("active");
    localStorage.setItem('theme', 'light');
}

darkBtn.onclick = () => {
    body.classList.add("dark");
    darkBtn.classList.add("active");
    lightBtn.classList.remove("active");
    localStorage.setItem('theme', 'dark');
}

// Sidebar toggle
function toggleSidebar(){
    sidebar.classList.toggle("shrink");
    
    // Toggle icon direction
    const icon = toggleBtn.querySelector('i');
    if (sidebar.classList.contains('shrink')) {
        icon.classList.remove('fa-chevron-left');
        icon.classList.add('fa-chevron-right');
    } else {
        icon.classList.remove('fa-chevron-right');
        icon.classList.add('fa-chevron-left');
    }
    
    localStorage.setItem('sidebarState', sidebar.classList.contains('shrink') ? 'shrink' : 'expanded');
}

// Menu item click
menuItems.forEach(item => {
    item.addEventListener('click', function() {
        menuItems.forEach(i => i.classList.remove('active'));
        this.classList.add('active');
        console.log('Selected:', this.querySelector('span').textContent);
    });
});

// Load saved preferences
window.addEventListener('load', function() {
    // Load theme
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        body.classList.add('dark');
        darkBtn.classList.add('active');
        lightBtn.classList.remove('active');
    }
    
    // Load sidebar state
    const savedState = localStorage.getItem('sidebarState');
    if (savedState === 'shrink') {
        sidebar.classList.add('shrink');
        const icon = toggleBtn.querySelector('i');
        icon.classList.remove('fa-chevron-left');
        icon.classList.add('fa-chevron-right');
    }
});

// Keyboard shortcut (Ctrl + B to toggle sidebar)
document.addEventListener('keydown', function(e) {
    if (e.ctrlKey && e.key === 'b') {
        e.preventDefault();
        toggleSidebar();
    }
});

// Responsive design
function checkScreenSize() {
    if (window.innerWidth <= 768) {
        sidebar.classList.add('shrink');
        const icon = toggleBtn.querySelector('i');
        icon.classList.remove('fa-chevron-left');
        icon.classList.add('fa-chevron-right');
    }
}

window.addEventListener('resize', checkScreenSize);
checkScreenSize();
</script>

</body>
</html>

SIDEBAR INTERACTION

Recommended

Sidebar toggle

Modern Login Form + Sliding Sidebar

Canvas Particle Animation with Mouse Interaction

HTML

CSS

JS

Recommended

Sidebar toggle

Modern Login Form + Sliding Sidebar

Canvas Particle Animation with Mouse Interaction

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS