INTERACTION AVEC LA BARRE LATÉRALE

302 kevekıbhack

Ouvrir dans l'éditeur Publiez votre code

Recommandé

24 February 2026

Code HTML de la liste des icônes des réseaux sociaux

29 July 2024

Calculatrice iPhone

30 January 2026

Chargeur de jeu Flash avec Ruffle Player

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidebar Interaction - Düzenlenmiş</title>

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,#0f172a,#1e293b);
    transition:background 0.3s ease;
}

.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>

CSS