Modern Elegant Sidebar

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Elegant Sidebar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<style>
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f5;
    }
    .sidebar {
        position: fixed;
        top: 0;
        left: -300px;
        width: 300px;
        height: 100%;
        background-color: #2c3e50;
        transition: 0.5s;
        overflow-x: hidden;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }
    .sidebar.active {
        left: 0;
    }
    .sidebar .sidebar-header {
        padding: 30px;
        background: #34495e;
        text-align: center;
    }
    .sidebar .sidebar-header h3 {
        margin: 0;
        color: #ecf0f1;
    }
    .sidebar .sidebar-menu {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .sidebar .sidebar-menu li {
        padding: 20px 30px;
        transition: 0.3s;
        position: relative;
    }
    .sidebar .sidebar-menu li:hover {
        background-color: #2980b9;
    }
    .sidebar .sidebar-menu li a {
        text-decoration: none;
        color: #ecf0f1;
        display: flex;
        align-items: center;
    }
    .sidebar .sidebar-menu li a i {
        margin-right: 15px;
    }
    .sidebar .sidebar-menu li a span {
        flex: 1;
    }
    .sidebar .sidebar-menu li a .emoji {
        font-size: 1.5em;
    }
    .sidebar-toggle {
        position: absolute;
        top: 20px;
        left: 20px;
        font-size: 1.5em;
        cursor: pointer;
        color: #34495e;
    }
    .sidebar-toggle:hover {
        color: #2980b9;
    }
    .sidebar-menu li a .icon {
        position: absolute;
        right: 20px;
        transition: transform 0.3s;
    }
    .sidebar-menu li a:hover .icon {
        transform: rotate(360deg);
    }
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateX(-100%);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    .sidebar.active .sidebar-menu li {
        animation: slideIn 0.5s ease;
    }
</style>
</head>
<body>
<div class="sidebar">
    <div class="sidebar-header">
        <h3>🌟 Modern Elegant Sidebar 🌟</h3>
    </div>
    <ul class="sidebar-menu">
        <li><a href="#"><i class="fas fa-home"></i><span>Home</span><i class="icon emoji">🏠</i></a></li>
        <li><a href="#"><i class="fas fa-user"></i><span>Profile</span><i class="icon emoji">👤</i></a></li>
        <li><a href="#"><i class="fas fa-bell"></i><span>Notifications</span><i class="icon emoji">🔔</i></a></li>
        <li><a href="#"><i class="fas fa-cog"></i><span>Settings</span><i class="icon emoji">⚙️</i></a></li>
        <li><a href="#"><i class="fas fa-question-circle"></i><span>Help</span><i class="icon emoji">❓</i></a></li>
        <li><a href="#"><i class="fas fa-sign-out-alt"></i><span>Logout</span><i class="icon emoji">🚪</i></a></li>
    </ul>
</div>
<div class="sidebar-toggle" id="sidebar-toggle"><i class="fas fa-bars"></i></div>
<script>
    document.getElementById('sidebar-toggle').addEventListener('click', function () {
        document.querySelector('.sidebar').classList.toggle('active');
    });
</script>
</body>
</html>

Modern Elegant Sidebar - MeggiTools