SIdenav bar dropdown-CodePudding

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

CodePudding user response：

Welcome to Stackoverflow Siraz,

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 >
    <div >
      <!-- Hamburger Menu -->
      <button  type="button" aria-label="Menu" aria-controls="navigation">
        <span >
          <span ></span>
        </span>
      </button>
    </div>

    <!-- Side navBar -->
    <ul >
      <li>
        <a href="#">
          <i ></i>
          <span >Dashboard</span>
        </a>
        <ul >
          <li><a  href="#">Dashboard</a></li>
        </ul>
      </li>
      <li>
        <div >
          <a href="#">
            <i ></i>
            <span >Parnership Applications</span>
          </a>
          <i ></i>
        </div>
        <ul >
          <li><a  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 >
          <a href="#">
            <i ></i>
            <span >My File</span>
          </a>
          <i ></i>
        </div>
        <ul >
          <li><a  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 >
          <a href="#">
            <i ></i>
            <span >Profile</span>
          </a>
          <i ></i>
        </div>
        <ul >
          <li><a  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 ></i>
          <span >Agenda</span>
        </a>
        <ul >
          <li><a  href="#">Agenda</a></li>
        </ul>
      </li>
      <li>
        <div >
          <a href="#">
            <i ></i>
            <span >Surveys Management</span>
          </a>
          <i ></i>
        </div>
        <ul >
          <li><a  href="#">Management</a></li>
          <li><a href="#">Survey</a></li>
          <li><a href="#">Results</a></li>
        </ul>
      </li>
      <li>
        <a href="#">
          <i ></i>
          <span >Reports</span>
        </a>
        <ul >
          <li><a  href="#">Reports</a></li>
        </ul>
      </li>
      <li>
        <a href="#">
          <i ></i>
          <span >Archive</span>
        </a>
        <ul >
          <li><a  href="#">Archive</a></li>
        </ul>
      </li>
      <li>
        <div >
          <a href="#">
            <i ></i>
            <span >Suggestions/Complaints</span>
          </a>
          <i ></i>
        </div>
        <ul >
          <li><a  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 ></i>
          <span >Partners Communication</span>
        </a>
        <ul >
          <li><a  href="#">Partners Communication</a></li>
        </ul>
      </li>
    </ul>
  </div>

CodePudding user response：

Welcome to StackOverflow!

Basically your problem is that when you click on the div or on the arrow, you get different targets, hence different parents.

You can fix it by using event's currentTarget and removing one parentElement selector:

for (var i = 0; i < navli.length; i  ) {
  navli[i].addEventListener("click", (e) => {
    let navliParent = e.currentTarget.parentElement; //selecting main parent of arrow
    navliParent.classList.toggle("showMenu");
  });
}

CodePudding user response：

The problem is that you set outside of and you click on only . please check i image that link contain file. file in image