Bootstrap Drop Down Menu is not working in NextJS Project

Question

I have created a NEXT.JS application on VS Code. I have created a drop down menu in the navigation bar but when clicking on the drop down menu, it doesn't slide down and menu doesn't show.

This is the code I am trying to work with,

const loggedRouter = () => {
    return(
      <li className="nav-item dropdown">
          <a className="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <img src={auth.user.avatar} alt={auth.user.avatar} 
              style={{
                  borderRadius: '50%', width: '30px', height: '30px',
                  transform: 'translateY(-3px)', marginRight: '3px'
              }} /> {auth.user.name}
          </a>

          <div className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <Link href="/profile">
                  <a className="dropdown-item">Profile</a>
              </Link>
              {
                  auth.user.role === 'admin' && adminRouter()
              }
              <div className="dropdown-divider"></div>
              <button className="dropdown-item" onClick={handleLogout}>Logout</button>
          </div>
      </li>
  )
  }

This loggedRouter function is being used in the following navbar,

  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <Link href="/"><a className="navbar-brand">Renae</a></Link>
      <button
        className="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span className="navbar-toggler-icon"></span>
      </button>
      <div className="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
        <ul className="navbar-nav">
          <li className="nav-item">
            <Link href="/cart">
                <a className={"nav-link" + IsActive('/cart')}><i className="fas fa fa-shopping-cart" aria-hidden="true"></i> Cart</a>
            </Link>
           
          </li>

          {
            Object.keys(auth).length === 0 ?
            <li className="nav-item">
            <Link href="/signin">
                <a className={"nav-link" + IsActive('/signin')}><i className="fas fa-user" aria-hidden="true"></i> Sign in</a>
            </Link>
           
            </li>

          : loggedRouter()
          }
          
        </ul>
      </div>
    </nav>
  );

I am getting these two warnings in the loggedRouter function,

The attribute aria-haspopup is not supported by the role link. This role is implicit on the element a.eslintjsx-a11y/role-supports-aria-props

^This one is related to using aria-haspopup attribute in the dropdown menu. I don't think its of any concern however.

Second warning is this,

Do not use <img>. Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element.eslint(@next/next/no-img-element)

This is also related to imagae tag and I don't think it is relevant to the actual problem

This is what my Document file contains,

import Document, {Html, Head, Main, NextScript} from 'next/document'
class MyDocument extends Document {
    render() {
        return (
            <Html lang="en">
                <Head>
                    <meta name = "description" content = "Renae.pk" />
                    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
                    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
                    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

export default MyDocument

In this file, I have added the Bootstrap CSS and JavaScript links. For the Javascript links, I am getting these warnings/errors,

External synchronous scripts are forbidden. See: https://nextjs.org/docs/messages/no-sync-scripts.eslint(@next/next/no-sync-scripts)

For some reason, I believe this is the actual reason why my drop down menu is not working. Can anyone help me to figure out what should I change to fix this issue?

Answer 1

Bootstrap uses a 'show' class to control the visibility of the dropdown. Use 'useState' to control the visibility of the dropdown

Bootstrap Drop Down Menu is not working in NextJS Project

Question

1 answers

solution1
0 2021-10-15 17:47:15

Bootstrap Drop Down Menu is not working in NextJS Project

Question

1 answers

solution1 0 2021-10-15 17:47:15

solution1
0 2021-10-15 17:47:15