साइडबार इंटरैक्शन

25 kevekıbhack

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

14 March 2025

मूल्य निर्धारण इंटरैक्शन (HTML, CSS और JS)

28 June 2025

ओएमआईसी ईएसटी डैशबोर्ड HTML साइडबार नेविगेशन

16 November 2024

साइडबार टॉगल

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>

अनुशंसित

मूल्य निर्धारण इंटरैक्शन (HTML, CSS और JS)

ओएमआईसी ईएसटी डैशबोर्ड HTML साइडबार नेविगेशन

साइडबार टॉगल

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS