Simple Sliding Side Menu

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

<aside class="sidebar">
        <div class="sidebar-header">
            <button class="close-btn">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <ul class="links">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Projects</a>
            </li>
            <li>
                <a href="#">Services</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
        
        <ul class="social-icons">
            <li>
                <a href="#">Social Media</a>
            </li>
        </ul>
    </aside>

<main>
        <h2>Simple Sliding Side Menu</h2>
        <p>A responsive sliding Side Menu with CSS and Javascript. Menu Navigation that open out from the left side of the screen and covers part of your main content when you click the Menu button.</p>
    </main>

</body>
</html>

/* CSS Source Code */
:root {
    --transition: all 0.2s linear;
}

.hamburger {
    cursor: pointer;
    margin: 10px 20px;
    display: block;
}

.line1,
.line2,
.line3 {
    width: 35px;
    height: 5px;
    background-color: #7492bf;
    margin: 6px 0;
    transition: 0.4s;
}

.cross .line1 {
    transform: rotate(-45deg) translate(-9px, 6px);
}

.cross .line2 {
    opacity: 0;
    background-color: #7492bf;
}

.cross .line3 {
    transform: rotate(45deg) translate(-8px, -8px);
    background-color: #7492bf;
}

.sidebar-toggle {
    position: fixed;
    top: 2rem;
    right: 2rem;
    font-size: 2rem;
    background: transparent;
    border-color: transparent;
    color: var(--clr-primary-5);
    transition: var(--transition);
    cursor: pointer;
    animation: bounce 2s ease-in-out;
    z-index: 2;
}

.sidebar-toggle:hover {
    color: var(--clr-primary-7);
}

@keyframes bounce {
    0% {
        transform: scale(1);
    }

50% {
        transform: scale(1.5);
    }

100% {
        transform: scale(1);
    }
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
}

.close-btn {
    font-size: 1.75rem;
    background: transparent;
    border-color: transparent;
    color: var(--clr-primary-5);
    transition: var(--transition);
    cursor: pointer;
    color: var(--clr-red-dark);
}

.close-btn:hover {
    color: var(--clr-red-light);
    transform: rotate(360deg);
}

.logo {
    justify-self: center;
    height: 40px;
}

.links a {
    display: block;
    font-size: 1.5rem;
    text-transform: capitalize;
    padding: 1rem 1.5rem;
    color: var(--clr-grey-5);
    transition: var(--transition);
    color: #fff;
}

.links a:hover {
    background: var(--clr-primary-8);
    color: var(--clr-primary-5);
    padding-left: 1.75rem;
}

.social-icons {
    justify-self: center;
    display: flex;
    padding-bottom: 2rem;
}

.social-icons a {
    font-size: 1.5rem;
    margin: 0 0.5rem;
    color: var(--clr-primary-5);
    transition: var(--transition);
    color: #fff;
}

.social-icons a:hover {
    color: var(--clr-primary-1);
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: #3fafaa;
    background: linear-gradient(135deg, #61c4ff, #f321d7);
    display: grid;
    grid-template-rows: auto 1fr auto;
    row-gap: 1rem;
    box-shadow: var(--clr-red-dark);
    transition: var(--transition);
    transform: translate(-100%);
    z-index: 1;
}

.sidebar ul {
    color: #807d7d;
    padding: 0;
    list-style: none;
    list-style-type: none;
}

.sidebar a {
    text-decoration: none;
}

.sidebar ul li {
    border-bottom: 1px solid #92bec3;
}

.sidebar ul li a:hover {
    background: #44678b;
    color: #fff;
}

.show-sidebar {
    transform: translate(0);
}

@media screen and (max-width: 800px) {
    .sidebar {
        width: 70%;
    }

.sidebar-toggle {
        top: 1rem;
        right: 1rem;
    }
}

@media screen and (max-width: 400px) {
    .sidebar {
        max-width: 320px;
    }

.sidebar-toggle {
        top: 0.5rem;
        right: 0.5rem;
    }
}