Closing the drawer element by clicking on sidebar item

[schummd]

Hi all,

In the drawer that opens from right side of page (from this pages), how to close the drawer when a sidebar item is clicked?

<div className="drawer drawer-end">
  <input id="my-drawer-4" type="checkbox" className="drawer-toggle" />
  <div className="drawer-content">
    {/* Page content here */}
    <label htmlFor="my-drawer-4" className="drawer-button btn btn-primary">Open drawer</label>
  </div>
  <div className="drawer-side">
    <label htmlFor="my-drawer-4" aria-label="close sidebar" className="drawer-overlay"></label>
    <ul className="menu bg-base-200 text-base-content min-h-full w-80 p-4">
      {/* Sidebar content here */}
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  </div>
</div>

[saadeghi]

<a> tag opens a link but if you want to do a second behavior on top of that (closing the sidebar) you would need JS to do that.

Checking and unchecking the my-drawer-4 checkbox opens or closes the sidebar so you should use JS to uncheck that checkbox.

It's different for each framework but usually for JS frameworks, it's possible by binding a variable as the value of checkbox and then setting that variable to false when item is clicked.

Let me know if you have any questions.