diff --git a/docs/configs/settings.md b/docs/configs/settings.md
index d3e9a837..9ee86a85 100644
--- a/docs/configs/settings.md
+++ b/docs/configs/settings.md
@@ -229,6 +229,26 @@ disableCollapse: true
By default the feature is enabled.
+### Initially collapsed sections
+
+You can initially collapse sections by adding the `initiallyCollapsed` option to the layout group.
+
+```yaml
+layout:
+ Section A:
+ initiallyCollapsed: true
+```
+
+This can also be set globaly using the `groupsInitiallyCollapsed` option.
+
+```yaml
+groupsInitiallyCollapsed: true
+```
+
+The value set on a group will overwrite the global setting.
+
+By default the feature is disabled.
+
### Use Equal Height Cards
You can enable equal height cards for groups of services, this will make all cards in a row the same height.
diff --git a/src/components/bookmarks/group.jsx b/src/components/bookmarks/group.jsx
index c5e6a2f1..b13aeac1 100644
--- a/src/components/bookmarks/group.jsx
+++ b/src/components/bookmarks/group.jsx
@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useRef, useEffect } from "react";
import classNames from "classnames";
import { Disclosure, Transition } from "@headlessui/react";
import { MdKeyboardArrowDown } from "react-icons/md";
@@ -7,8 +7,13 @@ import ErrorBoundary from "components/errorboundry";
import List from "components/bookmarks/list";
import ResolvedIcon from "components/resolvedicon";
-export default function BookmarksGroup({ bookmarks, layout, disableCollapse }) {
+export default function BookmarksGroup({ bookmarks, layout, disableCollapse, groupsInitiallyCollapsed }) {
const panel = useRef();
+
+ useEffect(() => {
+ if (layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) panel.current.style.height = `0`;
+ }, [layout, groupsInitiallyCollapsed]);
+
return (
-
+
{({ open }) => (
<>
{layout?.header !== false && (
diff --git a/src/components/services/group.jsx b/src/components/services/group.jsx
index bcc3ce5d..cdbb89f3 100644
--- a/src/components/services/group.jsx
+++ b/src/components/services/group.jsx
@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useRef, useEffect } from "react";
import classNames from "classnames";
import { Disclosure, Transition } from "@headlessui/react";
import { MdKeyboardArrowDown } from "react-icons/md";
@@ -6,9 +6,21 @@ 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, disableCollapse, useEqualHeights }) {
+export default function ServicesGroup({
+ group,
+ services,
+ layout,
+ fiveColumns,
+ disableCollapse,
+ useEqualHeights,
+ groupsInitiallyCollapsed,
+}) {
const panel = useRef();
+ useEffect(() => {
+ if (layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) panel.current.style.height = `0`;
+ }, [layout, groupsInitiallyCollapsed]);
+
return (
-
+
{({ open }) => (
<>
{layout?.header !== false && (
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 59a2ad12..0de51e32 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -311,6 +311,7 @@ function Home({ initialSettings }) {
fiveColumns={settings.fiveColumns}
disableCollapse={settings.disableCollapse}
useEqualHeights={settings.useEqualHeights}
+ groupsInitiallyCollapsed={settings.groupsInitiallyCollapsed}
/>
) : (
),
)}
@@ -333,6 +335,7 @@ function Home({ initialSettings }) {
layout={settings.layout?.[group.name]}
fiveColumns={settings.fiveColumns}
disableCollapse={settings.disableCollapse}
+ groupsInitiallyCollapsed={settings.groupsInitiallyCollapsed}
/>
))}
@@ -345,6 +348,7 @@ function Home({ initialSettings }) {
bookmarks={group}
layout={settings.layout?.[group.name]}
disableCollapse={settings.disableCollapse}
+ groupsInitiallyCollapsed={settings.groupsInitiallyCollapsed}
/>
))}
@@ -361,6 +365,7 @@ function Home({ initialSettings }) {
settings.disableCollapse,
settings.useEqualHeights,
settings.cardBlur,
+ settings.groupsInitiallyCollapsed,
initialSettings.layout,
]);