From 6f9d6b028adafc35cc82120bd2401e352077c4b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89rico=20Andrei?= <ericof@gmail.com>
Date: Mon, 22 Jul 2024 23:29:47 -0300
Subject: [PATCH] =?UTF-8?q?Suporte=20a=20mapa=20do=20site=20no=20rodap?=
 =?UTF-8?q?=C3=A9=20(Fixes=20#2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../portalbrasil-intranet/news/2.feature      |  1 +
 .../src/components/Footer/Footer.jsx          | 17 +++++--
 .../src/components/Footer/Sitemap.jsx         | 44 +++++++++++++++++++
 .../portalbrasil-intranet/src/index.js        |  4 ++
 .../src/theme/components/_footer.scss         | 41 +++++++++++++++++
 5 files changed, 103 insertions(+), 4 deletions(-)
 create mode 100644 frontend/packages/portalbrasil-intranet/news/2.feature
 create mode 100644 frontend/packages/portalbrasil-intranet/src/components/Footer/Sitemap.jsx

diff --git a/frontend/packages/portalbrasil-intranet/news/2.feature b/frontend/packages/portalbrasil-intranet/news/2.feature
new file mode 100644
index 0000000..49ac448
--- /dev/null
+++ b/frontend/packages/portalbrasil-intranet/news/2.feature
@@ -0,0 +1 @@
+Suporte a exibição do mapa do site no rodapé [@ericof]
diff --git a/frontend/packages/portalbrasil-intranet/src/components/Footer/Footer.jsx b/frontend/packages/portalbrasil-intranet/src/components/Footer/Footer.jsx
index f30b09d..c546f27 100644
--- a/frontend/packages/portalbrasil-intranet/src/components/Footer/Footer.jsx
+++ b/frontend/packages/portalbrasil-intranet/src/components/Footer/Footer.jsx
@@ -6,6 +6,7 @@ import { useSelector, shallowEqual } from 'react-redux';
 import { UniversalLink } from '@plone/volto/components';
 import { Container } from '@plone/components';
 import { flattenToAppURL, addAppURL } from '@plone/volto/helpers';
+import Sitemap from './Sitemap';
 import ToolLogo from '../ToolLogo/ToolLogo';
 import config from '@plone/volto/registry';
 
@@ -15,8 +16,9 @@ import config from '@plone/volto/registry';
  * @param {Object} intl Intl object
  * @returns {string} Markup of the component
  */
-const Footer = ({ intl }) => {
+const Footer = ({ pathname, intl }) => {
   const { settings } = config;
+  const { display_sitemap, display_toollogo } = settings.intranet?.footer;
   const { lang, siteActions = [] } = useSelector(
     (state) => ({
       lang: state.intl.locale,
@@ -52,9 +54,16 @@ const Footer = ({ intl }) => {
               ))
             : null}
         </ul>
-        <div className="logo">
-          <ToolLogo />
-        </div>
+        {display_sitemap && (
+          <Container narrow>
+            <Sitemap pathname={pathname} />
+          </Container>
+        )}
+        {display_toollogo && (
+          <Container className="logo">
+            <ToolLogo />
+          </Container>
+        )}
         <a className="item powered-by" href="https://plone.org">
           <FormattedMessage
             id="Powered by Portal Brasil: Intranet, Plone & Python"
diff --git a/frontend/packages/portalbrasil-intranet/src/components/Footer/Sitemap.jsx b/frontend/packages/portalbrasil-intranet/src/components/Footer/Sitemap.jsx
new file mode 100644
index 0000000..953dc9a
--- /dev/null
+++ b/frontend/packages/portalbrasil-intranet/src/components/Footer/Sitemap.jsx
@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { NavLink } from 'react-router-dom';
+import { getNavigation } from '@plone/volto/actions';
+import { GridList, GridListItem } from '@plone/components';
+import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+const Sitemap = ({ pathname }) => {
+  const dispatch = useDispatch();
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const items = useSelector((state) => state.navigation.items, shallowEqual);
+
+  useEffect(() => {
+    if (!hasApiExpander('navigation', getBaseUrl(pathname))) {
+      dispatch(getNavigation(getBaseUrl(pathname), config.settings.navDepth));
+    }
+  }, [pathname, token, dispatch]);
+
+  return (
+    <nav id="footer-navigation" aria-label="navigation" className="navigation">
+      <GridList className={'navigation-grid'}>
+        {items.map((item, index) => (
+          <GridListItem key={item.url} className={'navigation-item'}>
+            <h3 className={'section'}>
+              <NavLink to={item.url}>{item.title}</NavLink>
+            </h3>
+            {item.items && item.items.length > 0 && (
+              <ul className={'item-wrapper'}>
+                {item.items.map((subitem) => (
+                  <li key={subitem.url} className={'nav-subitem'}>
+                    <NavLink to={subitem.url}>{subitem.title}</NavLink>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </GridListItem>
+        ))}
+      </GridList>
+    </nav>
+  );
+};
+
+export default Sitemap;
diff --git a/frontend/packages/portalbrasil-intranet/src/index.js b/frontend/packages/portalbrasil-intranet/src/index.js
index 3df6859..95d68f8 100644
--- a/frontend/packages/portalbrasil-intranet/src/index.js
+++ b/frontend/packages/portalbrasil-intranet/src/index.js
@@ -44,6 +44,10 @@ const applyConfig = (config) => {
         enable_fonte: true,
         enable_link: false,
       },
+      footer: {
+        display_sitemap: false,
+        display_toollogo: true,
+      },
     },
     image_crop_aspect_ratios: [
       {
diff --git a/frontend/packages/portalbrasil-intranet/src/theme/components/_footer.scss b/frontend/packages/portalbrasil-intranet/src/theme/components/_footer.scss
index 8cd07f7..95a68e8 100644
--- a/frontend/packages/portalbrasil-intranet/src/theme/components/_footer.scss
+++ b/frontend/packages/portalbrasil-intranet/src/theme/components/_footer.scss
@@ -7,5 +7,46 @@
         width: 300px;
       }
     }
+    .navigation {
+      height: unset;
+      .navigation-grid {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+        text-align: left;
+        h3.section {
+          > a {
+            @include add(weight, bold);
+            color: var(--color-primary);
+            text-transform: uppercase;
+            &:hover {
+              text-decoration: underline;
+            }
+          }
+        }
+        .navigation-item {
+          -webkit-flex: 1; /* Safari */
+          flex: 1;
+          padding-left: $spacing-xsmall;
+          border-left: 2px solid var(--color-primary);
+        }
+        .item-wrapper {
+          display: block;
+          text-align: left;
+          > li {
+            padding: 0px 7px 0px 0px;
+            border: unset;
+            > a {
+              @include add(weight, light);
+              color: var(--color-primary);
+              &:hover {
+                @include add(weight, light);
+                text-decoration: underline;
+              }
+            }
+          }
+        }
+      }
+    }
   }
 }