<nav class="chatbar">
    <div class="control">
        <a>
            <svg>
                <use xlink:href="#plus">
            </svg>
        </a>
        <div class="text">
            <input type="text" placeholder="Message">
        </div>
        <ul class="list">
            <li>
                <a href="">
                    <svg>
                        <use xlink:href="#video">
                    </svg>
                </a>
            </li>
            <li>
                <a href="">
                    <svg>
                        <use xlink:href="#photo">
                    </svg>
                </a>
            </li>
            <li>
                <a href="">
                    <svg>
                        <use xlink:href="#image">
                    </svg>
                </a>
            </li>
        </ul>
    </div>
</nav>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="video" fill="none" stroke="currentColor">
        <polygon points="23 7 16 12 23 17 23 7"></polygon>
        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="photo" fill="none" stroke="currentColor">
        <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
        <circle cx="12" cy="13" r="4"></circle>
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="image" fill="none" stroke="currentColor">
        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
        <circle cx="8.5" cy="8.5" r="1.5"></circle>
        <polyline points="21 15 16 10 5 21"></polyline>
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="plus" fill="none" stroke="currentColor">
        <g stroke-linecap="round" stroke-linejoin="round" stroke-width="1" transform="translate(0.5px 0.5px)">
            <line stroke-miterlimit="10" x1="12" y1="7" x2="12" y2="17"></line>
            <line stroke-miterlimit="10" x1="17" y1="12" x2="7" y2="12"></line>
        </g>
    </symbol>
</svg>

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/6167953-Chat-Bar-Interaction" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>

.chatbar {
    --primary: #275EFE;
    --shadow: rgba(39, 94, 254, .2);
    width: 276px;
    position: relative;
    padding: 20px;
    border-radius: 42px;
    background: var(--primary);
    overflow: hidden;
    transform-origin: 42px 50%;
    box-shadow: 0 32px 48px -8px var(--shadow);
    .control {
        --rotate: 0deg;
        position: relative;
        transform-origin: 22px 22px;
        transition: transform .45s ease;
        transform: rotate(var(--rotate));
        & > a {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 1;
            cursor: pointer;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(#fff, .2);
            svg {
                width: 28px;
                height: 28px;
                display: block;
                color: #fff;
            }
        }
        .text,
        .list {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 0 0 0 64px;
            transform-origin: 22px 50%;
        }
        .text {
            top: -6px;
            input {
                line-height: 24px;
                padding: 14px 22px;
                border: 0;
                border-radius: 26px;
                background: rgba(#fff, .2);
                display: block;
                color: #fff;
                font-size: 18px;
                outline: none;
                width: 100%;
                &::placeholder {
                    color: rgba(#fff, .4);
                    opacity: 1;
                }
            }
        }
        .list {
            margin: 0;
            list-style: none;
            display: flex;
            justify-content: space-between;
            transform: rotate(135deg);
            li {
                --y: 0;
                transition: transform 1s ease;
                transform: translateY(var(--y));
                a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 44px;
                    height: 44px;
                    border-radius: 50%;
                    background: rgba(#fff, .2);
                    svg {
                        width: 20px;
                        height: 20px;
                        display: block;
                        color: #fff;
                        stroke-linecap: round;
                        stroke-width: 1.2;
                        stroke-linejoin: round;
                    }
                }
                &:nth-child(2) {
                    --y: 8px;
                }
                &:nth-child(3) {
                    --y: 16px;
                }
            }
        }
    }
    &.active {
        animation: top 1s ease-in-out forwards;
        .control {
            --rotate: -135deg;
            .list {
                li {
                    --y: 0;
                }
            }
        }
        &.default {
            animation: down 1s ease-in-out forwards;
            .control {
                --rotate: 0deg;
            }
        }
    }
}

@keyframes top {
    0%,
    100% {
        transform: rotate(0deg);
    }
    50%,
    60% {
        transform: rotate(-6deg);
    }
    88% {
        transform: rotate(1deg);
    }
}

@keyframes down {
    0%,
    100% {
        transform: rotate(0deg);
    }
    50%,
    60% {
        transform: rotate(6deg);
    }
    88% {
        transform: rotate(-1deg);
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #E4ECFA;
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            height: 28px;
        }
    }
}

$('.chatbar .control > a').on('click touch', function(e) {

    e.preventDefault();

    let parent = $(this).parent().parent();

    if(parent.hasClass('active')) {
        parent.addClass('default');
        setTimeout(() => {
            parent.removeClass('active default');
        }, 1000);
    } else {
        parent.addClass('active');
    }

});