javascriptcsssidebar

SIdenav bar dropdown


I'm developing a webpage, I created a side bar with dropdown menu. But the problem is dropdown open only with click the chevron (down-arrow), I want it to open when we click the full button area.

Sidebar Codepen

let navli = document.querySelectorAll("div.icon-link");
for (var i = 0; i < navli.length; i++) {
  navli[i].addEventListener("click", (e) => {
    let navliParent = e.target.parentElement.parentElement; //selecting main parent of arrow
    navliParent.classList.toggle("showMenu");
  });
}

I'm expecting some help me on the sidebar / js update to make the dropdown works properly


Solution

  • Problem is you are adding class to wrong parent. Use closest method to find the exact li parent MDN DOCS HERE

     // Sidebar Expand and Tool Tip Features for Whole Div
    
    let navli = document.querySelectorAll("div.icon-link");
    for (var i = 0; i < navli.length; i++) {
      navli[i].addEventListener("click", (e) => {
      /* Use closest insead of parent */
        e.target.closest('li').classList.toggle("showMenu");
        // let navliParent = e.target.parentElement.parentElement; //selecting main parent of arrow
        // navliParent.classList.toggle("showMenu");
      });
    }
    
    
    let sidebar = document.querySelector(".sidebar");
    let sidebarBtn = document.querySelector(".hamburger");
    
    sidebarBtn.addEventListener("click", () => {
      sidebar.classList.toggle("close");
    });
    
    
    // Hamburger Animation
    
    var $hamburger = $(".hamburger");
    $hamburger.on("click", function(e) {
      $hamburger.toggleClass("is-active");
      // Do something else, like open/close menu
    });
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
    
    body {font-family: 'Poppins', sans-serif;}
    
    /* Sidebar */
    
    .sidebar {
    
      height: 100%;
      width: 20rem;
      background-color: #0039C6;
      z-index: 100;
      transition: all 0.5s ease;
    }
    
    .sidebar.close {
      width: 78px;
    }
    
    .sidebar .sidebar-menu {
      height: 60px;
      width: 100%;
      display: flex;
      align-items: center;
      margin-inline-start: 3px;
      /* margin-top: 20px; */
    }
    
    .sidebar .nav-links {
      height: 100%;
      padding-inline: 0;
      padding-block-start: 20px;
      padding-block-end: 150px;
      overflow: auto;
    }
    
    .sidebar.close .nav-links {
      overflow: visible;
    }
    
    .sidebar .nav-links::-webkit-scrollbar {
      display: none;
    }
    
    .sidebar .nav-links li i.arrow {
      height: 50px;
      min-width: 60px;
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .sidebar .nav-links li {
      position: relative;
      list-style: none;
      transition: all 0.4s ease;
    }
    
    .sidebar .nav-links li:hover {
      background-color: var(--ps-sidebarnav-hover);
    }
    
    .sidebar .nav-links li .icon-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .sidebar.close .nav-links li .icon-link {
      display: block
    }
    
    .sidebar .nav-links li i {
      height: 50px;
      min-width: 78px;
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .sidebar .nav-links li.showMenu i.arrow {
      transform: rotate(-180deg);
    }
    
    .sidebar.close .nav-links i.arrow {
      display: none;
    }
    
    .sidebar .nav-links li a {
      display: flex;
      align-items: center;
      text-decoration: none;
    }
    
    .sidebar .nav-links li a .link_name {
      font-size: 0.9rem;
      font-weight: 400;
      color: #fff;
      transition: all 0.4s ease;
      white-space: nowrap;
    }
    
    .sidebar.close .nav-links li a .link_name {
      opacity: 0;
      pointer-events: none;
    }
    
    .sidebar .nav-links li .sub-menu {
      padding-block-start: 6px;
      padding-block-end: 14px;
      padding-inline-start: 80px;
      padding-inline-end: 6px;
      margin-top: -10px;
      background-color: var(--ps-sidebarnav-hover);
      display: none;
    }
    
    .sidebar .nav-links li.showMenu .sub-menu {
      display: block;
    }
    
    .sidebar .nav-links li .sub-menu a {
      color: #fff;
      font-size: 1em;
      padding: 7px 0;
      white-space: nowrap;
      opacity: 0.6;
      transition: all 0.3s ease;
    }
    
    .sidebar .nav-links li .sub-menu a:hover {
      opacity: 1;
    }
    
    .sidebar.close .nav-links li .sub-menu {
      position: absolute;
      inset-inline-start: 100%;
      top: -10px;
      margin-top: 0;
      padding: 10px 20px;
      border-radius: 0 6px 6px 0;
      opacity: 0;
      display: block;
      pointer-events: none;
      transition: 0s;
    }
    
    .sidebar.close .nav-links li:hover .sub-menu {
      top: 0;
      opacity: 1;
      pointer-events: auto;
      transition: all 0.4s ease;
    }
    
    .sidebar .nav-links li .sub-menu .link_name {
      display: none;
    }
    
    .sidebar.close .nav-links li .sub-menu .link_name {
      font-size: 18px;
      opacity: 1;
      display: block;
    }
    
    .sidebar .nav-links li .sub-menu.blank {
      opacity: 1;
      pointer-events: auto;
      padding-block-start: 3px;
      padding-block-end: 6px;
      padding-inline-start: 16px;
      padding-inline-end: 20px;
      opacity: 0;
      pointer-events: none;
    }
    
    .sidebar .nav-links li:hover .sub-menu.blank {
      top: 50%;
      transform: translateY(-50%);
    }
    
    .home-section {
      position: relative;
      inset-inline-start: 20rem;
      width: calc(100% - 20rem);
      transition: all 0.5s ease;
    }
    
    .home-content {
      padding-block-start: 4rem;
    
    }
    
    header {
      position: fixed;
      inset-inline-start: 20rem;
      width: calc(100% - 20rem);
      transition: all 0.5s ease;
      z-index: 99;
    }
    
    .sidebar.close~.home-section header {
      inset-inline-start: 78px;
      width: calc(100% - 78px);
    }
    
    .sidebar.close~.home-section {
      inset-inline-start: 78px;
      width: calc(100% - 78px);
    }
    
    /* Hamburger Toggle Button */
    .hamburger {
      min-width: 48px;
      text-align: center;
      display: inline-block;
      cursor: pointer;
      transition-property: opacity, filter;
      transition-duration: 0.15s;
      transition-timing-function: linear;
      font: inherit;
      color: inherit;
      text-transform: none;
      background-color: transparent;
      border: 0;
      margin: 0;
      overflow: visible;
    }
    
    .hamburger:hover {
      opacity: 0.7;
    }
    
    .hamburger.is-active:hover {
      opacity: 0.7;
    }
    
    .hamburger.is-active .hamburger-inner,
    .hamburger.is-active .hamburger-inner::before,
    .hamburger.is-active .hamburger-inner::after {
      background-color: #fff;
    }
    
    .hamburger-box {
      height: 24px;
      display: inline-block;
      position: relative;
    }
    
    .hamburger-inner {
      display: block;
      top: 50%;
      margin-top: -2px;
    }
    
    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after {
      width: 25px;
      height: 4px;
      background-color: #fff;
      border-radius: 4px;
      position: absolute;
      transition-property: transform;
      transition-duration: 0.15s;
      transition-timing-function: ease;
    }
    
    .hamburger-inner::before,
    .hamburger-inner::after {
      content: "";
      display: block;
    }
    
    .hamburger-inner::before {
      top: -10px;
    }
    
    .hamburger-inner::after {
      bottom: -10px;
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
     <div class="sidebar open open">
        <div class="sidebar-menu">
          <!-- Hamburger Menu -->
          <button class="hamburger hamburger--spin" type="button" aria-label="Menu" aria-controls="navigation">
            <span class="hamburger-box">
              <span class="hamburger-inner"></span>
            </span>
          </button>
        </div>
    
        <!-- Side navBar -->
        <ul class="nav-links">
          <li>
            <a href="#">
              <i class="fa-regular fa-grid-horizontal"></i>
              <span class="link_name">Dashboard</span>
            </a>
            <ul class="sub-menu blank">
              <li><a class="link_name" href="#">Dashboard</a></li>
            </ul>
          </li>
          <li>
            <div class="icon-link">
              <a href="#">
                <i class="fa-regular fa-file-contract"></i>
                <span class="link_name">Parnership Applications</span>
              </a>
              <i class="fa fa-chevron-down arrow"></i>
            </div>
            <ul class="sub-menu">
              <li><a class="link_name" href="#">Applications</a></li>
              <li><a href="#">Entities</a></li>
              <li><a href="#">Incomplete</a></li>
              <li><a href="#">All requests</a></li>
            </ul>
          </li>
          <li>
            <div class="icon-link">
              <a href="#">
                <i class="fa-regular fa-files"></i>
                <span class="link_name">My File</span>
              </a>
              <i class="fa fa-chevron-down arrow"></i>
            </div>
            <ul class="sub-menu">
              <li><a class="link_name" href="#">My File</a></li>
              <li><a href="#">My tasks</a></li>
              <li><a href="#">My applications</a></li>
              <li><a href="#">User profile</a></li>
            </ul>
          </li>
          <li>
            <div class="icon-link">
              <a href="#">
                <i class="fa-regular fa-screen-users"></i>
                <span class="link_name">Profile</span>
              </a>
              <i class="fa fa-chevron-down arrow"></i>
            </div>
            <ul class="sub-menu">
              <li><a class="link_name" href="#">Partnership Profile</a></li>
              <li><a href="#">Profiles</a></li>
              <li><a href="#">Notes</a></li>
              <li><a href="#">Procedure</a></li>
            </ul>
          </li>
          <li>
            <a href="#">
              <i class="fa-regular fa-calendar-range"></i>
              <span class="link_name">Agenda</span>
            </a>
            <ul class="sub-menu">
              <li><a class="link_name" href="#">Agenda</a></li>
            </ul>
          </li>
          <li>
            <div class="icon-link">
              <a href="#">
                <i class="fa-regular fa-ballot-check"></i>
                <span class="link_name">Surveys Management</span>
              </a>
              <i class="fa fa-chevron-down arrow"></i>
            </div>
            <ul class="sub-menu">
              <li><a class="link_name" href="#">Management</a></li>
              <li><a href="#">Survey</a></li>
              <li><a href="#">Results</a></li>
            </ul>
          </li>
          <li>
            <a href="#">
              <i class="fa-regular fa-file-chart-pie"></i>
              <span class="link_name">Reports</span>
            </a>
            <ul class="sub-menu blank">
              <li><a class="link_name" href="#">Reports</a></li>
            </ul>
          </li>
          <li>
            <a href="#">
              <i class="fa-regular fa-box-archive"></i>
              <span class="link_name">Archive</span>
            </a>
            <ul class="sub-menu blank">
              <li><a class="link_name" href="#">Archive</a></li>
            </ul>
          </li>
          <li>
            <div class="icon-link">
              <a href="#">
                <i class="fa-regular fa-comment-dots"></i>
                <span class="link_name">Suggestions/Complaints</span>
              </a>
              <i class="fa fa-chevron-down arrow"></i>
            </div>
            <ul class="sub-menu">
              <li><a class="link_name" href="#">Suggestions/Complaints</a></li>
              <li><a href="#">Surveys and complaints</a></li>
              <li><a href="#">Surveys suggestions</a></li>
            </ul>
          </li>
          <li>
            <a href="#">
              <i class="fa-regular fa-messages"></i>
              <span class="link_name">Partners Communication</span>
            </a>
            <ul class="sub-menu blank">
              <li><a class="link_name" href="#">Partners Communication</a></li>
            </ul>
          </li>
        </ul>
      </div>