@kitconcept/volto-light-theme 7.8.4 → 7.8.6

package/.changelog.draft

@@ -1,7 +1,7 @@
-## 7.8.4 (2026-04-02)
+## 7.8.6 (2026-06-15)
 
 ### Bugfix
 
-- Reduce sticky menu z-index to prevent overlap issues with mobile navigation. @jackahl 
+- 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,18 @@
 
 <!-- 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
+
+- Fixed a bug that closed the Navigation when scrolling down with the scrollbar. @ TimoBroeskamp 
+
 ## 7.8.4 (2026-04-02)
 
 ### Bugfix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "7.8.4",
+  "version": "7.8.6",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",

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,20 +50,6 @@ const Navigation = ({ pathname }) => {
   const token = useSelector((state) => state.userSession.token, shallowEqual);
   const items = useSelector((state) => state.navigation.items, shallowEqual);
 
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (navigation.current && doesNodeContainClick(navigation.current, 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));
@@ -84,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) => {
@@ -100,6 +105,7 @@ const Navigation = ({ pathname }) => {
     return () => {
       window.removeEventListener('keydown', handleEsc);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (