Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-05-06 07:23:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

allow hiding section headers

Browse Source
This commit is contained in:
Ben Phelps 2023-08-06 04:38:37 +03:00
parent 15bf55952b
commit 167ecb42de
1 changed files with 38 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/services/group.jsx
View File

@ -16,45 +16,47 @@ export default function ServicesGroup({ group, services, layout, fiveColumns, di
className={classNames( className={classNames(
layout?.style === "row" ? "basis-full" : "basis-full md:basis-1/2 lg:basis-1/3 xl:basis-1/4", 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" : "", 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> </div>
); );
} }