@eeacms/volto-n2k 1.0.14 → 1.0.16

package/CHANGELOG.md

@@ -4,11 +4,21 @@ 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.14](https://github.com/eea/volto-n2k/compare/1.0.13...1.0.14) - 16 February 2023
+### [1.0.16](https://github.com/eea/volto-n2k/compare/1.0.15...1.0.16) - 22 February 2023
+
+#### :hammer_and_wrench: Others
+
+- stylelint fix [Miu Razvan - [`4b97345`](https://github.com/eea/volto-n2k/commit/4b973453416261c5a9e00a8860f3dd4f1072b815)]
+- update styles [Miu Razvan - [`ba5cfaf`](https://github.com/eea/volto-n2k/commit/ba5cfafe4fb6a25937ea96501da6ee7e94001237)]
+- update styles [Miu Razvan - [`4fabfe2`](https://github.com/eea/volto-n2k/commit/4fabfe2d4c94bef263d59e806a4ad242fbc08963)]
+### [1.0.15](https://github.com/eea/volto-n2k/compare/1.0.14...1.0.15) - 17 February 2023
 
 #### :hammer_and_wrench: Others
 
-- update [Miu Razvan - [`ceef220`](https://github.com/eea/volto-n2k/commit/ceef2206cb2be9b74d646861bbbc0a7639df3f99)]
+- fix prettier [Claudia Ifrim - [`aa0d6fe`](https://github.com/eea/volto-n2k/commit/aa0d6fee19dcf0fc83dae5daa09e615fdeaa2b53)]
+- fix prettier [Claudia Ifrim - [`726a157`](https://github.com/eea/volto-n2k/commit/726a157f0467977ccb970e8a2dc583b25a6de37f)]
+### [1.0.14](https://github.com/eea/volto-n2k/compare/1.0.13...1.0.14) - 16 February 2023
+
 ### [1.0.13](https://github.com/eea/volto-n2k/compare/1.0.12...1.0.13) - 16 February 2023
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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

@@ -7,10 +7,9 @@ const View = (props) => {
   const {
     code_2000 = [],
     // habitat_description = [],
-    habitat_prioriy = [],
     habitat_type = [],
     // number_countries = [],
-    // number_sites = [],
+    number_sites = [],
     scientific_name = [],
   } = provider_data;
 
@@ -22,12 +21,16 @@ const View = (props) => {
           <div className="habitat-metadata">
             <h2 className="name">{scientific_name[0]}</h2>
             <p className="info">
-              {habitat_type[0]} {code_2000[0]}
+              {habitat_type[0]} habitat code {code_2000[0]}
             </p>
-            {habitat_prioriy[0] ? (
-              <p className="info">Priority habitat {habitat_prioriy[0]}</p>
-            ) : (
-              ''
+            <br />
+            {number_sites[0] && (
+              <>
+                <h3 style={{ marginBottom: '0.15rem' }}>{number_sites[0]}</h3>
+                <h4 className="radjhan-normal">
+                  NATURA 2000 SITES PROTECTING THIS HABITAT
+                </h4>
+              </>
             )}
           </div>
         </div>

package/src/components/manage/Blocks/HabitatsBanner/style.less

@@ -32,6 +32,26 @@ div#view .habitat-banner-details .ui.container > * {
         text-transform: uppercase;
       }
 
+      h3 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+        font-size: 32px;
+        line-height: 32px;
+        text-transform: uppercase;
+      }
+
+      h4 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+        font-size: 32px;
+        line-height: 32px;
+        text-transform: uppercase;
+      }
+
       .info {
         font-family: 'RajdhaniR', 'Helvetica Neue', Arial, Helvetica, sans-serif;
         font-size: 18px;

package/src/components/manage/Blocks/NavigationAnchors/styles.less

@@ -25,6 +25,8 @@ div#view .ui.container > .sticky-navigation-anchors {
 }
 
 .navigation-anchors {
+  display: flex;
+  align-items: center;
   padding: 1rem 0;
 
   .ui.container > .ui.menu {

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

@@ -81,7 +81,7 @@ const View = (props) => {
                       >
                         <Link
                           className="description"
-                          to={`/natura2000/habitats/h/${item.code_2000}`}
+                          to={`/habitats/${item.code_2000}`}
                         >
                           {item.habitat_description} ({item.code_2000})
                         </Link>

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

@@ -168,10 +168,7 @@ const View = (props) => {
                     >
                       <div className="metadata">
                         <div className="name">
-                          <Link
-                            as="h3"
-                            to={`/natura2000/species/s/${speciesData.id_eunis}`}
-                          >
+                          <Link as="h3" to={`/species/${speciesData.id_eunis}`}>
                             {speciesData.common_name
                               ? speciesData.common_name + ' '
                               : ''}

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

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-target-blank */
 import React from 'react';
 import { Container } from 'semantic-ui-react';
 import loadable from '@loadable/component';
@@ -15,9 +16,10 @@ const View = (props) => {
   const {
     author = [],
     common_name = [],
-    common_name_list = [],
+    code_2000 = [],
     id_eunis = [],
     license = [],
+    number_sites = [],
     picture_url = [],
     scientific_name = [],
     source = [],
@@ -47,15 +49,28 @@ const View = (props) => {
       <Container>
         <div className="species-details">
           <div className="species-metadata">
-            <h2 className="name">{scientific_name[0]}</h2>
-            <p className="info">
-              {common_name[0] ? common_name[0] + ' - ' : ''} {author[0]}
-            </p>
-            {common_name_list[0] ? (
-              <p className="info">Common names: {common_name_list[0]}</p>
-            ) : (
-              ''
+            <h2 className="name">
+              {common_name[0] ? common_name[0] + ' - ' : ''}{' '}
+              <span style={{ fontStyle: 'italic' }}>{scientific_name[0]}</span>
+            </h2>
+            {author[0] && (
+              <p
+                className="info radjhan-bold"
+                style={{ marginBottom: '0.15rem' }}
+              >
+                {author[0]}
+              </p>
+            )}
+            {code_2000[0] && (
+              <p className="info">Natura 2000 species code {code_2000[0]}</p>
+            )}
+            <br />
+            {number_sites[0] && (
+              <h3 style={{ marginBottom: '0.15rem' }}>{number_sites[0]}</h3>
             )}
+            <h4 className="radjhan-normal">
+              NATURA 2000 SITES PROTECTING THIS SPECIES
+            </h4>
           </div>
           <div
             className={cx('species-pictures', {
@@ -99,6 +114,14 @@ const View = (props) => {
                 />
               </div>
             )}
+            <div className="find-image">
+              <a
+                href={`http://images.google.com/images?q=${scientific_name[0]}`}
+                target="_blank"
+              >
+                Find image on the web
+              </a>
+            </div>
           </div>
         </div>
       </Container>

package/src/components/manage/Blocks/SpeciesBanner/style.less

@@ -30,6 +30,26 @@ div#view .species-banner-details .ui.container > * {
         text-transform: uppercase;
       }
 
+      h3 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+        font-size: 32px;
+        line-height: 32px;
+        text-transform: uppercase;
+      }
+
+      h4 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+        font-size: 32px;
+        line-height: 32px;
+        text-transform: uppercase;
+      }
+
       .info {
         margin-bottom: 1rem;
         font-family: 'RajdhaniR', 'Helvetica Neue', Arial, Helvetica, sans-serif;
@@ -100,6 +120,15 @@ div#view .species-banner-details .ui.container > * {
           height: fit-content;
         }
       }
+
+      .find-image {
+        padding: 0.25rem 1rem;
+        text-align: left;
+
+        a {
+          color: #fff;
+        }
+      }
     }
   }
 

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;
           }
         }
       }

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

@@ -10,7 +10,7 @@ import { compose } from 'redux';
 import { matchPath, withRouter } from 'react-router';
 import { Link } from 'react-router-dom';
 import { defineMessages, injectIntl } from 'react-intl';
-import { Menu, Dropdown, Image } from 'semantic-ui-react';
+import { Menu, Dropdown } from 'semantic-ui-react';
 import cx from 'classnames';
 import {
   getBaseUrl,
@@ -23,7 +23,6 @@ import { getNavigation } from '@plone/volto/actions';
 import config from '@plone/volto/registry';
 import { withLocalStorage } from '@eeacms/volto-n2k/hocs';
 import LanguageSelector from '../LanguageSelector/LanguageSelector';
-import BISELogo from '@eeacms/volto-bise/customizations/volto/components/theme/Logo/Logo.svg';
 
 const dropdownBlacklist = ['/natura2000'];
 
@@ -248,7 +247,7 @@ class Navigation extends Component {
         className={cx('navigation', this.props.className || '')}
         ref={this.container}
       >
-        <div className="mobile only">
+        <div className="mobile only tablet only computer only">
           <Hamburger
             {...this.props}
             isMobileMenuOpen={this.state.isMobileMenuOpen}
@@ -263,30 +262,14 @@ class Navigation extends Component {
             open: this.state.isMobileMenuOpen,
             'is-sdf': this.state.isSdf,
             'is-sticky': this.state.isSdf || this.props.isSticky,
-            'mobile hidden': !this.state.isMobileMenuOpen,
-            'mobile only': this.state.isMobileMenuOpen,
+            'mobile hidden tablet hidden computer hidden': !this.state
+              .isMobileMenuOpen,
+            'mobile only tablet only computer only': this.state
+              .isMobileMenuOpen,
           })}
           onClick={this.closeMobileMenu}
           onBlur={() => this.closeMobileMenu}
         >
-          <div className="mobile only">
-            <Hamburger
-              {...this.props}
-              isMobileMenuOpen={this.state.isMobileMenuOpen}
-              toggleMobileMenu={this.toggleMobileMenu}
-            />
-          </div>
-          <Menu.Item className="home-button">
-            <Link title="Natura 2000" to="/">
-              <Image
-                src={BISELogo}
-                alt="Biodiversity logo"
-                title="Biodiversity logo"
-                height={64}
-                width={192}
-              />
-            </Link>
-          </Menu.Item>
           {this.state.isSdf ? (
             <>
               <button
@@ -320,228 +303,159 @@ class Navigation extends Component {
             ''
           )}
 
-          {this.props.isRoot &&
-            this.props.biseItems
-              .filter((item) => !['/natura2000'].includes(item.url))
-              .map((item) => {
-                const flatUrl = flattenToAppURL(item.url);
-                const itemID = item.title.split(' ').join('-').toLowerCase();
-                return item.items &&
-                  item.items.length &&
-                  !dropdownBlacklist.includes(item.url) ? (
-                  <Dropdown
-                    id={itemID}
-                    className={
-                      this.isActive(flatUrl)
-                        ? 'item firstLevel menuActive'
-                        : 'item firstLevel'
-                    }
-                    key={flatUrl}
-                    trigger={
-                      <Link to={flatUrl === '' ? '/' : flatUrl} key={flatUrl}>
-                        {item.title}
-                      </Link>
-                    }
-                    item
-                    simple
-                  >
-                    {item.title === 'Countries' ? (
-                      <Dropdown.Menu>
-                        <div className="submenu-wrapper">
-                          <div className="submenu countries-submenu">
-                            {item.items.map((subsubitem) => {
-                              const flatSubSubUrl = flattenToAppURL(
-                                subsubitem.url,
-                              );
-                              return (
-                                <Link
-                                  to={
-                                    flatSubSubUrl === '' ? '/' : flatSubSubUrl
-                                  }
-                                  title={subsubitem.title}
-                                  key={flatSubSubUrl}
-                                  className={
-                                    this.isActive(flatSubSubUrl)
-                                      ? 'item thirdLevel menuActive'
-                                      : 'item thirdLevel'
-                                  }
-                                >
-                                  {subsubitem.title}
-                                </Link>
-                              );
-                            })}
+          {(this.props.isRoot || this.props.isExplorer) && (
+            <>
+              {this.props.biseItems
+                .filter((item) => !['/natura2000'].includes(item.url))
+                .map((item) => {
+                  const flatUrl = flattenToAppURL(item.url);
+                  const itemID = item.title.split(' ').join('-').toLowerCase();
+                  return item.items &&
+                    item.items.length &&
+                    !dropdownBlacklist.includes(item.url) ? (
+                    <Dropdown
+                      id={itemID}
+                      className={
+                        this.isActive(flatUrl)
+                          ? 'item firstLevel menuActive'
+                          : 'item firstLevel'
+                      }
+                      key={flatUrl}
+                      trigger={
+                        <Link to={flatUrl === '' ? '/' : flatUrl} key={flatUrl}>
+                          {item.title}
+                        </Link>
+                      }
+                      item
+                      simple
+                    >
+                      {item.title === 'Countries' ? (
+                        <Dropdown.Menu>
+                          <div className="submenu-wrapper">
+                            <div className="submenu countries-submenu">
+                              {item.items.map((subsubitem) => {
+                                const flatSubSubUrl = flattenToAppURL(
+                                  subsubitem.url,
+                                );
+                                return (
+                                  <Link
+                                    to={
+                                      flatSubSubUrl === '' ? '/' : flatSubSubUrl
+                                    }
+                                    title={subsubitem.title}
+                                    key={flatSubSubUrl}
+                                    className={
+                                      this.isActive(flatSubSubUrl)
+                                        ? 'item thirdLevel menuActive'
+                                        : 'item thirdLevel'
+                                    }
+                                  >
+                                    {subsubitem.title}
+                                  </Link>
+                                );
+                              })}
+                            </div>
                           </div>
-                        </div>
-                      </Dropdown.Menu>
-                    ) : (
-                      <Dropdown.Menu>
-                        {item.items.map((subitem) => {
-                          const flatSubUrl = flattenToAppURL(subitem.url);
-                          const subItemID = subitem.title
-                            .split(' ')
-                            .join('-')
-                            .toLowerCase();
-                          return (
-                            <Dropdown.Item key={flatSubUrl}>
-                              <div className="secondLevel-wrapper">
-                                <Link
-                                  id={subItemID}
-                                  to={flatSubUrl === '' ? '/' : flatSubUrl}
-                                  key={flatSubUrl}
-                                  className={
-                                    this.isActive(flatSubUrl)
-                                      ? 'item secondLevel menuActive'
-                                      : 'item secondLevel'
-                                  }
-                                >
-                                  {subitem.title}
-                                </Link>
-                              </div>
-                              {subitem.items && (
-                                <div className="submenu-wrapper">
-                                  <div className="submenu">
-                                    {subitem.items.map((subsubitem) => {
-                                      const flatSubSubUrl = flattenToAppURL(
-                                        subsubitem.url,
-                                      );
-                                      return (
-                                        <Link
-                                          to={
-                                            flatSubSubUrl === ''
-                                              ? '/'
-                                              : flatSubSubUrl
-                                          }
-                                          title={subsubitem.title}
-                                          key={flatSubSubUrl}
-                                          className={
-                                            this.isActive(flatSubSubUrl)
-                                              ? 'item thirdLevel menuActive'
-                                              : 'item thirdLevel'
-                                          }
-                                        >
-                                          {subsubitem.title}
-                                        </Link>
-                                      );
-                                    })}
-                                  </div>
+                        </Dropdown.Menu>
+                      ) : (
+                        <Dropdown.Menu>
+                          {item.items.map((subitem) => {
+                            const flatSubUrl = flattenToAppURL(subitem.url);
+                            const subItemID = subitem.title
+                              .split(' ')
+                              .join('-')
+                              .toLowerCase();
+                            return (
+                              <Dropdown.Item key={flatSubUrl}>
+                                <div className="secondLevel-wrapper">
+                                  <Link
+                                    id={subItemID}
+                                    to={flatSubUrl === '' ? '/' : flatSubUrl}
+                                    key={flatSubUrl}
+                                    className={
+                                      this.isActive(flatSubUrl)
+                                        ? 'item secondLevel menuActive'
+                                        : 'item secondLevel'
+                                    }
+                                  >
+                                    {subitem.title}
+                                  </Link>
                                 </div>
-                              )}
-                            </Dropdown.Item>
-                          );
-                        })}
-                      </Dropdown.Menu>
-                    )}
-                  </Dropdown>
-                ) : (
-                  <Link
-                    to={flatUrl === '' ? '/' : flatUrl}
-                    key={flatUrl}
-                    className={
-                      this.isActive(flatUrl)
-                        ? 'item menuActive firstLevel'
-                        : 'item firstLevel'
-                    }
-                  >
-                    {item.title}
-                  </Link>
-                );
-              })}
+                                {subitem.items && (
+                                  <div className="submenu-wrapper">
+                                    <div className="submenu">
+                                      {subitem.items.map((subsubitem) => {
+                                        const flatSubSubUrl = flattenToAppURL(
+                                          subsubitem.url,
+                                        );
+                                        return (
+                                          <Link
+                                            to={
+                                              flatSubSubUrl === ''
+                                                ? '/'
+                                                : flatSubSubUrl
+                                            }
+                                            title={subsubitem.title}
+                                            key={flatSubSubUrl}
+                                            className={
+                                              this.isActive(flatSubSubUrl)
+                                                ? 'item thirdLevel menuActive'
+                                                : 'item thirdLevel'
+                                            }
+                                          >
+                                            {subsubitem.title}
+                                          </Link>
+                                        );
+                                      })}
+                                    </div>
+                                  </div>
+                                )}
+                              </Dropdown.Item>
+                            );
+                          })}
+                        </Dropdown.Menu>
+                      )}
+                    </Dropdown>
+                  ) : (
+                    <Link
+                      to={flatUrl === '' ? '/' : flatUrl}
+                      key={flatUrl}
+                      className={
+                        this.isActive(flatUrl)
+                          ? 'item menuActive firstLevel'
+                          : 'item firstLevel'
+                      }
+                    >
+                      {item.title}
+                    </Link>
+                  );
+                })}
+            </>
+          )}
 
-          {(!this.state.isSdf && !this.props.isRoot) || this.props.isExplorer
+          {!this.state.isSdf && !this.props.isExplorer && !this.props.isRoot
             ? this.props.items.map((item) => {
                 const flatUrl = flattenToAppURL(item.url);
-                const itemID = item.title.split(' ').join('-').toLowerCase();
-                return item.items && item.items.length && false ? (
-                  <Dropdown
-                    id={itemID}
-                    className={cx({
-                      item: true,
-                      firstLevel: true,
+                return (
+                  <div
+                    key={flatUrl}
+                    className={cx('item firstLevel', {
                       menuActive: this.isActive(flatUrl),
                     })}
-                    key={flatUrl}
-                    trigger={
-                      <Link to={flatUrl === '' ? '/' : flatUrl} key={flatUrl}>
-                        {item.title}
-                      </Link>
-                    }
-                    item
-                    simple
+                    role="listbox"
+                    tabIndex={0}
+                    aria-expanded={false}
                   >
-                    <Dropdown.Menu>
-                      {item.items.map((subitem) => {
-                        const flatSubUrl = flattenToAppURL(subitem.url);
-                        const subItemID = subitem.title
-                          .split(' ')
-                          .join('-')
-                          .toLowerCase();
-                        return (
-                          <Dropdown.Item key={flatSubUrl}>
-                            <div className="secondLevel-wrapper">
-                              <Link
-                                id={subItemID}
-                                to={flatSubUrl === '' ? '/' : flatSubUrl}
-                                key={flatSubUrl}
-                                className={
-                                  this.isActive(flatSubUrl)
-                                    ? 'item secondLevel menuActive'
-                                    : 'item secondLevel'
-                                }
-                              >
-                                {subitem.title}
-                              </Link>
-                            </div>
-                            {subitem.items && (
-                              <div className="submenu-wrapper">
-                                <div className="submenu">
-                                  {subitem.items.map((subsubitem) => {
-                                    const flatSubSubUrl = flattenToAppURL(
-                                      subsubitem.url,
-                                    );
-                                    return (
-                                      <Link
-                                        to={
-                                          flatSubSubUrl === ''
-                                            ? '/'
-                                            : flatSubSubUrl
-                                        }
-                                        title={subsubitem.title}
-                                        key={flatSubSubUrl}
-                                        className={
-                                          this.isActive(flatSubSubUrl)
-                                            ? 'item thirdLevel menuActive'
-                                            : 'item thirdLevel'
-                                        }
-                                      >
-                                        {subsubitem.title}
-                                      </Link>
-                                    );
-                                  })}
-                                </div>
-                              </div>
-                            )}
-                          </Dropdown.Item>
-                        );
-                      })}
-                    </Dropdown.Menu>
-                  </Dropdown>
-                ) : (
-                  <Link
-                    to={flatUrl === '' ? '/' : flatUrl}
-                    key={flatUrl}
-                    className={
-                      this.isActive(flatUrl)
-                        ? 'item menuActive firstLevel'
-                        : 'item firstLevel'
-                    }
-                  >
-                    {item.title}
-                  </Link>
+                    <Link to={flatUrl === '' ? '/' : flatUrl}>
+                      {item.title}
+                    </Link>
+                  </div>
                 );
               })
             : ''}
-          {!this.state.isSdf && !this.props.isExplorer ? (
-            <Menu.Item className="firstLevel language-selector-wrapper">
+
+          {!this.state.isSdf && !this.state.isExplorer ? (
+            <Menu.Item className="firstLevel language-selector-wrapper mobile only tablet only computer only">
               <LanguageSelector navigation={this.props.navigation} />
             </Menu.Item>
           ) : (

package/src/less/styles.less

@@ -127,7 +127,7 @@
       text-align: left;
       transform: translate(-100%, 0);
 
-      @media only screen and (max-width: calc(@largestMobileScreen + 53px)) {
+      @media only screen and (max-width: 1700px) {
         display: none;
       }
     }
@@ -182,7 +182,7 @@ body.grey-bg {
   a,
   ul,
   li {
-    font-size: 16px;
+    // font-size: 16px;
   }
 
   a {
@@ -288,252 +288,34 @@ body.grey-bg {
     }
 
     .header-wrapper {
-      padding: 0;
-
       .header {
         .logo-nav-wrapper {
-          top: 0;
-
-          .tools-search-wrapper {
-            width: 100%;
-            margin-left: 0 !important;
-          }
-
           .navigation {
-            width: 100%;
-            min-height: 80px;
-            align-items: center;
-            align-self: normal;
-            justify-content: flex-end;
-
             .ui.secondary.pointing.menu {
-              top: 0;
-              width: 100%;
-              min-height: 80px;
-              flex-wrap: wrap;
-              justify-content: center;
-              padding: 4px 0;
-              margin-right: 0 !important;
-
-              > * {
-                align-self: center;
-              }
-
-              &.is-sticky {
-                justify-content: center;
-                padding: 0;
-              }
-
-              &.mobile.hidden {
-                max-width: calc(100% - 272px);
-                margin-right: 80px !important;
-              }
-
-              &.mobile.only {
-                .language-selector-wrapper {
-                  display: flex;
-                  align-items: flex-end;
-                }
-              }
-
-              &:not(.is-sdf) {
-                justify-content: center;
-                padding: 4px 0;
-              }
-
-              &:not(.mobile.only) {
-                .item.firstLevel.at-glance {
-                  align-self: stretch;
-                  padding-bottom: 1.5rem !important;
-                  margin-bottom: -0.5rem;
-                  background: #00a390 0% 0% no-repeat padding-box;
-                  border-radius: 0px 0px 10px 10px;
-                  color: #fff !important;
-                  cursor: pointer;
-
-                  &:hover {
-                    color: #fff !important;
-                  }
-                }
-              }
-
-              .home-button {
-                // width: 56px !important;
-                // height: 40px !important;
-                padding-right: 0 !important;
-                padding-left: 0 !important;
-                margin: 4px 0;
-
-                &.logo {
-                  img {
-                    width: 100%;
-                    height: 100%;
-                  }
-                }
-              }
+              height: 100%;
 
               .item.firstLevel.at-glance {
-                color: #00a390 !important;
+                align-self: stretch;
+                margin-top: -1rem;
+                margin-bottom: -1rem;
+                background: #00a390 0 0 no-repeat padding-box;
+                border-radius: 0 0 10px 10px;
+                color: #fff;
                 cursor: pointer;
 
                 &:hover {
-                  color: #00a390 !important;
+                  color: #fff !important;
                 }
               }
 
               .item.firstLevel.deep-dive {
-                color: #00a390 !important;
+                align-self: center;
+                color: #00a390;
                 cursor: pointer;
 
                 &:hover {
-                  color: #00a390 !important;
-                }
-              }
-
-              &:not(.open) {
-                .home-button {
-                  position: absolute;
-                  // top: 50%;
-                  left: 0;
-                  padding: 0 !important;
-                  margin: 0;
-                  transform: translateX(-100%);
-
-                  > a {
-                    display: flex;
-                  }
-                }
-
-                .language-selector-wrapper {
-                  position: absolute;
-                  right: 0;
-                  margin: 0;
-                  margin-bottom: 0;
-                  transform: translateX(100%);
-
-                  &:hover {
-                    background-color: transparent !important;
-                  }
-
-                  .language-selector .ui.dropdown {
-                    display: flex;
-                    flex-direction: row-reverse;
-                    align-items: center;
-
-                    img {
-                      margin-right: 0.25rem;
-                    }
-                  }
-                }
-              }
-
-              &.open {
-                .hamburger-wrapper {
-                  position: absolute;
-                  z-index: 0;
-                  top: 1rem;
-                  right: 15px;
-                }
-
-                .home-button {
-                  &.logo {
-                    // margin-top: 1rem;
-                    // margin-bottom: 1rem;
-                    margin-left: 0.8rem;
-                  }
-                }
-              }
-
-              &.stackable.open {
-                top: 0 !important;
-                height: 100vh !important;
-                margin-top: 0;
-              }
-
-              .item {
-                position: relative;
-                color: @darkGreen;
-
-                &:not(.home-button) {
-                  padding-right: 0.8rem !important;
-                  padding-left: 0.8rem !important;
-                }
-
-                &:not(.active),
-                &:not(.menuActive) > a {
-                  color: @darkGreen;
-                }
-
-                &.firstLevel,
-                &.firstLevel > a {
-                  border: none;
-                  font-size: 1.15rem;
-                  font-weight: bold;
-
-                  &.language-selector-wrapper {
-                    .language-selector {
-                      margin-right: 0;
-
-                      .visible.menu {
-                        left: 50%;
-                        min-width: 70px !important;
-                        transform: translate(-50%, 0);
-                      }
-                    }
-                  }
-
-                  &:hover {
-                    color: @lightGreen !important;
-
-                    &.language-selector-wrapper {
-                      border-color: transparent !important;
-                    }
-
-                    > a {
-                      color: @darkGreen !important;
-                    }
-                  }
-                }
-
-                &.secondLevel {
-                  &:hover {
-                    background: initial !important;
-                    color: #005248;
-                  }
-                }
-
-                &.active,
-                &.menuActive {
-                  color: #005248;
+                  color: #00a390;
                 }
-
-                &.active:not(.secondLevel):not(.thirdLevel),
-                &.menuActive:not(.secondLevel):not(.thirdLevel) {
-                  @media only screen and (min-width: 1655px) {
-                    &::before {
-                      position: absolute;
-                      top: 4px;
-                      left: 50%;
-                      display: block !important;
-                      width: 6px;
-                      height: 6px;
-                      background-color: #005248;
-                      border-radius: 100%;
-                      content: '';
-                      transform: translateX(-50%);
-                    }
-                  }
-                }
-              }
-            }
-
-            .hamburger-wrapper {
-              height: 24px;
-              margin: 0.5rem 0;
-
-              button.hamburger {
-                padding: 0;
-                cursor: pointer;
               }
             }
           }
@@ -551,11 +333,15 @@ body.grey-bg {
   }
 }
 
+.sdf-nav {
+  height: 86px;
+}
+
 .back-to-top {
   margin-top: 2em;
   margin-bottom: 3rem;
   color: #7b7b7b;
-  font-size: 16px;
+  // font-size: 16px;
   font-weight: bold;
 
   .ui.circular.button {
@@ -761,8 +547,8 @@ img.slick-image {
 }
 
 .tabs-block .slick-dots-wrapper .slick-dots li.slick-active button {
-  border-color: #005248 !important;
-  background-color: #005248 !important;
+  border-color: #00a390 !important;
+  background-color: #00a390 !important;
 }
 
 .tabs-block.light .slick-dots-wrapper .slick-dots li.slick-active::before {
@@ -814,6 +600,45 @@ img.slick-image {
   margin-bottom: 0 !important;
 }
 
+.tabs-block {
+  .slick-next {
+    p {
+      font-size: 14px;
+    }
+  }
+}
+
+.explorer-tabs .tabs-block .tabs > .ui.menu {
+  > a {
+    padding: 1rem;
+  }
+
+  > a:nth-child(1) {
+    padding-left: 1rem !important;
+  }
+
+  > a.active:nth-child(1),
+  > a.active:hover:nth-child(1) {
+    background: #4aa47f;
+    border-radius: 4px;
+    color: #fff;
+  }
+
+  > a.active:nth-child(2),
+  > a.active:hover:nth-child(2) {
+    background: #b78730;
+    border-radius: 4px;
+    color: #fff;
+  }
+
+  > a.active:nth-child(3),
+  > a.active:hover:nth-child(3) {
+    background: #2e80ec;
+    border-radius: 4px;
+    color: #fff;
+  }
+}
+
 @media only screen and (max-width: @largestTabletScreen) {
   .tabs-block .slick-slider {
     order: 2;
@@ -863,3 +688,11 @@ img.slick-image {
     width: 650px;
   }
 }
+
+.radjhan-normal {
+  font-family: RajdhaniR, 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
+}
+
+.radjhan-bold {
+  font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
+}