From 9925de40498046f146f17d2322523419cafc2e8c Mon Sep 17 00:00:00 2001
From: Flo2410 <florian@hye.dev>
Date: Thu, 8 Feb 2024 16:40:34 +0000
Subject: [PATCH] Added the option initiallyCollapsed to layout groups

---
 src/components/bookmarks/group.jsx | 9 +++++++--
 src/components/services/group.jsx  | 8 ++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/bookmarks/group.jsx b/src/components/bookmarks/group.jsx
index c5e6a2f1..107ceef4 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";
@@ -9,6 +9,11 @@ import ResolvedIcon from "components/resolvedicon";
 
 export default function BookmarksGroup({ bookmarks, layout, disableCollapse }) {
   const panel = useRef();
+
+  useEffect(() => {
+    if (layout?.initiallyCollapsed) panel.current.style.height = `0`;
+  }, [layout]);
+
   return (
     <div
       key={bookmarks.name}
@@ -18,7 +23,7 @@ export default function BookmarksGroup({ bookmarks, layout, disableCollapse }) {
         layout?.header === false ? "flex-1 px-1 -my-1" : "flex-1 p-1",
       )}
     >
-      <Disclosure defaultOpen>
+      <Disclosure defaultOpen={!layout?.initiallyCollapsed ?? true}>
         {({ open }) => (
           <>
             {layout?.header !== false && (
diff --git a/src/components/services/group.jsx b/src/components/services/group.jsx
index bcc3ce5d..0d0e4f6a 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";
@@ -9,6 +9,10 @@ import ResolvedIcon from "components/resolvedicon";
 export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse, useEqualHeights }) {
   const panel = useRef();
 
+  useEffect(() => {
+    if (layout?.initiallyCollapsed) panel.current.style.height = `0`;
+  }, [layout, panel]);
+
   return (
     <div
       key={services.name}
@@ -19,7 +23,7 @@ export default function ServicesGroup({ group, services, layout, fiveColumns, di
         layout?.header === false ? "flex-1 px-1 -my-1" : "flex-1 p-1",
       )}
     >
-      <Disclosure defaultOpen>
+      <Disclosure defaultOpen={!layout?.initiallyCollapsed ?? true}>
         {({ open }) => (
           <>
             {layout?.header !== false && (