diff --git a/src/components/theme/Header/HeaderNavigation.jsx b/src/components/theme/Header/HeaderNavigation.jsx
index 40e25fd..4c052f8 100644
--- a/src/components/theme/Header/HeaderNavigation.jsx
+++ b/src/components/theme/Header/HeaderNavigation.jsx
@@ -3,10 +3,18 @@
import React from 'react';
import { useHistory } from 'react-router-dom';
import { Link } from 'react-router-dom';
+import useWindowSize from '../../../helpers/useWindowSize';
+import downIcon from '@plone/volto/icons/down-key.svg';
+import closeIcon from '@plone/volto/icons/clear.svg';
+import { Icon } from '@plone/volto/components';
const MobileNav = ({ items, activeItem }) => {
const [expanded, setExpanded] = React.useState(false);
+ React.useEffect(() => {
+ setExpanded(false);
+ }, [activeItem]);
+
return (
{expanded ? (
@@ -21,6 +29,14 @@ const MobileNav = ({ items, activeItem }) => {
}`}
>
{item.title}
+ {item.url === activeItem.url && (
+ setExpanded(false)}
+ />
+ )}
))}
@@ -32,6 +48,12 @@ const MobileNav = ({ items, activeItem }) => {
className="lead-nav-item active-mobile-nav"
>
{activeItem.title}
+ setExpanded(true)}
+ />
)}
@@ -43,23 +65,24 @@ const HeaderNavigation = ({ items }) => {
const [activeItem, setActiveItem] = React.useState('');
const [isMobile, setIsMobile] = React.useState(false);
const history = useHistory();
+ const size = useWindowSize();
React.useEffect(() => {
+ const { width } = size;
const activeRouteDetected = items.filter(
(item) => item.url === history.location.pathname,
);
if (activeRouteDetected && activeRouteDetected.length > 0) {
setActiveItem(activeRouteDetected[0]);
}
- const width = window && window.innerWidth ? window.innerWidth : '';
- if (width && width <= 600) {
+ if (width && width <= 768) {
setIsMobile(true);
}
- if (width && width > 600) {
+ if (width && width > 768) {
setIsMobile(false);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [items]);
+ }, [items, size]);
return (
diff --git a/src/helpers/useWindowSize.jsx b/src/helpers/useWindowSize.jsx
new file mode 100644
index 0000000..3753cc8
--- /dev/null
+++ b/src/helpers/useWindowSize.jsx
@@ -0,0 +1,35 @@
+import { useState, useEffect } from 'react';
+
+export default function useWindowSize() {
+ // Initialize state with undefined width/height so server and client renders match
+ // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+ const [windowSize, setWindowSize] = useState({
+ width: undefined,
+ height: undefined,
+ });
+ useEffect(() => {
+ // Handler to call on window resize
+ function handleResize() {
+ // Set window width/height to state
+ if (typeof window !== 'undefined') {
+ setWindowSize({
+ width: window.innerWidth,
+ height: window.innerHeight,
+ });
+ }
+ }
+ // Add event listener
+ if (typeof window !== 'undefined') {
+ window.addEventListener('resize', handleResize);
+ handleResize();
+ }
+ // Call handler right away so state gets updated with initial window size
+ // Remove event listener on cleanup
+ return () => {
+ if (typeof window !== 'undefined') {
+ window.removeEventListener('resize', handleResize);
+ }
+ };
+ }, []); // Empty array ensures that effect is only run on mount
+ return windowSize;
+}
diff --git a/theme/site/globals/site.overrides b/theme/site/globals/site.overrides
index b73abe6..af99dcf 100644
--- a/theme/site/globals/site.overrides
+++ b/theme/site/globals/site.overrides
@@ -123,6 +123,8 @@ body.has-toolbar {
height: 600px !important;
}
+
+
.lead-mobile-nav {
position: absolute;
z-index: 1;
@@ -142,6 +144,7 @@ body.has-toolbar {
}
.lead-nav-item {
+ position: relative;
padding: 12px 20px;
margin: 2px 0;
background-color: #f7f7f5;
@@ -153,6 +156,17 @@ body.has-toolbar {
font-weight: bold;
text-align: center;
text-decoration: none;
+
+ .lead-nav-icon {
+ fill: #554535 !important;
+ position: absolute;
+ right: 10px;
+ top: 6px;
+ }
+
+ .lead-nav-icon::hover{
+ fill: #cd4200 !important;
+ }
}
.lead-nav-item:hover {