@scm-manager/ui-components 2.39.1 → 2.39.2-20220912-102715

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "2.39.1",
+  "version": "2.39.2-20220912-102715",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -20,14 +20,14 @@
     "update-storyshots": "jest --testPathPattern=\"storyshots.test.ts\" --collectCoverage=false -u"
   },
   "devDependencies": {
-    "@scm-manager/ui-syntaxhighlighting": "2.39.1",
-    "@scm-manager/ui-text": "2.39.1",
+    "@scm-manager/ui-syntaxhighlighting": "2.39.2-20220912-102715",
+    "@scm-manager/ui-text": "2.39.2-20220912-102715",
     "@scm-manager/babel-preset": "^2.13.1",
     "@scm-manager/eslint-config": "^2.16.0",
     "@scm-manager/jest-preset": "^2.13.0",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.13.0",
-    "@scm-manager/ui-tests": "2.39.1",
+    "@scm-manager/ui-tests": "2.39.2-20220912-102715",
     "@storybook/addon-actions": "^6.4.20",
     "@storybook/addon-essentials": "^6.4.20",
     "@storybook/addon-interactions": "^6.4.20",
@@ -66,9 +66,9 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.4.3",
-    "@scm-manager/ui-api": "2.39.1",
-    "@scm-manager/ui-extensions": "2.39.1",
-    "@scm-manager/ui-types": "2.39.1",
+    "@scm-manager/ui-api": "2.39.2-20220912-102715",
+    "@scm-manager/ui-extensions": "2.39.2-20220912-102715",
+    "@scm-manager/ui-types": "2.39.2-20220912-102715",
     "classnames": "^2.2.6",
     "date-fns": "^2.4.1",
     "deepmerge": "^4.2.2",

package/src/__snapshots__/storyshots.test.ts.snap

@@ -1677,6 +1677,26 @@ exports[`Storyshots Footer Default 1`] = `
               footer.support.enterprise
             </a>
           </li>
+          <li>
+            <a
+              className=""
+              href="https://community.cloudogu.com/c/scm-manager/bug-reports-scmm"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              footer.support.bugReport
+            </a>
+          </li>
+          <li>
+            <a
+              className=""
+              href="https://community.cloudogu.com/c/scm-manager/feature-requests-scmm"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              footer.support.featureRequest
+            </a>
+          </li>
         </ul>
       </section>
     </div>
@@ -1843,6 +1863,26 @@ exports[`Storyshots Footer Full 1`] = `
               footer.support.enterprise
             </a>
           </li>
+          <li>
+            <a
+              className=""
+              href="https://community.cloudogu.com/c/scm-manager/bug-reports-scmm"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              footer.support.bugReport
+            </a>
+          </li>
+          <li>
+            <a
+              className=""
+              href="https://community.cloudogu.com/c/scm-manager/feature-requests-scmm"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              footer.support.featureRequest
+            </a>
+          </li>
           <li>
             <a
               className=""
@@ -1990,6 +2030,26 @@ exports[`Storyshots Footer With Avatar 1`] = `
               footer.support.enterprise
             </a>
           </li>
+          <li>
+            <a
+              className=""
+              href="https://community.cloudogu.com/c/scm-manager/bug-reports-scmm"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              footer.support.bugReport
+            </a>
+          </li>
+          <li>
+            <a
+              className=""
+              href="https://community.cloudogu.com/c/scm-manager/feature-requests-scmm"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              footer.support.featureRequest
+            </a>
+          </li>
         </ul>
       </section>
     </div>
@@ -2148,6 +2208,26 @@ exports[`Storyshots Footer With Plugin Links 1`] = `
               footer.support.enterprise
             </a>
           </li>
+          <li>
+            <a
+              className=""
+              href="https://community.cloudogu.com/c/scm-manager/bug-reports-scmm"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              footer.support.bugReport
+            </a>
+          </li>
+          <li>
+            <a
+              className=""
+              href="https://community.cloudogu.com/c/scm-manager/feature-requests-scmm"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              footer.support.featureRequest
+            </a>
+          </li>
           <li>
             <a
               className=""
@@ -71378,7 +71458,7 @@ exports[`Storyshots Secondary Navigation Active when match 1`] = `
     className="column is-3"
   >
     <aside
-      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 NSEld menu"
+      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
     >
       <div>
         <p
@@ -71440,7 +71520,7 @@ exports[`Storyshots Secondary Navigation Default 1`] = `
     className="column is-3"
   >
     <aside
-      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 NSEld menu"
+      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
     >
       <div>
         <p
@@ -71502,7 +71582,7 @@ exports[`Storyshots Secondary Navigation Extension Point 1`] = `
     className="column is-3"
   >
     <aside
-      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 NSEld menu"
+      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
     >
       <div>
         <p
@@ -71590,7 +71670,7 @@ exports[`Storyshots Secondary Navigation Sub Navigation 1`] = `
     className="column is-3"
   >
     <aside
-      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 NSEld menu"
+      className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
     >
       <div>
         <p

package/src/layout/Footer.tsx

@@ -22,7 +22,8 @@
  * SOFTWARE.
  */
 import React, { FC } from "react";
-import { Links, Me } from "@scm-manager/ui-types";
+import { Feedback, Links, Me } from "@scm-manager/ui-types";
+import { useIndex } from "@scm-manager/ui-api";
 import { ExtensionPoint, extensionPoints, useBinder } from "@scm-manager/ui-extensions";
 import { AvatarImage } from "../avatar";
 import NavLink from "../navigation/NavLink";
@@ -80,6 +81,7 @@ const TitleWithAvatar: FC<TitleWithAvatarProps> = ({ me }) => (
 const Footer: FC<Props> = ({ me, version, links }) => {
   const [t] = useTranslation("commons");
   const binder = useBinder();
+  const index = useIndex();
 
   const extensionProps = { me, url: "/me", links };
   let meSectionTile;
@@ -124,6 +126,18 @@ const Footer: FC<Props> = ({ me, version, links }) => {
               to="https://cloudogu.com/en/scm-manager-enterprise/"
               label={t("footer.support.enterprise")}
             />
+            {!(index.data?._embedded?.feedback as Feedback)?.disabled ? (
+              <>
+                <ExternalNavLink
+                  to="https://community.cloudogu.com/c/scm-manager/bug-reports-scmm"
+                  label={t("footer.support.bugReport")}
+                />
+                <ExternalNavLink
+                  to="https://community.cloudogu.com/c/scm-manager/feature-requests-scmm"
+                  label={t("footer.support.featureRequest")}
+                />
+              </>
+            ) : null}
             <ExtensionPoint name="footer.support" props={extensionProps} renderAll={true} />
           </FooterSection>
         </div>

package/src/layout/Header.tsx

@@ -28,10 +28,6 @@ type Props = {
   authenticated?: boolean;
 };
 
-const SmallHeader: FC = ({ children }) => {
-  return <div className="has-scm-background">{children}</div>;
-};
-
 const LargeHeader: FC = () => {
   return (
     <div className="hero has-scm-background is-small">
@@ -50,7 +46,7 @@ const LargeHeader: FC = () => {
 
 const Header: FC<Props> = ({ authenticated, children }) => {
   if (authenticated) {
-    return <SmallHeader>{children}</SmallHeader>;
+    return <>{children}</>;
   } else {
     return <LargeHeader />;
   }

package/src/modals/ActiveModalCountContextProvider.tsx

@@ -0,0 +1,49 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import ActiveModalCountContext from "./activeModalCountContext";
+import React, { FC, useCallback, useState } from "react";
+
+/**
+ * A simple counter that allows developers to keep track of how many modals are currently open.
+ *
+ * A default provider instance wraps the SCM-Manager so there is no need for plugins to use this component.
+ *
+ * Required by {@link useActiveModals}.
+ */
+const ActiveModalCountContextProvider: FC = ({ children }) => {
+  const [activeModalCount, setActiveModalCount] = useState(0);
+  const incrementModalCount = useCallback(() => setActiveModalCount((prev) => prev + 1), []);
+  const decrementModalCount = useCallback(() => setActiveModalCount((prev) => prev - 1), []);
+
+  return (
+    <ActiveModalCountContext.Provider
+      value={{ value: activeModalCount, increment: incrementModalCount, decrement: decrementModalCount }}
+    >
+      {children}
+    </ActiveModalCountContext.Provider>
+  );
+};
+
+export default ActiveModalCountContextProvider;

package/src/modals/ConfirmAlert.stories.tsx

@@ -26,6 +26,7 @@ import { storiesOf } from "@storybook/react";
 import { MemoryRouter } from "react-router-dom";
 import * as React from "react";
 import ConfirmAlert, { confirmAlert } from "./ConfirmAlert";
+import ActiveModalCountContext from "./activeModalCountContext";
 
 const body =
   "Mind-paralyzing change needed improbability vortex machine sorts sought same theory upending job just allows\n " +
@@ -37,27 +38,36 @@ const buttons = [
   {
     className: "is-outlined",
     label: "Cancel",
-    onClick: () => null
+    onClick: () => null,
   },
   {
-    label: "Submit"
-  }
+    label: "Submit",
+  },
 ];
 
 const buttonsWithAutofocus = [
   {
     label: "Cancel",
-    onClick: () => null
+    onClick: () => null,
   },
   {
     className: "is-info",
     label: "I should be focused",
-    autofocus: true
-  }
+    autofocus: true,
+  },
 ];
 
+const doNothing = () => {
+  // Do nothing
+};
+
 storiesOf("Modal/ConfirmAlert", module)
-  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator((story) => (
+    <ActiveModalCountContext.Provider value={{ value: 0, increment: doNothing, decrement: doNothing }}>
+      {story()}
+    </ActiveModalCountContext.Provider>
+  ))
   .add("Default", () => <ConfirmAlert message={body} title={"Are you sure about that?"} buttons={buttons} />)
   .add("WithButton", () => {
     const buttonClick = () => {

package/src/modals/Modal.stories.tsx

@@ -34,6 +34,7 @@ import { Button, ButtonGroup } from "../buttons";
 import Notification from "../Notification";
 import { Autocomplete } from "../index";
 import { SelectValue } from "@scm-manager/ui-types";
+import ActiveModalCountContext from "./activeModalCountContext";
 
 const TopAndBottomMargin = styled.div`
   margin: 0.75rem 0; // only for aesthetic reasons
@@ -75,20 +76,25 @@ const withFormElementsFooter = (
 );
 
 const loadSuggestions: (p: string) => Promise<SelectValue[]> = () =>
-  new Promise(resolve => {
+  new Promise((resolve) => {
     setTimeout(() => {
       resolve([
         { value: { id: "trillian", displayName: "Tricia McMillan" }, label: "Tricia McMillan" },
         { value: { id: "zaphod", displayName: "Zaphod Beeblebrox" }, label: "Zaphod Beeblebrox" },
         { value: { id: "ford", displayName: "Ford Prefect" }, label: "Ford Prefect" },
         { value: { id: "dent", displayName: "Arthur Dent" }, label: "Arthur Dent" },
-        { value: { id: "marvin", displayName: "Marvin" }, label: "Marvin the Paranoid Android " }
+        { value: { id: "marvin", displayName: "Marvin" }, label: "Marvin the Paranoid Android " },
       ]);
     });
   });
 
 storiesOf("Modal/Modal", module)
-  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator((story) => (
+    <ActiveModalCountContext.Provider value={{ value: 0, increment: doNothing, decrement: doNothing }}>
+      {story()}
+    </ActiveModalCountContext.Provider>
+  ))
   .add("Default", () => (
     <NonCloseableModal>
       <p>{text}</p>

package/src/modals/Modal.tsx

@@ -26,6 +26,7 @@ import classNames from "classnames";
 import styled from "styled-components";
 import { Dialog } from "@headlessui/react";
 import { devices } from "../devices";
+import useRegisterModal from "./useRegisterModal";
 
 type ModalSize = "S" | "M" | "L";
 
@@ -67,6 +68,7 @@ export const Modal: FC<Props> = ({
   initialFocusRef,
   overflowVisible
 }) => {
+  useRegisterModal(active);
   const closeButtonRef = useRef<HTMLButtonElement | null>(null);
   let showFooter = null;
 

package/src/modals/activeModalCountContext.ts

@@ -0,0 +1,29 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from "react";
+
+export type ModalStateContextType = { value: number; increment: () => void; decrement: () => void };
+
+export default React.createContext<ModalStateContextType>({} as ModalStateContextType);

package/src/modals/index.ts

@@ -27,3 +27,5 @@
 export { default as ConfirmAlert, confirmAlert } from "./ConfirmAlert";
 export { default as Modal } from "./Modal";
 export { default as FullscreenModal } from "./FullscreenModal";
+export { default as ActiveModalCountContextProvider } from "./ActiveModalCountContextProvider";
+export { default as useActiveModals } from "./useActiveModals";

package/src/modals/useActiveModals.ts

@@ -0,0 +1,36 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useContext } from "react";
+import ActiveModalCountContext from "./activeModalCountContext";
+
+/**
+ * @returns Whether any modals are currently open
+ */
+const useActiveModals = () => {
+  const { value } = useContext(ActiveModalCountContext);
+  return value > 0;
+};
+
+export default useActiveModals;

package/src/modals/useRegisterModal.test.tsx

@@ -0,0 +1,88 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { renderHook } from "@testing-library/react-hooks";
+import React, { FC } from "react";
+import ActiveModalCountContext, { ModalStateContextType } from "./activeModalCountContext";
+import useRegisterModal from "./useRegisterModal";
+
+const createWrapper =
+  (context: ModalStateContextType): FC =>
+  ({ children }) => {
+    return <ActiveModalCountContext.Provider value={context}>{children}</ActiveModalCountContext.Provider>;
+  };
+
+describe("useRegisterModal", () => {
+  it("should increment and not decrement on active registration", () => {
+    const increment = jest.fn();
+    const decrement = jest.fn();
+
+    renderHook(() => useRegisterModal(true), {
+      wrapper: createWrapper({ value: 0, increment, decrement }),
+    });
+
+    expect(decrement).not.toHaveBeenCalled();
+    expect(increment).toHaveBeenCalled();
+  });
+
+  it("should not decrement on inactive registration", () => {
+    const increment = jest.fn();
+    const decrement = jest.fn();
+
+    renderHook(() => useRegisterModal(false), {
+      wrapper: createWrapper({ value: 0, increment, decrement }),
+    });
+
+    expect(decrement).not.toHaveBeenCalled();
+    expect(increment).not.toHaveBeenCalled();
+  });
+
+  it("should not decrement on inactive de-registration", () => {
+    const increment = jest.fn();
+    const decrement = jest.fn();
+
+    const result = renderHook(() => useRegisterModal(false), {
+      wrapper: createWrapper({ value: 0, increment, decrement }),
+    });
+
+    result.unmount();
+
+    expect(decrement).not.toHaveBeenCalled();
+    expect(increment).not.toHaveBeenCalled();
+  });
+
+  it("should decrement on active de-registration", () => {
+    const increment = jest.fn();
+    const decrement = jest.fn();
+
+    const result = renderHook(() => useRegisterModal(false, true), {
+      wrapper: createWrapper({ value: 0, increment, decrement }),
+    });
+
+    result.unmount();
+
+    expect(decrement).toHaveBeenCalled();
+    expect(increment).not.toHaveBeenCalled();
+  });
+});

package/src/modals/useRegisterModal.ts

@@ -0,0 +1,53 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useContext, useEffect, useRef } from "react";
+import ActiveModalCount from "./activeModalCountContext";
+
+/**
+ * Should not yet be part of the public API, as it is exclusively used by the {@link Modal} component.
+ *
+ * @param active Whether the modal is currently open
+ * @param initialValue DO NOT USE - Used only for testing purposes
+ */
+export default function useRegisterModal(active: boolean, initialValue: boolean | null = null) {
+  const { increment, decrement } = useContext(ActiveModalCount);
+  const previousActiveState = useRef<boolean | null>(initialValue);
+  useEffect(() => {
+    if (active) {
+      previousActiveState.current = true;
+      increment();
+    } else {
+      if (previousActiveState.current !== null) {
+        decrement();
+      }
+      previousActiveState.current = false;
+    }
+    return () => {
+      if (previousActiveState.current) {
+        decrement();
+      }
+    };
+  }, [active, decrement, increment]);
+}

package/src/navigation/SecondaryNavigation.tsx

@@ -40,7 +40,7 @@ type CollapsedProps = {
 const SectionContainer = styled.aside`
   position: sticky;
   position: -webkit-sticky; /* Safari */
-  top: 2rem;
+  top: 5rem;
   width: 100%;
 
   @media (max-height: 900px) {