From 041fae1fb30a0262ce54d1c5d05dbd6734bc2c32 Mon Sep 17 00:00:00 2001
From: Alex Higgins <michael.higgins@e-hps.com>
Date: Wed, 21 Jun 2023 16:46:14 -0400
Subject: [PATCH] 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 | 26 +++++++++++++++++---------
 src/pages/index.jsx               |  8 +++++++-
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/services/group.jsx b/src/components/services/group.jsx
index 945570647..49a44de41 100644
--- a/src/components/services/group.jsx
+++ b/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">
-        {layout?.icon &&
-          <div className="flex-shrink-0 mr-2 w-7 h-7">
-            <ResolvedIcon icon={layout.icon} />
-          </div>
-        }
-        <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
+      <div className="flex">
+        {/* eslint-disable-next-line no-shadow */}
+        <button type="button" disabled={disableCollapse} onClick={() => setIsShowing((isShowing) => !isShowing)} className="grow select-none items-center">
+          {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>
-      <List group={group} services={services.services} layout={layout} />
+      <Transition show={isShowing}><List group={group} services={services.services} layout={layout} /></Transition>
     </div>
   );
 }
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index d91a83398..5106e07cc 100644
--- a/src/pages/index.jsx
+++ b/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>
         )}