Adds ability to collapse layout sections

Reverts pnpm lock file changes

Make entire section above list clickable.

Implement in headlessui instead of pulling in new library.

Remove unecessary packages and clean up ESLint errors

src/components/services/group.jsx

@@ -1,9 +1,14 @@
 import classNames from "classnames";
+import { Transition } from '@headlessui/react'
+import { useState } from 'react'
 
 import List from "components/services/list";
 import ResolvedIcon from "components/resolvedicon";
 
-export default function ServicesGroup({ group, services, layout, fiveColumns }) {
+export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse}) {
+
+  const [isShowing, setIsShowing] = useState(true)
+
   return (
     <div
       key={services.name}
@@ -13,15 +18,18 @@ export default function ServicesGroup({ group, services, layout, fiveColumns })
         "flex-1 p-1"
       )}
     >
-      <div className="flex select-none items-center">
+      <div className="flex">
-        {layout?.icon &&
+        {/* eslint-disable-next-line no-shadow */}
-          <div className="flex-shrink-0 mr-2 w-7 h-7">
+        <button type="button" disabled={disableCollapse} onClick={() => setIsShowing((isShowing) => !isShowing)} className="grow select-none items-center">
-            <ResolvedIcon icon={layout.icon} />
+          {layout?.icon &&
-          </div>
+            <div className="flex-shrink-0 mr-2 w-7 h-7">
-        }
+              <ResolvedIcon icon={layout.icon} />
-        <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
+            </div>
+          }
+          <h2 className="flex text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
+        </button>
       </div>
-      <List group={group} services={services.services} layout={layout} />
+      <Transition show={isShowing}><List group={group} services={services.services} layout={layout} /></Transition>
     </div>
   );
 }

src/pages/index.jsx

@@ -294,7 +294,13 @@ function Home({ initialSettings }) {
         {services?.length > 0 && (
           <div className="flex flex-wrap p-4 sm:p-8 sm:pt-4 items-start pb-2">
             {services.map((group) => (
-              <ServicesGroup key={group.name} group={group.name} services={group} layout={initialSettings.layout?.[group.name]} fiveColumns={settings.fiveColumns} />
+              <ServicesGroup 
+                key={group.name}
+                group={group.name}
+                services={group}
+                layout={initialSettings.layout?.[group.name]}
+                fiveColumns={settings.fiveColumns} 
+                disableCollapse={settings.disableCollapse} />
             ))}
           </div>
         )}