<header>
        <img class="activator" id="activator" src="//s.svgbox.net/hero-outline.svg?fill=fff#menu-alt-1" alt="">
        <nav>
            <ul>
                <li><a href="#"><img src="//s.svgbox.net/hero-outline.svg?fill=805ad5#bell"></a></li>
                <li><a href="#"><img src="//s.svgbox.net/hero-outline.svg?fill=805ad5#beaker"></a></li>
                <li><a href="#"><img src="//s.svgbox.net/hero-outline.svg?fill=805ad5#chat"></a></li>
                <li><a href="#"><img src="//s.svgbox.net/hero-outline.svg?fill=805ad5#cloud-download"></a></li>
                <li><a href="#"><img src="//s.svgbox.net/hero-outline.svg?fill=805ad5#cog"></a></li>
            </ul>
        </nav>
    </header>

body {
    margin: 0;
    height: 100vh;
    background: rgb(36,40,49);
    color: white;
    display: grid;
    place-content: center;
}

header {
    display: flex;

    .activator {
        padding: 1em;
        border-radius: 100%;
        cursor: pointer;
        
        &:hover {
            background: rgb(30,33,41);
        }
    }
}

img {
    width: 100%;
    max-width: 45px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav {
    background: rgb(41,46,56);
    border-radius: 0 5em 5em 0;
    padding: .5em;
    clip-path: ellipse(50% 50% at -50% 50%);

    ul {
        display: flex;

        li a {
            display: block;
            padding: .5em;
            margin: 0 .5em;
            border-radius: 50%;

            &:hover {
                background: rgb(50,56,68);
            }

            img {
                opacity: 0;
                transform: translateX(-10px);
            }
        }
    }
}

        var card = document.getElementById('activator');
        var tl = gsap.timeline({defaults: {ease: "power2.inOut"}})

        var toggle = false;

        tl.to('.activator', {
            background: '#805ad5',
            'borderRadius': '5em 0 0 5em'
        });
        tl.to('nav', {
            'clipPath': 'ellipse(100% 100% at 50% 50%)'
        }, "-=.5")
        tl.to('nav img', {
            opacity: 1,
            transform: 'translateX(0)',
            stagger: .05
        }, "-=.5")
        tl.pause();

        card.addEventListener('click', () => {
            toggle = !toggle;
            if (toggle ? tl.play() : tl.reverse());
        })