diff --git a/src/customizations/volto/components/theme/MultilingualRedirector/MultilingualRedirector.jsx b/src/customizations/volto/components/theme/MultilingualRedirector/MultilingualRedirector.jsx
index 610f4d2..6cc2dbd 100644
--- a/src/customizations/volto/components/theme/MultilingualRedirector/MultilingualRedirector.jsx
+++ b/src/customizations/volto/components/theme/MultilingualRedirector/MultilingualRedirector.jsx
@@ -16,7 +16,6 @@ if (settings) {
}
const MultilingualRedirector = props => {
- console.log('here working', props)
const { pathname, children } = props;
const currentLanguage = cookie.load('lang') || settings.defaultLanguage;
const redirectToLanguage = settings.supportedLanguages.includes(
diff --git a/src/customizations/volto/components/theme/Navigation/Navigation.jsx b/src/customizations/volto/components/theme/Navigation/Navigation.jsx
index 374ffd6..ae1b521 100644
--- a/src/customizations/volto/components/theme/Navigation/Navigation.jsx
+++ b/src/customizations/volto/components/theme/Navigation/Navigation.jsx
@@ -3,11 +3,12 @@
* @module components/theme/Navigation/Navigation
*/
-import React, { Component } from 'react';
+import React, { useState, useEffect, useLayoutEffect } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { NavLink } from 'react-router-dom';
+import { isMatch } from 'lodash';
import { defineMessages, injectIntl } from 'react-intl';
import { Menu } from 'semantic-ui-react';
import cx from 'classnames';
@@ -33,196 +34,167 @@ const messages = defineMessages({
* @class Navigation
* @extends Component
*/
-class Navigation extends Component {
- /**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
- static propTypes = {
- getNavigation: PropTypes.func.isRequired,
- pathname: PropTypes.string.isRequired,
- items: PropTypes.arrayOf(
- PropTypes.shape({
- title: PropTypes.string,
- url: PropTypes.string,
- }),
- ).isRequired,
- lang: PropTypes.string.isRequired,
- };
+const Navigation = props => {
+ const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+ const [tabsSection, setTabsSection] = useState(
+ __CLIENT__ && document.querySelector('.tabs.section-tabs'),
+ );
+ const [childrenTabsSection, setChildrenTabsSection] = useState(
+ __CLIENT__ && document.querySelector('.page-document-sidebar .tabs'),
+ );
- /**
- * Constructor
- * @method constructor
- * @param {Object} props Component properties
- * @constructs Navigation
- */
- constructor(props) {
- super(props);
- this.toggleMobileMenu = this.toggleMobileMenu.bind(this);
- this.closeMobileMenu = this.closeMobileMenu.bind(this);
- this.state = {
- isMobileMenuOpen: false,
- };
- }
+ useEffect(() => {
+ props.getNavigation(getBaseUrl(props.pathname), 3);
+ }, [props]);
- /**
- * Component will mount
- * @method componentWillMount
- * @returns {undefined}
- */
- UNSAFE_componentWillMount() {
- if (!settings.contentExpand.includes('navigation'))
- this.props.getNavigation(getBaseUrl(this.props.pathname), 3);
- }
-
- /**
- * Component will receive props
- * @method componentWillReceiveProps
- * @param {Object} nextProps Next properties
- * @returns {undefined}
- */
- UNSAFE_componentWillReceiveProps(nextProps) {
- if (
- !settings.contentExpand.includes('navigation') &&
- nextProps.pathname !== this.props.pathname
- ) {
- this.props.getNavigation(getBaseUrl(nextProps.pathname), 3);
+ useLayoutEffect(() => {
+ if (__CLIENT__) {
+ setTabsSection(document.querySelector('.tabs.section-tabs'));
+ }
+ if (__CLIENT__) {
+ setChildrenTabsSection(
+ document.querySelector('.page-document-sidebar .tabs'),
+ );
}
- }
+ },[document.querySelector('.page-document-sidebar .tabs'), document.querySelector('.tabs.section-tabs')]);
+
+ const isActive = url => {
+ return (
+ (url === '' && props.pathname === '/') ||
+ (url !== '' && isMatch(props.pathname.split('/'), url.split('/')))
+ );
+ };
/**
* Toggle mobile menu's open state
* @method toggleMobileMenu
* @returns {undefined}
*/
- toggleMobileMenu() {
- this.setState({ isMobileMenuOpen: !this.state.isMobileMenuOpen });
- }
+ const toggleMobileMenu = () => {
+ setIsMobileMenuOpen(!isMobileMenuOpen);
+ };
/**
* Close mobile menu
* @method closeMobileMenu
* @returns {undefined}
*/
- closeMobileMenu() {
- if (!this.state.isMobileMenuOpen) {
+ const closeMobileMenu = () => {
+ if (!isMobileMenuOpen) {
return;
}
- this.setState({ isMobileMenuOpen: false });
- }
+ setIsMobileMenuOpen(false);
+ };
/**
* Render method.
* @method render
* @returns {string} Markup for the component.
*/
- render() {
- const { lang } = this.props;
- console.log('navigation', this.props.items);
+ const { lang } = props;
- return (
-
- );
- }
-}
+
+ ) : (
+ ''
+ )}
+
+ ))
+ : ''}
+
+ ) : (
+
+ {item.title}
+
+ ),
+ )}
+
+
+ );
+};
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+Navigation.propTypes = {
+ getNavigation: PropTypes.func.isRequired,
+ pathname: PropTypes.string.isRequired,
+ items: PropTypes.arrayOf(
+ PropTypes.shape({
+ title: PropTypes.string,
+ url: PropTypes.string,
+ }),
+ ).isRequired,
+ lang: PropTypes.string.isRequired,
+};
export default compose(
injectIntl,