Does anyone know how to close the drawer using next/link component

[Malewooo16]

I have read previous discussions they said you need to use the "use client directive" but It's not working but on further observation I realised the next/link component is not a traditional a tag it is similar to the Link in react-router meaning it doesn't refresh the page on click rather it routes you to another component I tried using the a tag, it works because the page refreshes as components render but sadly it doesn't work for next/link

`"use client";

import Link from "next/link";
import React from "react";
import { FaBars } from "react-icons/fa";

export default function Sidebar() {
return (

    <label
      htmlFor="my-drawer"
      className="btn bg-transparent border-0  drawer-button text-lg"
    >
      {" "}
      <FaBars />{" "}
    </label>
  </div>
  <div className="drawer-side">
    <label
      htmlFor="my-drawer"
      aria-label="close sidebar"
      className="drawer-overlay"
    ></label>
    <ul className="menu p-4 w-80 min-h-full bg-black text-base-content ">
     
      <li className="text-lg my-4"> Elegance </li>

      <li>
        {" "}
        <Link href={`/dashboard`} className="mb-3">
          {" "}
          Dashboard{" "}
        </Link>{" "}
      </li>
      <li>
        <Link href={`/analytics`} className="mb-3">
          {" "}
          Analytics{" "}
        </Link>{" "}
      </li>
      <li>
        <Link href={`/workflow`} className="mb-3">
          {" "}
          Workflow{" "}
        </Link>{" "}
      </li>
      <li>
        <a href={`/teams`} className="mb-3">
          {" "}
          Teams{" "}
        </a>{" "}
      </li>
    </ul>
  </div>
</div>

);
}
`

[landerton]

Move your entire <ul> element into a client component. Then and an onClick to all the <Link> elements:

onClick={() => {document.getElementById("my-drawer")?.click()}}

[zhongyousun]

Thanks a lot