body

<div id="mobileOverlay">
    <div className="mobileOverlay_mainContainer">
        <div className="mobileOverlay_container" data-action="mailto:" id="mobileOverlay_email"><i
                className="fa-light fa-envelope fa-5x"></i></div>
        <div className="mobileOverlay_container" data-action="tel:" id="mobileOverlay_phone"><i
                className="fa-light fa-phone fa-5x"></i></div>
        <div className="mobileOverlay_container gmap" data-action="/" id="mobileOverlay_plan"><i
                className="fa-light fa-map-location-dot fa-5x"></i></div>
        <div className="mobileOverlay_container" data-action="/" id="mobileOverlay_infopage"><i
                className="fa-light fa-circle-info fa-5x"></i></div>
        <div className="mobileOverlay_container facebook" data-action="https://www.facebook.com/"
             id="mobileOverlay_facebook"><i className="fa-brands fa-facebook fa-5x"></i></div>
        <div className="mobileOverlay_container twitter" data-action="https://twitter.com/" id="mobileOverlay_twitter">
            <i className="fa-brands fa-twitter-square fa-5x"></i></div>
        <div className="mobileOverlay_container instagram" data-action="https://www.instagram.com/"
             id="mobileOverlay_instagram"><i className="fa-brands fa-instagram fa-5x"></i></div>
        <div className="mobileOverlay_container linkedin" data-action="https://www.linkedin.com/in/"
             id="mobileOverlay_linkedin"><i className="fa-brands fa-linkedin fa-5x"></i></div>
        <div className="mobileOverlay_icon" id="mobileOverlay_close"><i className="fa-light fa-times fa-2x"></i></div>
    </div>
</div>
<div className="mobileOverlay_icon" id="mobileOverlay_open"><i className="fa-light fa-bars fa-2"></i></div>
<script type="text/javascript">
    /*
  Adds a mobile quick action overlay. Visitors of your site on phones usually want to contact you directly.
  Let them do this! The menu icon only shows when not scrolling. Fill in the data var with your info. Leaving one empty causes
  the button not to appear on screen. Opening the overlay will present the user with a simple button menu with your defined quick actions!
  @copyright MIT - Laurent Chervet
   */
    const mobileOverlayDebug = false
    window.mobileOverlay = function () {
        if (typeof (window.isMobileDevice) === typeof (Function)) {
            if (!window.isMobileDevice() && !mobileOverlayDebug) {
                return
            }
        } else {
            if (!mobileOverlayDebug) {
                return
            }
        }
        const data = {
            'email': 'bel-air@bel-air.swiss', // email address
            'phone': '0041266731414', // full phone number
            'plan': '/contact', // relative url
            'infopage': '/page/a-propos', // relative url
            'facebook': 'belairpraz', //facebook page name
            'twitter': 'belairlac', // twitter account name
            'instagram': 'belairpraz', // instagram account name
            'linkedin': '' // linkedin account name
        }

        const overlay = document.querySelector('#mobileOverlay')
        overlay.style.display = 'none'

        Object.keys(data).forEach(key => {
            if (data[key]) {
                let el = document.getElementById(`mobileOverlay_${key}`)
                el.style.display = 'flex'
            }
        })
        document.querySelector('#mobileOverlay_open').style.display = 'flex'

        document.querySelectorAll('[id^="mobileOverlay_"]').forEach(el => {
            if (el.style.display !== 'none') {
                el.addEventListener('click', function () {
                    if (!el.classList.contains('mobileOverlay_icon')) {
                        if (el.dataset.action === '/') {
                            let pathname = window.location.pathname
                            if (pathname.includes('/page/')) {
                                let explode = pathname.split('/')
                                explode.pop()
                                window.location = `${explode.join('/')}/${data[el.id.split('_')[1]]}`
                            } else {
                                window.location = `${window.location.href}${data[el.id.split('_')[1]]}`
                            }
                        } else {
                            window.location = el.dataset.action + data[el.id.split('_')[1]]
                        }
                    }
                })
            }
        })

        document.querySelector('#mobileOverlay_open').addEventListener('click', function () {
            this.style.display = 'none'
            document.querySelector('#mobileOverlay').style.display = 'flex'
            document.querySelector('#mobileOverlay_close').style.display = 'flex'
        })

        document.querySelector('#mobileOverlay_close').addEventListener('click', function () {
            document.querySelector('#mobileOverlay_open').style.display = 'flex'
            document.querySelector('#mobileOverlay').style.display = 'none'
        })

        let scrolling
        document.addEventListener('scroll', function (e) {
            window.clearTimeout(scrolling)
            if (document.querySelector('#mobileOverlay').style.display === 'none' || !document.querySelector('#mobileOverlay').style.display) {
                scrolling = setTimeout(function () {
                    document.querySelector('#mobileOverlay_open').classList.remove('mobileOverlay_scrolling')
                }, 1000)
                document.querySelector('#mobileOverlay_open').classList.add('mobileOverlay_scrolling')
            } else {
                e.preventDefault()
                window.scrollTo(0, 0)
            }
        })
    }

    if (mobileOverlayDebug) {
        window.mobileOverlay()
    }
</script>

<style>
    body {
        background-color: #272727;
        margin: 0 auto;
        padding: 0;
        color: white;
    }

    #mobileOverlay {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        z-index: 9999;
        background-color: rgba(0, 0, 0, 0.75);
        display: none;
        align-content: center;
    }

    #mobileOverlay_open {
        display: none;
    }

    .mobileOverlay_icon {
        position: fixed;
        bottom: 0.5em;
        right: 0.5em;
        cursor: pointer;
        font-size: 3em;
        color: black;
        display: none;
        width: 2.1em;
        height: 2.1em;
        min-height: 2.1em;
        max-height: 2.1em;
        justify-content: center;
        align-content: center;
        align-items: center;
        justify-items: center;
        background-color: white;
        border-radius: 5em;
        transition: right .5s;
        z-index: 9998;
        -webkit-box-shadow: 0 0 40px 4px rgba(97, 97, 97, 0.54);
        box-shadow: 0 0 40px 4px rgba(97, 97, 97, 0.54);
    }

    .mobileOverlay_icon:hover {
        color: grey;
    }

    .mobileOverlay_scrolling {
        right: -300px;
        transition: right .5s;
    }

    .mobileOverlay_mainContainer {
        width: 30em;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
    }

    .mobileOverlay_container {
        min-width: 10em;
        height: 10em;
        margin: 10px;
        background-color: white;
        display: none;
        flex-wrap: wrap;
        cursor: pointer;
        align-content: center;
        justify-content: center;
        color: black;
    }

    .facebook {
        color: white;
        background-color: #4267B2;
    }

    .twitter {
        background-color: #1DA1F2;
        color: white;
    }

    .instagram {
        color: white;
        background-color: #da3076;
    }

    .linkedin {
        color: white;
        background-color: #2867B2;
    }

    .gmap {
        color: #DB4437;
    }
</style>