Merge pull request #1783 from benphelps/hidden-headers

allow hiding section headers

src/components/services/group.jsx

@@ -16,45 +16,47 @@ export default function ServicesGroup({ group, services, layout, fiveColumns, di
       className={classNames(
         layout?.style === "row" ? "basis-full" : "basis-full md:basis-1/2 lg:basis-1/3 xl:basis-1/4",
         layout?.style !== "row" && fiveColumns ? "3xl:basis-1/5" : "",
-        "flex-1 p-1"
+        layout?.header === false ? "flex-1 px-1 -my-1" : "flex-1 p-1",
       )}
     >
-      <Disclosure defaultOpen>
+        <Disclosure defaultOpen>
-      {({ open }) => (
+        {({ open }) => (
-        <>
+          <>
-        <Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group">
+          { layout?.header !== false &&
-          {layout?.icon &&
+            <Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group">
-            <div className="flex-shrink-0 mr-2 w-7 h-7">
+              {layout?.icon &&
-              <ResolvedIcon icon={layout.icon} />
+                <div className="flex-shrink-0 mr-2 w-7 h-7">
-            </div>
+                  <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-all opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl',
+                open ? '' : 'rotate-90'
+                )} />
+            </Disclosure.Button>
           }
-          <h2 className="flex text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
+          <Transition
-          <MdKeyboardArrowDown className={classNames(
+            // Otherwise the transition group does display: none and cancels animation
-            disableCollapse ? 'hidden' : '',
+            className="!block"
-            'transition-all opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl',
+            unmount={false}
-            open ? '' : 'rotate-90'
+            beforeLeave={() => {
-            )} />
+              panel.current.style.height = `${panel.current.scrollHeight}px`;
-        </Disclosure.Button>
+              setTimeout(() => {panel.current.style.height = `0`}, 1);
-        <Transition
+            }}
-          // Otherwise the transition group does display: none and cancels animation
+            beforeEnter={() => {
-          className="!block"
+              panel.current.style.height = `0px`;
-          unmount={false}
+              setTimeout(() => {panel.current.style.height = `${panel.current.scrollHeight}px`}, 1);
-          beforeLeave={() => {
+            }}
-            panel.current.style.height = `${panel.current.scrollHeight}px`;
+            >
-            setTimeout(() => {panel.current.style.height = `0`}, 1);
+              <Disclosure.Panel className="transition-all overflow-hidden duration-300 ease-out" ref={panel} static>
-          }}
+                <List group={group} services={services.services} layout={layout} />
-          beforeEnter={() => {
+              </Disclosure.Panel>
-            panel.current.style.height = `0px`;
+          </Transition>
-            setTimeout(() => {panel.current.style.height = `${panel.current.scrollHeight}px`}, 1);
+          </>
-          }}
+        )}
-          >
+        </Disclosure>
-            <Disclosure.Panel className="transition-all overflow-hidden duration-300 ease-out" ref={panel} static>
-              <List group={group} services={services.services} layout={layout} />
-            </Disclosure.Panel>
-        </Transition>
-        </>
-      )}
-      </Disclosure>
     </div>
   );
 }