problem with the sidebar. sidebar is not closing

Question

for some reason the close button on the sidebar is not showing nor working, the show sidebar works perfectly fine however the closing function is not working. im providing the html, css ans javascript related to the close function here's my html:

    <aside class="sidenav">
  <div  class="sidenav__close-icon">
    <i class="bi bi-x-lg"></i>
  </div>
  <img class="sidenav__logo" src="../static/img/ManageX5.png">
  <ul class="sidenav__list">
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('dashboard')}}">Dashboard</a>
    </li>
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('profile')}}">Profile</a>
    </li>
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('users')}}">Users</a>
    </li>
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('projects')}}">Projects</a>
    </li>
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('sites')}}">Sites</a>
    </li>
  </ul>
  <ul class="sidenav__logout">
    <li class="list-logout-item">
      <a class="sidenav__list-item-logout" href="#">logout</a>
    </li>
  </ul>
</aside>

this is the JS part:

const menuIconEl = $('.menu-icon');
const sidenavEl = $('.sidenav');
const sidenavCloseEl = $('.sidenav__close-icon');

/*===== Add and remove provided class names =====*/
function toggleClassName(el, className) {
 if (el.hasClass(className)) {
  el.removeClass(className);
 } else {
  el.addClass(className);
 }
}

/*===== Open the side nav on click =====*/
menuIconEl.on('click', function() {
 toggleClassName(sidenavEl, 'active');
});

/*===== Close the side nav on click =====*/
sidenavCloseEl.on('click', function() {
 toggleClassName(sidenavEl, 'active');
});

and this is the css related to the sidebar:

.sidenav__close-icon {
   position: absolute;
   visibility: visible;
   top: 8px;
   right: 12px;
   cursor: pointer;
   font-size: 20px;
   color: #000;
 }

Answer 1

The reason of why you can't see the close icon isn't showing up is that you don't have the necessary styles that makes the element (.sidenav__close-icon) to be rendered/shown as an icon. If you have it somewhere in your project, I suggest you making some tweaks like the following:

1. You can use jQuery's toggleClass method to toggle a class

function toggleClassName(el, className) {
  el.toggleClass(className);
}

2. The close button/icon has CSS properties (position, top, right) that makes it positioned to top right of the page which results in not visible. You may have to add the following CSS in order to give close icon a relative position. In your case, the relativity can be inherited from its parent, the .sidenav element.

.sidenav {
  position: relative;
  width: 200px;
}

.sidenav__close-icon {
   position: absolute;
   visibility: visible;
   top: 8px;
   right: 12px;
   cursor: pointer;
   font-size: 20px;
   color: #000;
 }

Here's a snippet which toggles active class and demonstrates the change

const menuIconEl = $('.menu-icon');
const sidenavEl = $('.sidenav');
const sidenavCloseEl = $('.sidenav__close-icon');

/*===== Add and remove provided class names =====*/
function toggleClassName(el, className) {
  el.toggleClass(className); 

  // Much shorter, but the following lines can also work
  /*if (el.hasClass(className)) {
    el.removeClass(className);
  } else {
    el.addClass(className);
  }*/
}

/*===== Open the side nav on click =====*/
menuIconEl.on('click', function () {
  toggleClassName(sidenavEl, 'active');
});

/*===== Close the side nav on click =====*/
sidenavCloseEl.on('click', function () {
  toggleClassName(sidenavEl, 'active');
});

.sidenav {
  position: relative;
  width: 200px;
}

.sidenav__close-icon {
   position: absolute;
   visibility: visible;
   top: 8px;
   right: 12px;
   cursor: pointer;
   font-size: 20px;
   color: #000;
 }

 .active {
   outline: 1px solid red;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<aside class="sidenav">
  <div class="sidenav__close-icon">
    <i class="bi bi-x-lg">X</i>
  </div>
  <img class="sidenav__logo" src="../static/img/ManageX5.png">
  <ul class="sidenav__list">
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('dashboard')}}">Dashboard</a>
    </li>
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('profile')}}">Profile</a>
    </li>
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('users')}}">Users</a>
    </li>
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('projects')}}">Projects</a>
    </li>
    <li class="sidenav__list-item">
      <a class="sidenav__list-item-items" href="{{url_for('sites')}}">Sites</a>
    </li>
  </ul>
  <ul class="sidenav__logout">
    <li class="list-logout-item">
      <a class="sidenav__list-item-logout" href="#">logout</a>
    </li>
  </ul>
</aside>