@kitconcept/volto-light-theme 7.8.5 → 7.8.6

package/.changelog.draft

@@ -1,7 +1,7 @@
-## 7.8.5 (2026-05-11)
+## 7.8.6 (2026-06-15)
 
 ### Bugfix
 
-- Fixed a bug that closed the Navigation when scrolling down with the scrollbar. @ TimoBroeskamp 
+- refactor closing logic for fatnav to ignore all clicks on scrollbar @jackahl [#834](https://github.com/kitconcept/volto-light-theme/pull/834)
 
 

package/CHANGELOG.md

@@ -8,6 +8,12 @@
 
 <!-- towncrier release notes start -->
 
+## 7.8.6 (2026-06-15)
+
+### Bugfix
+
+- refactor closing logic for fatnav to ignore all clicks on scrollbar @jackahl [#834](https://github.com/kitconcept/volto-light-theme/pull/834)
+
 ## 7.8.5 (2026-05-11)
 
 ### Bugfix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "7.8.5",
+  "version": "7.8.6",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -45,7 +45,7 @@
     "release-it": "^19.0.3",
     "typescript": "^5.7.3",
     "vitest": "^3.1.2",
-    "@plone/types": "2.0.0-alpha.18"
+    "@plone/types": "1.6.0"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",

package/src/components/Navigation/Navigation.jsx

@@ -1,6 +1,6 @@
 // SemanticUI-free pre-@plone/components
 
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
@@ -50,34 +50,6 @@ const Navigation = ({ pathname }) => {
   const token = useSelector((state) => state.userSession.token, shallowEqual);
   const items = useSelector((state) => state.navigation.items, shallowEqual);
 
-  // this function doesn't close the navigation when clicking the scrollbar
-  const doesScrollbarContainClick = (e) => {
-    const clickedVerticalScrollbar =
-      e.clientX >= document.documentElement.clientWidth &&
-      e.clientX <= window.innerWidth;
-
-    const clickedHorizontalScrollbar =
-      e.clientY >= document.documentElement.clientHeight &&
-      e.clientY <= window.innerHeight;
-
-    return clickedVerticalScrollbar || clickedHorizontalScrollbar;
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (navigation.current && doesNodeContainClick(navigation.current, e))
-        return;
-      if (doesScrollbarContainClick(e)) return;
-      closeMenu();
-    };
-
-    document.addEventListener('mousedown', handleClickOutside, false);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside, false);
-    };
-  }, []);
-
   useEffect(() => {
     if (!hasApiExpander('navigation', getBaseUrl(pathname))) {
       dispatch(getNavigation(getBaseUrl(pathname), config.settings.navDepth));
@@ -98,10 +70,29 @@ const Navigation = ({ pathname }) => {
     }
   };
 
-  const closeMenu = (index) => {
+  const closeMenu = useCallback(() => {
     setDesktopMenuOpen(null);
     setCurrentOpenIndex(null);
-  };
+  }, []);
+
+  const handleClickOutside = useCallback(
+    (e) => {
+      if (
+        (navigation.current && doesNodeContainClick(navigation.current, e)) ||
+        e.target.parentElement === null
+      )
+        return;
+      closeMenu();
+    },
+    [closeMenu],
+  );
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside, false);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside, false);
+    };
+  }, [handleClickOutside]);
 
   useEffect(() => {
     const handleEsc = (event) => {
@@ -114,6 +105,7 @@ const Navigation = ({ pathname }) => {
     return () => {
       window.removeEventListener('keydown', handleEsc);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (