header, footer design

src/customizations/volto/components/theme/Footer/Footer.jsx

@@ -0,0 +1,146 @@
+/**
+ * Footer component.
+ * @module components/theme/Footer/Footer
+ */
+
+import React from 'react';
+import { Container, List, Segment, Grid } from 'semantic-ui-react';
+import { Link } from 'react-router-dom';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import eeaLogo from '../Header/eea.png';
+
+const messages = defineMessages({
+  copyright: {
+    id: 'Copyright',
+    defaultMessage: 'Copyright',
+  },
+});
+
+/**
+ * Component to display the footer.
+ * @function Footer
+ * @param {Object} intl Intl object
+ * @returns {string} Markup of the component
+ */
+const Footer = ({ intl }) => (
+  <Segment
+    role="contentinfo"
+    vertical
+    padded
+    // textAlign="center"
+    className="footerWrapper"
+  >
+    <Container>
+      <div className="ui vertically divided grid">
+        <div className="three column row">
+          <div className="three wide column">
+            <ul className="unlist">
+              <li>
+                <Link className="item" to="/">
+                  <FormattedMessage
+                    id="home"
+                    defaultMessage="Home"
+                  />
+                </Link>
+              </li>
+
+              <li>
+                <Link className="item" to="/data">
+                  <FormattedMessage
+                    id="data"
+                    defaultMessage="Explore the data"
+                  />
+                </Link>
+              </li>
+
+              <li>
+                <Link className="item" to="/datasets">
+                  <FormattedMessage
+                    id="datasets"
+                    defaultMessage="Datasets"
+                  />
+                </Link>
+              </li>
+              <li>
+                <Link className="item" to="/glossary">
+                  <FormattedMessage
+                    id="glossary"
+                    defaultMessage="Glossary"
+                  />
+                </Link>
+              </li>
+              <li>
+                <Link className="item" to="/about">
+                  <FormattedMessage
+                    id="about"
+                    defaultMessage="About"
+                  />
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          <div className="six wide column">
+            <div className="ui vertically divided grid">
+
+              <div className="two column row">
+                <div className="four wide column">
+                  <a href="https://ec.europa.eu/" title="European Commission">
+                    <img
+                      className="footerLogo"
+                      style={{ height: '50px' }}
+                      src={eeaLogo}
+                      alt="EEA"
+                      title="EEA"
+                    />
+                  </a>
+                </div>
+                <div className="eight wide column">
+
+                  <p>
+                      European Environment Agency (EEA)
+                      <br />
+                      Kongens Nytrov 6
+                      <br />
+                      1050 Copenhagen K
+                      <br />
+                      Denmark
+                      <br />
+                      Phone: +4533367100
+                  </p>
+                </div>
+              </div>
+
+            </div>
+          </div>
+
+
+          <div
+            className="three wide column"
+          >
+            <p>The European Environment Agency (EEA) is an agency of the European Union.</p>
+            <Link className="item" to="/legal_notice">
+              <FormattedMessage
+                id="legal_notice"
+                defaultMessage="Legal notice"
+              />
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Container>
+  </Segment>
+);
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+Footer.propTypes = {
+  /**
+   * i18n object
+   */
+};
+
+export default injectIntl(Footer);

src/customizations/volto/components/theme/Header/Header.jsx

@@ -0,0 +1,90 @@
+/**
+ * Header component.
+ * @module components/theme/Header/Header
+ */
+
+import React, { Component } from 'react';
+import { Container, Segment } from 'semantic-ui-react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import {
+  Anontools,
+  LanguageSelector,
+  Logo,
+  Navigation,
+  SearchWidget,
+} from '@plone/volto/components';
+
+import eclogo from './ec.png';
+import eealogo from './eea.png';
+
+/**
+ * Header component class.
+ * @class Header
+ * @extends Component
+ */
+class Header extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    token: PropTypes.string,
+    pathname: PropTypes.string.isRequired,
+  };
+
+  /**
+   * Default properties.
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    token: null,
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    return (
+      <Segment basic className="header-wrapper" role="banner">
+        <div className="header-container">
+          <div className="header">
+            <div className="logo-nav-wrapper">
+              <div className="logo">
+                <Logo />
+              </div>
+              <Navigation pathname={this.props.pathname} />
+            </div>
+            <div className="tools-search-wrapper">
+              {/* <LanguageSelector />
+              {!this.props.token && (
+                <div className="tools">
+                  <Anontools />
+                </div>
+              )}
+              <div className="search">
+                <SearchWidget pathname={this.props.pathname} />
+              </div> */}
+
+            <div className="header-partner-section">
+              <img style={{height: '66px'}} src={eclogo} alt=""/>
+              <img style={{height: '60px', marginLeft: '1rem'}} src={eealogo} alt=""/>
+
+            </div>
+
+            </div>
+          </div>
+        </div>
+      </Segment>
+    );
+  }
+}
+
+export default connect(state => ({
+  token: state.userSession.token,
+}))(Header);

theme/themes/pastanaga/collections/menu.overrides

@@ -104,8 +104,11 @@
 
 .navigation,
 .tools {
-  .ui.secondary.pointing.menu {
-    margin: 0 0 0 40px;
+  .menu {
+    margin-top: 0;
+  }
+  margin: 0 0 0 40px;
+    .ui.secondary.pointing.menu {
     border: 0;
 
     @media only screen and (max-width: @largestTabletScreen) {
@@ -117,6 +120,7 @@
       padding-top: @relativeBig;
       margin: 0;
       text-transform: uppercase;
+      color: white;
 
       @media only screen and (min-width: @largestTabletScreen) {
         padding: 1.7em 0 @relativeBig;

theme/themes/pastanaga/elements/header.overrides

@@ -72,3 +72,10 @@
     }
   }
 }
+
+
+.header-container {
+  width: 80%;
+  margin: 0 auto;
+  max-width: 1600px;
+}

theme/themes/pastanaga/globals/site.overrides

@@ -1,3 +1,22 @@
 /*******************************
         Global Overrides
 *******************************/
+
+
+.footerWrapper {
+  background-color: @primaryColor !important;
+  color           : white;
+
+  .unlist {
+    margin         : 0;
+    list-style-type: none;
+    text-decoration: underline;
+    font-weight    : bold;
+  }
+
+  a {
+    color          : white;
+    text-decoration: underline;
+    font-weight    : bold;
+  }
+}