Use Disclosure component for collapsible service groups, add transition

hide collapse arrow if disabled

dont break layout for icons in group title

no-shadow

src/components/services/group.jsx

@@ -1,14 +1,12 @@
 import classNames from "classnames";
-import { Transition } from '@headlessui/react'
-import { useState } from 'react'
+import { Disclosure, Transition } from '@headlessui/react';
+import { MdKeyboardArrowDown } from "react-icons/md";
 
 import List from "components/services/list";
 import ResolvedIcon from "components/resolvedicon";
 
 export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse}) {
 
-  const [isShowing, setIsShowing] = useState(true)
-
   return (
     <div
       key={services.name}
@@ -18,18 +16,37 @@ export default function ServicesGroup({ group, services, layout, fiveColumns, di
         "flex-1 p-1"
       )}
     >
-      <div className="flex">
-        {/* eslint-disable-next-line no-shadow */}
-        <button type="button" disabled={disableCollapse} onClick={() => setIsShowing((isShowing) => !isShowing)} className="grow select-none items-center">
+      <Disclosure defaultOpen>
+      {({ open }) => (
+        <>
+        <Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group">
           {layout?.icon &&
             <div className="flex-shrink-0 mr-2 w-7 h-7">
               <ResolvedIcon icon={layout.icon} />
             </div>
           }
           <h2 className="flex text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
-        </button>
-      </div>
-      <Transition show={isShowing}><List group={group} services={services.services} layout={layout} /></Transition>
+          <MdKeyboardArrowDown className={classNames(
+            disableCollapse ? 'hidden' : '',
+            'transition-opacity opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl',
+            open ? 'rotate-180 transform' : ''
+            )} />
+        </Disclosure.Button>
+        <Transition
+          enter="transition duration-200 ease-out"
+          enterFrom="transform scale-75 opacity-0"
+          enterTo="transform scale-100 opacity-100"
+          leave="transition duration-75 ease-out"
+          leaveFrom="transform scale-100 opacity-100"
+          leaveTo="transform scale-75 opacity-0"
+          >
+            <Disclosure.Panel>
+              <List group={group} services={services.services} layout={layout} />
+            </Disclosure.Panel>
+        </Transition>
+        </>
+      )}
+      </Disclosure>
     </div>
   );
 }

tailwind.config.js

@@ -9,6 +9,11 @@ module.exports = {
     "./src/components/**/*.{js,ts,jsx,tsx}",
     "./src/widgets/**/*.{js,ts,jsx,tsx}",
   ],
+  variants: {
+    extend: {
+        display: ["group-hover"],
+    },
+  },
   theme: {
     extend: {
       colors: {