@eeacms/volto-n2k 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -4,11 +4,23 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [1.0.0](https://github.com/eea/volto-n2k/compare/0.1.15...1.0.0) - 1 November 2022
+### [1.0.2](https://github.com/eea/volto-n2k/compare/1.0.1...1.0.2) - 4 November 2022
 
-#### :nail_care: Enhancements
+#### :hammer_and_wrench: Others
+
+- Remove volto-slate dependency [Miu Razvan - [`a966c5b`](https://github.com/eea/volto-n2k/commit/a966c5b0d79552706683fd9620161b9e5e559e10)]
+### [1.0.1](https://github.com/eea/volto-n2k/compare/1.0.0...1.0.1) - 2 November 2022
+
+#### :hammer_and_wrench: Others
 
-- refactor: use latest volto [Miu Razvan - [`92c4e10`](https://github.com/eea/volto-n2k/commit/92c4e1076c75f2d59042c4075804531b3899fc6b)]
+- Update [Miu Razvan - [`923d3f5`](https://github.com/eea/volto-n2k/commit/923d3f5213dfa930ba7aa6fcd85fd75b7ed709a4)]
+- Fix language selector [Miu Razvan - [`a47cffa`](https://github.com/eea/volto-n2k/commit/a47cffa07bb74b5337e36611dc0c8f037c887430)]
+- Use eea basemap [Miu Razvan - [`1531a7c`](https://github.com/eea/volto-n2k/commit/1531a7ca624bb7c1ad584983b19ecc86fa182340)]
+- bugfix for maps - macos [Claudia Ifrim - [`881d066`](https://github.com/eea/volto-n2k/commit/881d06614e517d1d31da712ae3b7562e375f8664)]
+- change basemap for explore species [Claudia Ifrim - [`cd0f217`](https://github.com/eea/volto-n2k/commit/cd0f217f89743892f2a682f0210a29b6daf93698)]
+- change basemap for explore habitats [Claudia Ifrim - [`43535a8`](https://github.com/eea/volto-n2k/commit/43535a82952c460bb712bdc6c995bf24c404b023)]
+- change basemap for explore sites [Claudia Ifrim - [`dd854c7`](https://github.com/eea/volto-n2k/commit/dd854c75b17854a067ffa863863d0b984db99b1b)]
+## [1.0.0](https://github.com/eea/volto-n2k/compare/0.1.15...1.0.0) - 1 November 2022
 
 #### :hammer_and_wrench: Others
 
@@ -101,6 +113,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Update [razvanMiu - [`42ab50e`](https://github.com/eea/volto-n2k/commit/42ab50e6681a47251d15ac06b836c6f8c27157fa)]
 - Added bubble chart [razvanMiu - [`89fba5e`](https://github.com/eea/volto-n2k/commit/89fba5e5db41aa955ba2d0ed58c9f0042c461504)]
 - Group species by id_eunis in species list [razvanMiu - [`543c957`](https://github.com/eea/volto-n2k/commit/543c9573b53acd8eecc9afbb6ae7beeddba53966)]
+- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`2ca3e4c`](https://github.com/eea/volto-n2k/commit/2ca3e4c092211f92339791d71db81f5b4ca2d562)]
 - update maps - species and habitats distribution maps [Claudia Ifrim - [`ad12eb1`](https://github.com/eea/volto-n2k/commit/ad12eb141907d6f28444f1eafc3f687735d2a68d)]
 - update format for common name and author [Claudia Ifrim - [`26b7a2f`](https://github.com/eea/volto-n2k/commit/26b7a2f3d20c7701b57fb24f39fc7dfeceec3ce8)]
 - update format for species name (common / scientific) [Claudia Ifrim - [`abdedcf`](https://github.com/eea/volto-n2k/commit/abdedcfe645665031dedf050fd2c5cdde8c14a50)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -13,7 +13,6 @@
     "react"
   ],
   "addons": [
-    "volto-slate",
     "@eeacms/volto-datablocks",
     "@eeacms/volto-openlayers-map",
     "@eeacms/volto-resize-helper",
@@ -29,8 +28,7 @@
     "@eeacms/volto-resize-helper": "*",
     "@eeacms/volto-openlayers-map": "*",
     "@eeacms/volto-tabs-block": "*",
-    "@eeacms/volto-bise": "github:eea/volto-bise#develop",
-    "volto-slate": "*",
+    "@eeacms/volto-bise": "*",
     "d3": "^7.6.1",
     "d3-shape": "^3.1.0",
     "react-lazy-load-image-component": "1.5.1",

package/src/actions/hashlink.js

@@ -0,0 +1,13 @@
+export function setHashLink(hash, data = {}) {
+  return {
+    type: 'SET_HASH_LINK',
+    hash,
+    data,
+  };
+}
+
+export function resetHashLink() {
+  return {
+    type: 'RESET_HASH_LINK',
+  };
+}

package/src/actions/index.js

@@ -0,0 +1 @@
+export * from './hashlink';

package/src/components/manage/Blocks/CddaShape/View.jsx

@@ -11,6 +11,7 @@ import './style.less';
 const View = (props) => {
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
+  const [tileWMSSources, setTileWMSSources] = useState([]);
   const { extent, format, proj, style, source } = openlayers;
   const provider_data = props.provider_data || {};
   const { site_code = [] } = provider_data;
@@ -18,6 +19,17 @@ const View = (props) => {
   useEffect(() => {
     if (__SERVER__) return;
     setVectorSource(new source.Vector());
+    setTileWMSSources([
+      new source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMPositronComposite',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
+    ]);
     /* eslint-disable-next-line */
   }, []);
 
@@ -57,10 +69,11 @@ const View = (props) => {
             minZoom: 10,
             zoom: 10,
           }}
+          pixelRatio={1}
           {...options}
         >
           <Layers>
-            <Layer.Tile zIndex={0} />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
             <Layer.Vector
               source={vectorSource}
               style={

package/src/components/manage/Blocks/ExploreHabitats/View.jsx

@@ -12,7 +12,7 @@ import './style.less';
 const View = (props) => {
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
-  const [tileWMSSource, setTileWMSSource] = useState(null);
+  const [tileWMSSources, setTileWMSSources] = useState([]);
   const { extent, format, proj, style, source } = openlayers;
 
   const { results = [], payload = {} } = props.search || {};
@@ -27,7 +27,18 @@ const View = (props) => {
   useEffect(() => {
     if (__SERVER__) return;
     setVectorSource(new source.Vector());
-    setTileWMSSource(
+    setTileWMSSources([
+      new source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMPositronComposite',
+          TILED: true,
+          with: 256,
+          height: 256,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
       new source.TileWMS({
         extent: [
           -3959514.742799999,
@@ -42,7 +53,7 @@ const View = (props) => {
         // Countries have transparency, so do not fade tiles:
         transition: 0,
       }),
-    );
+    ]);
     /* eslint-disable-next-line */
   }, []);
 
@@ -108,11 +119,12 @@ const View = (props) => {
             showFullExtent: true,
             zoom: 5,
           }}
+          pixelRatio={1}
           {...options}
         >
           <Layers>
-            <Layer.Tile zIndex={0} />
-            <Layer.Tile source={tileWMSSource} zIndex={1} />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
+            <Layer.Tile source={tileWMSSources[1]} zIndex={1} />
             <Layer.Vector
               source={vectorSource}
               title="highlightLayer"

package/src/components/manage/Blocks/ExploreSites/View.jsx

@@ -30,7 +30,10 @@ const View = (props) => {
     setTileWMSSources([
       new source.TileWMS({
         url: 'https://gisco-services.ec.europa.eu/maps/service',
-        params: { LAYERS: 'OSMPositronComposite', TILED: true },
+        params: {
+          LAYERS: 'OSMPositronComposite',
+          TILED: true,
+        },
         serverType: 'geoserver',
         transition: 0,
       }),
@@ -111,10 +114,11 @@ const View = (props) => {
             showFullExtent: true,
             zoom: 5,
           }}
+          pixelRatio={1}
           {...options}
         >
           <Layers>
-            <Layer.Tile zIndex={0} />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
             <Layer.Tile source={tileWMSSources[1]} zIndex={1} />
             <Layer.Vector
               source={vectorSource}

package/src/components/manage/Blocks/ExploreSpecies/View.jsx

@@ -12,7 +12,7 @@ import './style.less';
 const View = (props) => {
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
-  const [tileWMSSource, setTileWMSSource] = useState(null);
+  const [tileWMSSources, setTileWMSSources] = useState([]);
   const { extent, format, proj, style, source } = openlayers;
 
   const { results = [], payload = {} } = props.search || {};
@@ -27,7 +27,16 @@ const View = (props) => {
   useEffect(() => {
     if (__SERVER__) return;
     setVectorSource(new source.Vector());
-    setTileWMSSource(
+    setTileWMSSources([
+      new source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMPositronComposite',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
       new source.TileWMS({
         extent: [
           -3690067.3068000004,
@@ -42,7 +51,7 @@ const View = (props) => {
         // Countries have transparency, so do not fade tiles:
         transition: 0,
       }),
-    );
+    ]);
     /* eslint-disable-next-line */
   }, []);
 
@@ -108,11 +117,12 @@ const View = (props) => {
             showFullExtent: true,
             zoom: 5,
           }}
+          pixelRatio={1}
           {...options}
         >
           <Layers>
-            <Layer.Tile zIndex={0} />
-            <Layer.Tile source={tileWMSSource} zIndex={1} />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
+            <Layer.Tile source={tileWMSSources[1]} zIndex={1} />
             <Layer.Vector
               source={vectorSource}
               title="highlightLayer"

package/src/components/manage/Blocks/HabitatDistribution/View.jsx

@@ -11,6 +11,7 @@ import './style.less';
 const View = (props) => {
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
+  const [tileWMSSources, setTileWMSSources] = useState([]);
   const { extent, format, proj, style, source } = openlayers;
   const provider_data = props.provider_data || {};
   const { code_2000 = [] } = provider_data;
@@ -18,6 +19,17 @@ const View = (props) => {
   useEffect(() => {
     if (__SERVER__) return;
     setVectorSource(new source.Vector());
+    setTileWMSSources([
+      new source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMPositronComposite',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
+    ]);
     /* eslint-disable-next-line */
   }, []);
 
@@ -55,10 +67,11 @@ const View = (props) => {
             showFullExtent: true,
             zoom: 5,
           }}
+          pixelRatio={1}
           {...options}
         >
           <Layers>
-            <Layer.Tile zIndex={0} />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
             <Layer.Vector
               source={vectorSource}
               style={

package/src/components/manage/Blocks/HabitatProtectedSites/View.jsx

@@ -11,6 +11,7 @@ import './style.less';
 const View = (props) => {
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
+  const [tileWMSSources, setTileWMSSources] = useState([]);
   const { extent, format, proj, style, source } = openlayers;
   const provider_data = props.provider_data || {};
   const { code_2000 = [] } = provider_data;
@@ -18,6 +19,17 @@ const View = (props) => {
   useEffect(() => {
     if (__SERVER__) return;
     setVectorSource(new source.Vector());
+    setTileWMSSources([
+      new source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMPositronComposite',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
+    ]);
     /* eslint-disable-next-line */
   }, []);
 
@@ -55,10 +67,11 @@ const View = (props) => {
             showFullExtent: true,
             zoom: 5,
           }}
+          pixelRatio={1}
           {...options}
         >
           <Layers>
-            <Layer.Tile zIndex={0} />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
             <Layer.VectorImage
               source={vectorSource}
               style={

package/src/components/manage/Blocks/ImageText/Edit.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import config from '@plone/volto/registry';
 import { SidebarPortal } from '@plone/volto/components';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
-import SlateEditor from 'volto-slate/editor/SlateEditor';
+import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
 import { Editor } from 'slate';
 import getSchema from './schema';
 import cx from 'classnames';

package/src/components/manage/Blocks/ImageText/View.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { UniversalLink } from '@plone/volto/components';
-import { serializeNodes } from 'volto-slate/editor/render';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
 import { Editor } from 'slate';
 import cx from 'classnames';
 import './styles.less';

package/src/components/manage/Blocks/Landing/DefalutView.jsx

@@ -4,7 +4,6 @@ import { generatePath } from 'react-router';
 import { Grid } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 import { withLocalStorage } from '@eeacms/volto-n2k/hocs';
-import LanguageSelector from '@eeacms/volto-n2k/components/theme/LanguageSelector/LanguageSelector';
 import hiker from './images/hiker.webp';
 import { tiles, tileProps, getStyle } from './index';
 
@@ -19,21 +18,6 @@ const DefaultView = (props) => {
       >
         <Grid className="landing-page" container columns="12">
           <Grid.Row>
-            <Grid.Column
-              {...{
-                mobile: 12,
-                tablet: 12,
-                computer: 12,
-                largeScreen: 12,
-                widescreen: 12,
-              }}
-              style={{ zIndex: 1, marginBottom: '1rem' }}
-            >
-              <LanguageSelector
-                navigation={props.navigation}
-                className="landingpage-variation"
-              />
-            </Grid.Column>
             <Grid.Column
               className="landing-page-description"
               widescreen="6"

package/src/components/manage/Blocks/Landing/Edit.jsx

@@ -9,7 +9,6 @@ import { SidebarPortal, UniversalLink } from '@plone/volto/components';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import config from '@plone/volto/registry';
 import settingsSVG from '@plone/volto/icons/settings.svg';
-import LanguageSelector from '@eeacms/volto-n2k/components/theme/LanguageSelector/LanguageSelector';
 import DefaultView from './DefalutView';
 import getSchema from './schema';
 import hiker from './images/hiker.webp';
@@ -100,21 +99,6 @@ const Edit = (props) => {
         >
           <Grid className="landing-page" container columns="12">
             <Grid.Row>
-              <Grid.Column
-                {...{
-                  mobile: 12,
-                  tablet: 12,
-                  computer: 12,
-                  largeScreen: 12,
-                  widescreen: 12,
-                }}
-                style={{ zIndex: 1, marginBottom: '1rem' }}
-              >
-                <LanguageSelector
-                  navigation={props.navigation}
-                  className="landingpage-variation"
-                />
-              </Grid.Column>
               <Grid.Column
                 className="landing-page-description"
                 widescreen="6"

package/src/components/manage/Blocks/NavigationAnchors/View.jsx

@@ -5,8 +5,8 @@ import { Menu, Container, Sticky } from 'semantic-ui-react';
 import qs from 'querystring';
 import cx from 'classnames';
 import { UniversalLink } from '@plone/volto/components';
-import { withHashLink } from 'volto-slate/hooks';
 import { StickyContext } from '@eeacms/volto-bise/components';
+import { withHashLink } from '@eeacms/volto-n2k/hocs';
 import './styles.less';
 
 const formatLink = (str, obj) => {

package/src/components/manage/Blocks/SiteShape/View.jsx

@@ -11,6 +11,7 @@ import './style.less';
 const View = (props) => {
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
+  const [tileWMSSources, setTileWMSSources] = useState([]);
   const { extent, format, proj, style, source } = openlayers;
   const provider_data = props.provider_data || {};
   const { site_code = [] } = provider_data;
@@ -18,6 +19,17 @@ const View = (props) => {
   useEffect(() => {
     if (__SERVER__) return;
     setVectorSource(new source.Vector());
+    setTileWMSSources([
+      new source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMPositronComposite',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
+    ]);
     /* eslint-disable-next-line */
   }, []);
 
@@ -55,10 +67,11 @@ const View = (props) => {
             showFullExtent: true,
             zoom: 5,
           }}
+          pixelRatio={1}
           {...options}
         >
           <Layers>
-            <Layer.Tile zIndex={0} />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
             <Layer.Vector
               source={vectorSource}
               style={

package/src/components/manage/Blocks/SlateLink/render.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { UniversalLink } from '@plone/volto/components';
 import { withRouter } from 'react-router';
 import { useSelector } from 'react-redux';
-import { withHashLink } from 'volto-slate/hooks';
+import { withHashLink } from '@eeacms/volto-n2k/hocs';
 import qs from 'querystring';
 import './styles.less';
 

package/src/components/manage/Blocks/SlateSVG/index.js

@@ -1,5 +1,5 @@
 import { defineMessages } from 'react-intl';
-import { makeInlineElementPlugin } from 'volto-slate/components/ElementEditor';
+import { makeInlineElementPlugin } from '@plone/volto-slate/elementEditor';
 import { SlateSvgSchema } from './schema';
 import { withSlateSvg } from './extensions';
 import { SLATESVG } from './constants';

package/src/components/manage/Blocks/SpeciesDistribution/View.jsx

@@ -11,6 +11,7 @@ import './style.less';
 const View = (props) => {
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
+  const [tileWMSSources, setTileWMSSources] = useState([]);
   const { extent, format, proj, style, source } = openlayers;
   const provider_data = props.provider_data || {};
   const { code_2000 = [] } = provider_data;
@@ -18,6 +19,17 @@ const View = (props) => {
   useEffect(() => {
     if (__SERVER__) return;
     setVectorSource(new source.Vector());
+    setTileWMSSources([
+      new source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMPositronComposite',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
+    ]);
     /* eslint-disable-next-line */
   }, []);
 
@@ -55,10 +67,11 @@ const View = (props) => {
             showFullExtent: true,
             zoom: 5,
           }}
+          pixelRatio={1}
           {...options}
         >
           <Layers>
-            <Layer.Tile zIndex={0} />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
             <Layer.Vector
               source={vectorSource}
               style={

package/src/components/manage/Blocks/SpeciesProtectedSites/View.jsx

@@ -11,6 +11,7 @@ import './style.less';
 const View = (props) => {
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
+  const [tileWMSSources, setTileWMSSources] = useState([]);
   const { extent, format, proj, style, source } = openlayers;
   const provider_data = props.provider_data || {};
   const { code_2000 = [] } = provider_data;
@@ -18,6 +19,17 @@ const View = (props) => {
   useEffect(() => {
     if (__SERVER__) return;
     setVectorSource(new source.Vector());
+    setTileWMSSources([
+      new source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMPositronComposite',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
+    ]);
     /* eslint-disable-next-line */
   }, []);
 
@@ -55,10 +67,11 @@ const View = (props) => {
             showFullExtent: true,
             zoom: 5,
           }}
+          pixelRatio={1}
           {...options}
         >
           <Layers>
-            <Layer.Tile zIndex={0} />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
             <Layer.VectorImage
               source={vectorSource}
               style={

package/src/components/theme/AppExtras/HashLink.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { withRouter } from 'react-router';
+import { withHashLink } from '@eeacms/volto-n2k/hocs';
+
+import config from '@plone/volto/registry';
+
+const scrollToTarget = (target, offsetHeight = 0) => {
+  const bodyRect = document.body.getBoundingClientRect().top;
+  const targetRect = target.getBoundingClientRect().top;
+  const targetPosition = targetRect - bodyRect - offsetHeight;
+
+  return window.scrollTo({
+    top: targetPosition,
+    behavior: 'smooth',
+  });
+};
+
+function HashLink({ history, pathname, hashlink, resetHashLink }) {
+  const { settings } = config;
+  const blacklist = settings.hashlinkBlacklist || [];
+  const id = hashlink.hash;
+  const type = hashlink.data.type || '';
+
+  React.useEffect(() => {
+    const unlisten = history.listen((location) => {
+      if (location.pathname !== pathname) {
+        resetHashLink();
+      }
+    });
+    return () => {
+      unlisten();
+    };
+    /* eslint-disable-next-line */
+  }, []);
+
+  React.useEffect(() => {
+    if (hashlink.counter > 0 && blacklist.indexOf(type) === -1) {
+      const element = document.getElementById(id);
+      const headerWrapper = document.querySelector('.header-wrapper');
+      const offsetHeight =
+        hashlink.data.offsetHeight || headerWrapper?.offsetHeight || 0;
+      if (element) {
+        scrollToTarget(element, offsetHeight);
+      }
+    }
+    /* eslint-disable-next-line */
+  }, [hashlink.counter]);
+
+  return <React.Fragment />;
+}
+
+export default withRouter(withHashLink(HashLink));

package/src/components/theme/AppExtras/index.js

@@ -1,4 +1,5 @@
 import CopyPaste from './CopyPaste';
+import HashLink from './HashLink';
 
 export default (config) => {
   config.settings.appExtras = [
@@ -7,6 +8,10 @@ export default (config) => {
       match: '/**/edit',
       component: CopyPaste,
     },
+    {
+      match: '',
+      component: HashLink,
+    },
   ];
 
   return config;

package/src/components/theme/Header/Header.jsx

@@ -82,13 +82,15 @@ const Header = (props) => {
   }, []);
 
   return isRoot || isExplorer ? (
-    <div className="ui basic segment sticky-header-wrapper" role="banner">
-      <Navbar
-        {...props}
-        isSticky={false}
-        isRoot={isRoot}
-        isExplorer={isExplorer}
-      />
+    <div className="ui basic segment sticky-header-wrapper">
+      <div className="ui sticky">
+        <Navbar
+          {...props}
+          isSticky={false}
+          isRoot={isRoot}
+          isExplorer={isExplorer}
+        />
+      </div>
     </div>
   ) : (
     <Sticky

package/src/components/theme/LanguageSelector/LanguageSelector.jsx

@@ -60,47 +60,6 @@ const LanguageSelector = (props) => {
 
   return (
     <div className={cx('language-selector', props.className)}>
-      {/* <Header.TopDropdownMenu
-        id="language-switcher"
-        className="item"
-        text={`${language.toUpperCase()}`}
-        mobileText={`${language.toUpperCase()}`}
-        icon={
-          <Image src={globeIcon} alt="language dropdown globe icon"></Image>
-        }
-        viewportWidth={width}
-      >
-        <ul
-          className="wrapper language-list"
-          role="listbox"
-          aria-label="language switcher"
-        >
-          {eea.languages.map((item, index) => (
-            <Dropdown.Item
-              as="li"
-              key={index}
-              text={
-                <span>
-                  {item.name}
-                  <span className="country-code">
-                    {item.code.toUpperCase()}
-                  </span>
-                </span>
-              }
-              onClick={() => {
-                const translation = find(translations, {
-                  language: item.code,
-                });
-                const to = translation
-                  ? flattenToAppURL(translation['@id'])
-                  : `/${item.code}`;
-                setLanguage(item.code);
-                history.push(to);
-              }}
-            ></Dropdown.Item>
-          ))}
-        </ul>
-      </Header.TopDropdownMenu> */}
       <Dropdown
         aria-label="Language selector"
         disabled={content.get.loading}
@@ -111,7 +70,8 @@ const LanguageSelector = (props) => {
           <Image src={globeIcon} alt="language dropdown globe icon"></Image>
         }
         options={supportedLanguagesOptions}
-        onChange={(e, data) => {
+        value={currentLang}
+        onChange={(_, data) => {
           const lang = data.value;
           const translation = translations.filter(
             (item) => item.lang === lang,

package/src/components/theme/Navigation/Navigation.jsx

@@ -110,7 +110,6 @@ class Navigation extends Component {
     this.state = {
       isMobileMenuOpen: false,
       isSdf: false,
-      language: this.props.localStorage.get('N2K_LANGUAGE'),
     };
     this.container = React.createRef();
   }
@@ -241,6 +240,8 @@ class Navigation extends Component {
       ...(this.props.route_parameters || {}),
       ...qs.parse(this.props.location.search.replace('?', '')),
     };
+    const currentLang = this.props.localStorage.get('N2K_LANGUAGE');
+
     return (
       <nav
         className={cx('navigation', this.props.className || '')}
@@ -275,7 +276,7 @@ class Navigation extends Component {
             />
           </div>
           <Menu.Item className="home-button logo">
-            <Link title="Natura 2000" to={`/natura2000/${this.state.language}`}>
+            <Link title="Natura 2000" to={`/natura2000/${currentLang}`}>
               <Icon name={n2kLogo} size={44} />
             </Link>
           </Menu.Item>

package/src/hocs/index.js

@@ -2,5 +2,6 @@ import useResizeObserver from './useResizeObserver';
 
 import withScreenSize from './withScreenSize';
 import withLocalStorage from './withLocalStorage';
+import withHashLink from './withHashLink';
 
-export { useResizeObserver, withScreenSize, withLocalStorage };
+export { useResizeObserver, withScreenSize, withLocalStorage, withHashLink };

package/src/hocs/withHashLink.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { setHashLink, resetHashLink } from '@eeacms/volto-n2k/actions/hashlink';
+
+export default function withHashLink(WrappedComponent) {
+  return connect(
+    (state) => {
+      return {
+        hashlink: state.hashlink,
+      };
+    },
+    { setHashLink, resetHashLink },
+  )((props) => {
+    return (
+      <WrappedComponent
+        {...props}
+        setHashLink={props.setHashLink}
+        resetHashLink={props.resetHashLink}
+      />
+    );
+  });
+}

package/src/index.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import loadable from '@loadable/component';
 
-import localStorage from './store';
+import { hashlink, localStorage } from './reducers';
 
 import installAppExtras from './components/theme/AppExtras';
 
@@ -39,7 +39,7 @@ import installSpeciesProtectedSites from './components/manage/Blocks/SpeciesProt
 import installStackedBarChart from './components/manage/Blocks/StackedBarChart';
 import installTilesImages from './components/manage/Blocks/TilesImages';
 
-import { LINK } from 'volto-slate/constants';
+import { LINK } from '@plone/volto-slate/constants';
 
 import { Header, Footer } from '@eeacms/volto-n2k/components';
 
@@ -64,6 +64,7 @@ const applyConfig = (config) => {
   config.addonReducers = {
     ...config.addonReducers,
     localStorage,
+    hashlink,
   };
 
   config.settings.persistentReducers.push('localStorage');
@@ -133,7 +134,6 @@ const applyConfig = (config) => {
 
   return [
     installAppExtras,
-
     installBodyClass,
     installBubbleChart,
     installCarouselHorizontal,

package/src/reducers/hashlink.js

@@ -0,0 +1,27 @@
+const initialState = {
+  hash: null,
+  data: {},
+  counter: 0,
+};
+
+export default function hashlink(state = initialState, action = {}) {
+  const { type, hash, data = {} } = action;
+  switch (type) {
+    case 'SET_HASH_LINK':
+      return {
+        ...state,
+        hash,
+        data,
+        counter: state.counter + 1,
+      };
+    case 'RESET_HASH_LINK':
+      return {
+        ...state,
+        hash: null,
+        data: {},
+        counter: 0,
+      };
+    default:
+      return state;
+  }
+}

package/src/reducers/index.js

@@ -0,0 +1,2 @@
+export { default as hashlink } from './hashlink';
+export { default as localStorage } from './store';