Glassmorphism Sidebar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphism Sidebar</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
            background: linear-gradient(to top right, #ffafbd, #ffc3a0);
            overflow: hidden;
        }
        .sidebar {
            width: 250px;
            height: 100%;
            background: rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            padding: 20px;
            position: relative;
            transition: all 0.5s ease-in-out;
        }
        .sidebar:hover {
            width: 300px;
        }
        .sidebar .logo {
            font-size: 24px;
            font-weight: bold;
            color: #202020;
            text-align: center;
            margin-bottom: 30px;
        }
        .sidebar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .sidebar ul li {
            margin: 20px 0;
            padding: 10px;
            font-size: 18px;
            color: #202020;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: background 0.3s;
        }
        .sidebar ul li:hover {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
        }
        .sidebar ul li .icon {
            margin-right: 10px;
        }
        .sidebar ul li .icon svg {
            width: 24px;
            height: 24px;
            fill: #202020;
        }
        .animation {
            animation: slideIn 0.5s forwards;
        }
        @keyframes slideIn {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <div class="logo">MyLogo</div>
        <ul>
            <li class="animation">
                <div class="icon">
                    <svg viewBox="0 0 24 24">
                        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
                    </svg>
                </div>
                <div class="text">Home</div>
            </li>
            <li class="animation">
                <div class="icon">
                    <svg viewBox="0 0 24 24">
                        <path d="M3 13h2v-2H3v2zm0-4h2V7H3v2zm0 8h2v-2H3v2zm0 4h2v-2H3v2zM9 13h2v-2H9v2zm0-4h2V7H9v2zm0 8h2v-2H9v2zm0 4h2v-2H9v2zM21 3H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H8V6h12v13z"/>
                    </svg>
                </div>
                <div class="text">Dashboard</div>
            </li>
            <li class="animation">
                <div class="icon">
                    <svg viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
                    </svg>
                </div>
                <div class="text">Notifications</div>
            </li>
            <li class="animation">
                <div class="icon">
                    <svg viewBox="0 0 24 24">
                        <path d="M12 2.1c-5.45 0-9.9 4.45-9.9 9.9 0 4.25 2.67 7.84 6.42 9.13.47.09.64-.21.64-.46 0-.23-.01-.82-.01-1.61-2.32.5-2.81-1.12-2.81-1.12-.43-1.1-1.05-1.39-1.05-1.39-.86-.59.07-.58.07-.58.95.07 1.44.98 1.44.98.85 1.45 2.23 1.03 2.77.78.09-.62.33-1.03.6-1.26-1.85-.21-3.8-.93-3.8-4.14 0-.91.33-1.65.87-2.23-.09-.21-.38-1.06.08-2.21 0 0 .7-.22 2.3.85.66-.19 1.36-.28 2.06-.29.7.01 1.41.1 2.07.29 1.6-1.07 2.3-.85 2.3-.85.47 1.15.18 2 .09 2.21.54.58.87 1.32.87 2.23 0 3.22-1.95 3.93-3.81 4.14.34.29.63.86.63 1.74 0 1.26-.01 2.29-.01 2.6 0 .26.17.56.65.46 3.75-1.29 6.41-4.88 6.41-9.13 0-5.45-4.45-9.9-9.9-9.9z"/>
                    </svg>
                </div>
                <div class="text">GitHub</div>
            </li>
            <li class="animation">
                <div class="icon">
                    <svg viewBox="0 0 24 24">
                        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                    </svg>
                </div>
                <div class="text">Profile</div>
            </li>
        </ul>
    </div>
</body>
</html>

Glassmorphism Sidebar - MeggiTools