Auto-Collapse Shadcn-UI Accordion on mouseLeave

So I've been trying to build a little sidebar with an accordion for a self-education project, I'm pretty new to Shadcn-ui, NextJS (13.4), React and Node in general, and I've run into a small problem I can't figure out.

The sidebar extends on mouseover, and that and all the sidebar functionality works great, at least for what I'm trying to learn with this project, but on mouseLeave, when the elements are expanded, they look terrible when the sidebar shrinks again.

I'd like to bind an onMouseLeave event or something to the sidebar so that when it shrinks, it'll also collapse the accordion elements back in, but nothing I've tried seems to work.

Anyone got any pointers for figuring this one out?

Code for my sidebar currently:

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import Link from "next/link";
import { MdLock, MdCorporateFare, MdDashboard, MdDevices } from "react-icons/md";

export default function Sidebar() {
  return (
    <div className="fixed left-0 md:w-[5%] w-[15%] bg-primary h-full hover:w-[50%] md:hover:w-[20%] easing shadow-lg w-fit">
      <Accordion type="single" collapsible className="w-full">
        <AccordionItem value="item-1" className="sidebarItem">
          <AccordionTrigger className="p-5">
            <MdDashboard ></MdDashboard>
          </AccordionTrigger>
          <AccordionContent>
          <ul>
              <li className="hover:bg-tertiary p-5">
                <Link href="/page" >an item</Link>
              </li>
              <li className="text-secondary p-5 hover:bg-tertiary">
                <Link href="/page">an item</Link>
              </li>
            </ul>
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2" className="sidebarItem">
          <AccordionTrigger className="p-5">
            <MdCorporateFare ></MdCorporateFare>
          </AccordionTrigger>
          <AccordionContent>
          <ul>
              <li className="hover:bg-tertiary p-5">
                <Link href="/page" className="text-ellipsis">an item</Link>
              </li>
              <li className="text-secondary p-5 hover:bg-tertiary">
                <Link href="/page">an item</Link>
              </li>
            </ul>
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-3" className="sidebarItem">
          <AccordionTrigger className="p-5">
            <MdDevices ></MdDevices>
          </AccordionTrigger>
          <AccordionContent>
          <ul>
              <li className="hover:bg-tertiary p-5">
                <Link href="/page" >an item</Link>
              </li>
              <li className="text-secondary p-5 hover:bg-tertiary ">
                <Link href="/page" className="text-ellipsis">an item</Link>
              </li>
            </ul>
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-4" className="sidebarItem">
          <AccordionTrigger className="p-5">
            <MdLock className="text-secondary "/>
          </AccordionTrigger>
          <AccordionContent>
            <ul>
              <li className="text-secondary p-5 hover:bg-tertiary easing text-ellipsis w-fit">
                <Link href="/page" >an item</Link>
              </li>
              <li className="text-secondary p-5 hover:bg-tertiary easing text-ellipsis">
                <Link href="/page">an item</Link>
              </li>
            </ul>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

you need to feature functionality to fall apart the accordion elements whilst the sidebar shrinks. To acquire this, you may use React's useState hook to manage the nation of the accordion gadgets and handle the onMouseLeave event. right here's how you may do it:

First Import the useState hook from React:

import React, { useState } from "react";

Eecond Modify your Sidebar component to use the useState hook and handle the accordion state:

export default function Sidebar() {
  const [accordionOpen, setAccordionOpen] = useState("");

  const handleAccordionCollapse = () => {
    setAccordionOpen("");
  };

  const handleAccordionExpand = (value) => {
    setAccordionOpen(value);
  };

  return (
    <div
      className="fixed left-0 md:w-[5%] w-[15%] bg-primary h-full hover:w-[50%] md:hover:w-[20%] easing shadow-lg w-fit"
      onMouseLeave={handleAccordionCollapse}
    >
      <Accordion type="single" collapsible className="w-full">
        <AccordionItem
          value="item-1"
          className={`sidebarItem ${accordionOpen === "item-1" ? "open" : ""}`}
        >
          <AccordionTrigger
            className="p-5"
            onClick={() =>
              handleAccordionExpand(accordionOpen === "item-1" ? "" : "item-1")
            }
          >
            <MdDashboard />
          </AccordionTrigger>
          <AccordionContent>
            <ul>
              <li className="hover:bg-tertiary p-5">
                <Link href="/page">an item</Link>
              </li>
              <li className="text-secondary p-5 hover:bg-tertiary">
                <Link href="/page">an item</Link>
              </li>
            </ul>
          </AccordionContent>
        </AccordionItem>
        {/* Add other AccordionItems here */}
      </Accordion>
    </div>
  );
}

By way of using the useState hook, we're monitoring the accordionOpen state variable to recognise which accordion item is nowadays extended. The handleAccordionCollapse characteristic may be prompted when the mouse leaves the sidebar, and it resets the accordionOpen state to fall apart the increased items. additionally, we're the use of handleAccordionExpand to toggle the expansion whilst an accordion object is clicked. The className is dynamically adjusted based on the accordionOpen country to use patterns to the multiplied accordion object.