JSFiddle - React, Tailwind, and code Playground

by Artem Borovikov

JavaScript

$(document).ready(function() {
    // phone mask
    $("input[type='tel']").mask("+7 (999) 999-99-99");

    var contentSections = $('.fix-section'),
        navigationItems = $('.fixed-nav a');
    updateNavigation();
    $(window).on('scroll', function() {
        updateNavigation();
    });
    navigationItems.on('click', function(event) {
        event.preventDefault();
        smoothScroll($(this.hash));
    });

    function updateNavigation() {
        contentSections.each(function() {
            $this = $(this);
            var activeSection = $('.fixed-nav a[href="#' + $this.attr('id') + '"]').data('number') - 1;
            if (($this.offset().top - $(window).height() / 2 < $(window).scrollTop()) && ($this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop())) {
                navigationItems.eq(activeSection).addClass('is-selected');
            } else {
                navigationItems.eq(activeSection).removeClass('is-selected');
            }
        });
    }

    function smoothScroll(target) {
        $('body,html').animate({
            'scrollTop': target.offset().top
        }, 600);
    }


    // header
    var headerMenuItem = $('.header-nav .nav-link');
    var footerMenuItem = $('.footer-nav .nav-link');

    headerMenuItem.each(function() {
        $(this).width($(this).width() + 5);
    });
    footerMenuItem.each(function() {
        $(this).width($(this).width() + 5);
    });

    $('.offcanvas-toggler, .offcanvas .close').on('click', function(e) {
        e.preventDefault();

        $('body').toggleClass('open');
        $('.offcanvas').toggleClass('active');
    })

    // change order modal title
    $('#modalOrder').on('show.bs.modal', function(event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var recipient = button.data('title') // Extract info from data-* attributes
        // If necessary, you could initiate an AJAX request here (and then do the updating...