OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement disableCollapse feature per specific group

Browse Source
This commit is contained in:
Tyagunov Alexey 2025-01-13 03:03:26 +03:00
parent 1e556e105d
commit 8b883f1985
3 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/configs/settings.md
View File

@ -266,12 +266,22 @@ By default homepage will max out at 4 columns for services with `columns` style
### Collapsible sections ### Collapsible sections
You can disable the collapsible feature of services & bookmarks by adding: You can disable the collapsible feature of services & bookmarks by adding `disableCollapse` option to the layout group.
```yaml
layout:
Section A:
disableCollapse: true
```
This can also be set globaly using the `disableCollapse` option.
```yaml ```yaml
disableCollapse: true disableCollapse: true
``` ```
The value set on a group will overwrite the global setting.
By default the feature is enabled. By default the feature is enabled.
### Initially collapsed sections ### Initially collapsed sections

5
src/components/bookmarks/group.jsx
View File

@ -19,6 +19,7 @@ export default function BookmarksGroup({
useEffect(() => { useEffect(() => {
if (layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) panel.current.style.height = `0`; if (layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) panel.current.style.height = `0`;
}, [layout, groupsInitiallyCollapsed]); }, [layout, groupsInitiallyCollapsed]);
const groupDisableCollapse = !!(layout?.disableCollapse ?? disableCollapse)
return ( return (
<div <div
@ -33,7 +34,7 @@ export default function BookmarksGroup({
{({ open }) => ( {({ open }) => (
<> <>
{layout?.header !== false && ( {layout?.header !== false && (
<Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group"> <Disclosure.Button disabled={groupDisableCollapse} className="flex w-full select-none items-center group">
{layout?.icon && ( {layout?.icon && (
<div className="flex-shrink-0 mr-2 w-7 h-7 bookmark-group-icon"> <div className="flex-shrink-0 mr-2 w-7 h-7 bookmark-group-icon">
<ResolvedIcon icon={layout.icon} /> <ResolvedIcon icon={layout.icon} />
@ -44,7 +45,7 @@ export default function BookmarksGroup({
</h2> </h2>
<MdKeyboardArrowDown <MdKeyboardArrowDown
className={classNames( className={classNames(
disableCollapse ? "hidden" : "", groupDisableCollapse ? "hidden" : "",
"transition-all opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl", "transition-all opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl",
open ? "" : "rotate-180", open ? "" : "rotate-180",
)} )}

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

@ -25,6 +25,7 @@ export default function ServicesGroup({
let groupPadding = layout?.header === false ? "px-1" : "p-1 pb-0"; let groupPadding = layout?.header === false ? "px-1" : "p-1 pb-0";
if (isSubgroup) groupPadding = ""; if (isSubgroup) groupPadding = "";
const groupDisableCollapse = !!(layout?.disableCollapse ?? disableCollapse)
return ( return (
<div <div
@ -41,7 +42,7 @@ export default function ServicesGroup({
{({ open }) => ( {({ open }) => (
<> <>
{layout?.header !== false && ( {layout?.header !== false && (
<Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group"> <Disclosure.Button disabled={groupDisableCollapse} className="flex w-full select-none items-center group">
{layout?.icon && ( {layout?.icon && (
<div className="flex-shrink-0 mr-2 w-7 h-7 service-group-icon"> <div className="flex-shrink-0 mr-2 w-7 h-7 service-group-icon">
<ResolvedIcon icon={layout.icon} /> <ResolvedIcon icon={layout.icon} />
@ -52,7 +53,7 @@ export default function ServicesGroup({
</h2> </h2>
<MdKeyboardArrowDown <MdKeyboardArrowDown
className={classNames( className={classNames(
disableCollapse ? "hidden" : "", groupDisableCollapse ? "hidden" : "",
"transition-all opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl", "transition-all opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl",
open ? "" : "rotate-180", open ? "" : "rotate-180",
)} )}