@eeacms/volto-n2k 1.0.15 → 1.0.17

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

@@ -4,49 +4,88 @@
  */
 
 import React, { useEffect, useContext, useMemo } from 'react';
+import cx from 'classnames';
 import { matchPath, withRouter } from 'react-router';
-import { Container, Sticky } from 'semantic-ui-react';
+import { Link } from 'react-router-dom';
+import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { Portal } from 'react-portal';
+import { Container, Segment, Sticky, Image } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
 import { Anontools } from '@plone/volto/components';
 import { withLocalStorage } from '@eeacms/volto-n2k/hocs';
-import Navigation from '../Navigation/Navigation';
 import { StickyContext } from '@eeacms/volto-bise/components';
+import Navigation from '../Navigation/Navigation';
+import LanguageSelector from '../LanguageSelector/LanguageSelector';
+
+import BISELogo from '@eeacms/volto-bise/customizations/volto/components/theme/Logo/Logo.svg';
 
 function removeTrailingSlash(str) {
   return str.replace(/\/+$/, '');
 }
 
+function matchPaths(paths, pathname) {
+  if (
+    matchPath(pathname, {
+      path: paths,
+      exact: true,
+      strict: false,
+    })
+  ) {
+    return true;
+  }
+  return false;
+}
+
 const Navbar = (props) => {
   const currentLang = props.localStorage.get('N2K_LANGUAGE');
 
   return (
-    <Container>
-      <div className="header-wrapper">
-        <div className="header">
-          <div className="logo-nav-wrapper">
-            <div className="tools-search-wrapper">
-              {currentLang ? (
-                <Navigation
-                  isSticky={props.isSticky}
-                  isRoot={props.isRoot}
-                  isExplorer={props.isExplorer}
-                  pathname={props.pathname}
-                />
-              ) : (
-                ''
+    <div>
+      <Segment basic role="banner" className={cx('header-wrapper')}>
+        <Container>
+          <div className="header">
+            <div className="logo-nav-wrapper">
+              <div className="logo">
+                <Link title="Natura 2000" to="/">
+                  <Image
+                    src={BISELogo}
+                    alt="Biodiversity logo"
+                    title="Biodiversity logo"
+                    height={64}
+                    width={192}
+                  />
+                </Link>
+              </div>
+              <div className="tools-search-wrapper">
+                {currentLang ? (
+                  <Navigation
+                    pathname={props.pathname}
+                    isSticky={props.isSticky}
+                    isRoot={props.isRoot}
+                    isExplorer={props.isExplorer}
+                  />
+                ) : (
+                  ''
+                )}
+              </div>
+              {!props.isSdf && !props.isExplorer && (
+                <div className="mobile hidden tablet hidden computer hidden language-selector-wrapper">
+                  <LanguageSelector navigation={props.navigation} />
+                </div>
               )}
             </div>
           </div>
-        </div>
-      </div>
-      {!props.token && (
-        <Portal node={__CLIENT__ && document.querySelector('#footer_links')}>
-          <Anontools />
-        </Portal>
-      )}
-    </Container>
+          {!props.token && (
+            <Portal
+              node={__CLIENT__ && document.querySelector('#footer_links')}
+            >
+              <Anontools />
+            </Portal>
+          )}
+        </Container>
+      </Segment>
+    </div>
   );
 };
 
@@ -64,16 +103,13 @@ const Header = (props) => {
     [props.pathname],
   );
 
+  const isSdf = useMemo(() => matchPaths(config.settings.sdf, props.pathname), [
+    props.pathname,
+  ]);
+
   const isExplorer = useMemo(
-    () =>
-      (isRoot &&
-        !config.settings.n2k.supportedLanguages.includes(isRoot.params.lang)) ||
-      matchPath(props.pathname, {
-        path: '/natura2000/explore-natura2000/*',
-        exact: true,
-        strict: false,
-      }),
-    [props.pathname, isRoot],
+    () => matchPaths(config.settings.explorer, props.pathname),
+    [props.pathname],
   );
 
   useEffect(() => {
@@ -86,13 +122,14 @@ const Header = (props) => {
     /* eslint-disable-next-line */
   }, []);
 
-  return isRoot || isExplorer ? (
+  return isRoot ? (
     <div className="ui basic segment sticky-header-wrapper">
       <div className="ui sticky">
         <Navbar
           {...props}
           isSticky={false}
           isRoot={isRoot}
+          isSdf={isSdf}
           isExplorer={isExplorer}
         />
       </div>
@@ -113,12 +150,20 @@ const Header = (props) => {
         {...props}
         isSticky={isSticky}
         isRoot={isRoot}
+        isSdf={isSdf}
         isExplorer={isExplorer}
       />
     </Sticky>
   );
 };
 
-export default connect((state) => ({
-  token: state.userSession.token,
-}))(withRouter(withLocalStorage(Header)));
+export default compose(
+  withRouter,
+  withLocalStorage,
+  connect((state) => {
+    return {
+      token: state.userSession.token,
+      navigation: state.navigation,
+    };
+  }),
+)(Header);

package/src/components/theme/LanguageSelector/styles.less

@@ -1,19 +1,37 @@
+.computer.hidden.language-selector-wrapper {
+  .language-selector > .ui.dropdown {
+    display: flex;
+    flex-flow: row-reverse;
+    align-items: center;
+  }
+}
+
 .language-selector {
+  margin-right: 0;
+
   .ui.dropdown {
-    &:not(.button) .text,
-    &:not(.button) .default.text {
-      color: #005248;
+    .divider.text {
+      display: inline-block;
+      color: #005248 !important;
       font-family: OpenSans, 'Raleway', sans-serif;
+      font-weight: 700;
       text-transform: uppercase;
+    }
 
-      &:hover {
-        color: #00a390;
+    .ui.image {
+      display: inline-block;
+      margin-right: 0.25rem;
+    }
+
+    &:hover {
+      .divider.text {
+        color: #00a390 !important;
       }
     }
 
-    .menu {
-      margin-top: 0.5rem;
-      margin-left: -0.6rem;
+    > .menu {
+      position: absolute;
+      top: 30px !important;
 
       .item {
         background: #fff !important;
@@ -22,20 +40,13 @@
           color: #005248;
           font-family: OpenSans, 'Raleway', sans-serif;
           font-size: 1rem;
-          font-weight: bold;
+          font-weight: 700;
           text-transform: uppercase;
         }
 
-        &.active.selected {
-          background: #fff !important;
-
+        &:hover {
           .text {
-            color: #005248;
-          }
-
-          &::before {
-            display: none !important;
-            opacity: 0;
+            color: #00a390;
           }
         }
       }