WP admin Side Settings :

/**
 * Mobile Bottom Menu – Admin Configurable
 *
 * Author: imakash
 * Author URL: <https://imakash.com>
 */

add_action('admin_menu', 'imakash_mobile_menu_settings');
add_action('admin_init', 'imakash_mobile_menu_register_settings');
add_action('wp_footer', 'imakash_mobile_bottom_menu');

/* -------------------------
   ADMIN SETTINGS PAGE
-------------------------- */

function imakash_mobile_menu_settings() {
    add_menu_page(
        'Mobile Bottom Menu',
        'Mobile Bottom Menu',
        'manage_options',
        'imakash-mobile-menu',
        'imakash_mobile_menu_settings_page',
        'dashicons-menu',
        81
    );
}

function imakash_mobile_menu_register_settings() {

    register_setting('imakash_mobile_menu_group', 'imakash_menu_home_url');
    register_setting('imakash_mobile_menu_group', 'imakash_menu_shop_url');
    register_setting('imakash_mobile_menu_group', 'imakash_menu_track_url');
    register_setting('imakash_mobile_menu_group', 'imakash_menu_account_url');
    register_setting('imakash_mobile_menu_group', 'imakash_menu_whatsapp_url');

    register_setting('imakash_mobile_menu_group', 'imakash_menu_color');
    register_setting('imakash_mobile_menu_group', 'imakash_menu_active_color');
}

function imakash_mobile_menu_settings_page() {
    ?>
    <div class="wrap">
        <h1>Mobile Bottom Menu Settings</h1>

        <form method="post" action="options.php">
            <?php settings_fields('imakash_mobile_menu_group'); ?>

            <table class="form-table">
                <tr><th>Home URL</th><td><input type="text" name="imakash_menu_home_url" value="<?php echo esc_attr(get_option('imakash_menu_home_url')); ?>" class="regular-text"></td></tr>
                <tr><th>Shop URL</th><td><input type="text" name="imakash_menu_shop_url" value="<?php echo esc_attr(get_option('imakash_menu_shop_url')); ?>" class="regular-text"></td></tr>
                <tr><th>Track URL</th><td><input type="text" name="imakash_menu_track_url" value="<?php echo esc_attr(get_option('imakash_menu_track_url')); ?>" class="regular-text"></td></tr>
                <tr><th>Account URL</th><td><input type="text" name="imakash_menu_account_url" value="<?php echo esc_attr(get_option('imakash_menu_account_url')); ?>" class="regular-text"></td></tr>
                <tr><th>WhatsApp URL</th><td><input type="text" name="imakash_menu_whatsapp_url" value="<?php echo esc_attr(get_option('imakash_menu_whatsapp_url')); ?>" class="regular-text"></td></tr>
                <tr><th>Menu Color</th><td><input type="color" name="imakash_menu_color" value="<?php echo esc_attr(get_option('imakash_menu_color', '#7568A6')); ?>"></td></tr>
                <tr><th>Active Color</th><td><input type="color" name="imakash_menu_active_color" value="<?php echo esc_attr(get_option('imakash_menu_active_color', '#7568A6')); ?>"></td></tr>
            </table>

            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}

/* -------------------------
   FRONTEND OUTPUT
-------------------------- */

function imakash_mobile_bottom_menu() {

    $home     = get_option('imakash_menu_home_url');
    $shop     = get_option('imakash_menu_shop_url');
    $track    = get_option('imakash_menu_track_url');
    $account  = get_option('imakash_menu_account_url');
    $whatsapp = get_option('imakash_menu_whatsapp_url');

    $color        = get_option('imakash_menu_color', '#7568A6');
    $active_color = get_option('imakash_menu_active_color', '#7568A6');
    ?>

    <link rel="stylesheet" href="<https://s.w.org/wp-includes/css/dashicons.css>">
    <link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css>">

    <style>
        @media (min-width: 769px) {
            #imakash-menu { display: none; }
        }

        @media (max-width: 768px) {

            body { padding-bottom: 65px; }

            #imakash-menu {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                height: 60px;
                display: flex;
                background: #fff;
                border-top: 1px solid #eaeaea;
                z-index: 9999;
            }

            #imakash-menu a {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                text-decoration: none;
                color: <?php echo esc_html($color); ?>;
                font-size: 11px;
                line-height: 1;
                padding-top: 4px;
            }

            #imakash-menu a span {
                font-size: 20px;
                line-height: 1;
                margin-bottom: 4px;
            }

            #imakash-menu a.active {
                border-top: 3px solid <?php echo esc_html($active_color); ?>;
                font-weight: 600;
            }
        }
    </style>

    <div id="imakash-menu">

        <a href="<?php echo esc_url($home); ?>" class="<?php echo is_front_page() ? 'active' : ''; ?>">
            <span class="dashicons dashicons-admin-home"></span>
            Home
        </a>

        <a href="<?php echo esc_url($shop); ?>" class="<?php echo function_exists('is_shop') && is_shop() ? 'active' : ''; ?>">
            <span class="dashicons dashicons-cart"></span>
            Shop
        </a>

        <a href="<?php echo esc_url($track); ?>">
            <span class="dashicons dashicons-location"></span>
            Track
        </a>

        <a href="<?php echo esc_url($account); ?>" class="<?php echo is_account_page() ? 'active' : ''; ?>">
            <span class="dashicons dashicons-admin-users"></span>
            Account
        </a>

        <a href="<?php echo esc_url($whatsapp); ?>" target="_blank">
            <span class="fab fa-whatsapp"></span>
            WhatsApp
        </a>

    </div>

    <?php
}