Merge pull request #1626 from ionyx0/main

Feature: collapsible layout sections

src/components/services/group.jsx

@@ -1,9 +1,12 @@
 import classNames from "classnames";
+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 }) {
+export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse}) {
+
   return (
     <div
       key={services.name}
@@ -13,15 +16,37 @@ 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>
-      <List group={group} services={services.services} layout={layout} />
+      <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>
+          <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>
   );
 }

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>
         )}

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: {