Html Sidenav wont expand

Dash Python
1

Hello Guys,

I am not sure why the sidenav wont work. Inspecting the HTML after its been displayed shows no error and the tags properly created, but it does not pop out the sidenav.

import dash_html_components as html
import dash

external_stylesheets = [“https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”]
external_scripts = [‘https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js’]

app = dash.Dash(name,
external_scripts=external_scripts,
external_stylesheets=external_stylesheets)

app.layout = html.Div([

html.Nav([
    
    html.Div([
        
        html.Div([
            
            html.A("My Navigation Bar", href="#", className = "brand-logo"),
            html.A(href="#", **{'data-target': 'slide_out'},
                   children = [html.I("menu", className = "material-icons")], className = 'sidenav-trigger'),
            
            html.Ul([
                        html.Li(children = [html.A("Home")], className = "active" ),
                        html.Li(children = [html.A("About Us")] ),
                        html.Li(children = [html.A("Contact Us")]),
                        html.Li(children = [html.A("Services")]),
            ], className = "hide-on-med-and-down right")
            
        ], className = "container")
        
    ], className = "nav-wrapper")
]),

html.Ul([
    html.Li(children = [html.A("Home")], className = "active" ),
    html.Li(children = [html.A("About Us")] ),
    html.Li(children = [html.A("Contact Us")]),
    html.Li(children = [html.A("Services")]),
            ], className = "sidenav", id = "slide_out")

])

if name==“main”:
app.run_server()

The javascript file (custom-script.js) is inserted in the assets folder. when I use the alert or console function, it works, but my javascript function to open the sidenav does not work. here is the JS.

const slide_menu = document.querySelectorAll(".sidenav");
M.Sidenav.init(slide_menu, {});

any input will be appreciated.