Sidebar still isn't working...

Tried using the Materializecss.com javascript files and the script in the index.html. Still doesn't work.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

   <!-- Compiled and minified CSS -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

   <!-- Compiled and minified JavaScript -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <title>Zeus Suits - Tailored to Custom Fit You</title>
</head>

<!--- Sidebar navigation still isn't working --->

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var elems = document.querySelectorAll('.sidenav');
      var instances = M.Sidenav.init(elems, options);
    });

    $(document).ready(function () {
      $('.sidenav').sidenav();
    });
  </script>

</body>

</html>

Navbar.jsx - using the Materializecss (materializecss.com) dependency for the navigation menu.


/* eslint-disable jsx-a11y/anchor-is-valid */
import React from "react";
import { HashLink as Link } from "react-router-hash-link";
import { Twirl as Hamburger } from "hamburger-react";
import "./Navbar.css";

function Navbar() {
  return (
    <>
      <nav>
        <div className="nav-wrapper blue-grey darken-1">
          <Link to="#" data-target="sidebar" class="sidenav-trigger">
            <Hamburger direction="right" size={20} easing="ease-in" />
          </Link>

          <Link to="#" class="brand-logo white-text text-darken-4">
            <i class="large material-icons">flash_on</i> ZEUS
            <small>&trade;</small>
          </Link>

          <ul class="right hide-on-med-and-down">
            <li>
              <Link to="/"> Home </Link>
            </li>
            <li>
              <Link to="/"> New Arrivals </Link>
            </li>
            <li>
              <Link to="/"> Pants </Link>
            </li>
            <li>
              <Link to="/"> Suits & Blazers </Link>
            </li>
            <li>
              <Link to="/"> Accessories </Link>
            </li>
          </ul>
        </div>
      </nav>

      <ul class="sidenav" id="sidebar">
        <li>
          <a href="#"> Home </a>
        </li>
        <li>
        <a href="#"> New Arrivals </a>
        </li>
        <li>
        <a href="#"> Pants </a>
        </li>
        <li>
        <a href="#"> Suits & Blazers </a>
        </li>
        <li>
        <a href="#"> Accessories </a>
        </li>
      </ul>
    </>
  );
}

export default Navbar;

Sidebar navigation fixed. Added the Hook useState to toggle the menu to open and close.

Navbar.jsx

function Navbar() {
  const [isOpen, setOpen] = useState(false);

I moved the scripts into the body instead of the head tag. DOH! index.html

<script src="https://code.jquery.com/jquery-3.6.1.min.js">

  </script>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var elems = document.querySelectorAll('.sidenav');
      var instances = M.Sidenav.init(elems, options);
    });

    $(document).ready(function () {
      $('.sidenav').sidenav();
    });
  </script>

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

jmathtech / Zeus-Suits-Online-Shop

Sidebar still isn't working... #3