Implement disableCollapse feature per specific group

docs/configs/settings.md

@@ -266,12 +266,22 @@ By default homepage will max out at 4 columns for services with `columns` style
 
 ### 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
 disableCollapse: true
 ```
 
+The value set on a group will overwrite the global setting.
+
 By default the feature is enabled.
 
 ### Initially collapsed sections

src/components/bookmarks/group.jsx

@@ -19,6 +19,7 @@ export default function BookmarksGroup({
   useEffect(() => {
     if (layout?.initiallyCollapsed ?? groupsInitiallyCollapsed) panel.current.style.height = `0`;
   }, [layout, groupsInitiallyCollapsed]);
+  const groupDisableCollapse = !!(layout?.disableCollapse ?? disableCollapse)
 
   return (
     <div
@@ -33,7 +34,7 @@ export default function BookmarksGroup({
         {({ open }) => (
           <>
             {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 && (
                   <div className="flex-shrink-0 mr-2 w-7 h-7 bookmark-group-icon">
                     <ResolvedIcon icon={layout.icon} />
@@ -44,7 +45,7 @@ export default function BookmarksGroup({
                 </h2>
                 <MdKeyboardArrowDown
                   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",
                     open ? "" : "rotate-180",
                   )}

src/components/services/group.jsx

@@ -25,6 +25,7 @@ export default function ServicesGroup({
 
   let groupPadding = layout?.header === false ? "px-1" : "p-1 pb-0";
   if (isSubgroup) groupPadding = "";
+  const groupDisableCollapse = !!(layout?.disableCollapse ?? disableCollapse)
 
   return (
     <div
@@ -41,7 +42,7 @@ export default function ServicesGroup({
         {({ open }) => (
           <>
             {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 && (
                   <div className="flex-shrink-0 mr-2 w-7 h-7 service-group-icon">
                     <ResolvedIcon icon={layout.icon} />
@@ -52,7 +53,7 @@ export default function ServicesGroup({
                 </h2>
                 <MdKeyboardArrowDown
                   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",
                     open ? "" : "rotate-180",
                   )}