I have this JQuery script in my functions.php

wp_enqueue_script( 'hideout-navigation', get_template_directory_uri() . '/js/main-nav.js', array('jquery'), '1.0.0', true );

It loads with this error

Uncaught ReferenceError: openNav is not defined
at HTMLElement.onclick ((index):288)

here’s my code

$(document).ready(function() {
    var nav = $("#menu > ul > li");
    nav.find("li").hide();
nav.click(function () {
    nav.not(this).find("li").hide();
    $(this).find("li").slideToggle();
});

function openNav() {
    document.getElementById("open").style.display = "none";
    document.getElementById("close").style.display = "flex";
    $("#menu ul").slideToggle();
}

function closeNav() {
    document.getElementById("open").style.display = "flex";
    document.getElementById("close").style.display = "none";
    $("#menu ul").slideToggle();
}

$(function () {
    nav.mouseleave(function () {
$(this).find("li").slideUp();
    });
});

$(window).on("resize load", function () {
    var win = $(this);
if (win.width() <= 973) {
    $("#close").attr("style", "display:none;");
    $("#open").attr("style", "display:flex;");
    $("#menu ul").attr("style", "display:none;");
} else {
    $("#close").attr("style", "display:flex;");
    $("#menu ul").attr("style", "display:flex;");
    }
});

My code works on code pen but if I use it on my site it conflicts with other scripts on WP. I’m lost, I just don’t get why it does not work