1132 policies and data

frontend/package.json

@@ -14,7 +14,7 @@
     "flow.js": "^0.2.6",
     "google-map-react": "^2.2.1",
     "js-cookie": "^3.0.5",
-    "lodash-es": "^4.17.21",
+    "lodash-es": "^4.17.23",
     "mobx": "6.13.3",
     "mobx-react-lite": "^4.0.7",
     "moment": "^2.30.1",

frontend/src/AuthenticatedSwitch.jsx

@@ -13,7 +13,6 @@ const Home = lazy(() => import("./pages/Home"));
 const EncounterSearch = lazy(
   () => import("./pages/SearchPages/EncounterSearch"),
 );
-const Citation = lazy(() => import("./pages/Citation"));
 const AdminLogs = lazy(() => import("./pages/AdminLogs"));
 const ReportEncounter = lazy(
   () => import("./pages/ReportsAndManagamentPages/ReportEncounter"),
@@ -29,6 +28,9 @@ const BulkImport = lazy(() => import("./pages/BulkImport/BulkImport"));
 const BulkImportTask = lazy(() => import("./pages/BulkImport/BulkImportTask"));
 
 const Encounter = lazy(() => import("./pages/Encounter/Encounter"));
+const PoliciesAndData = lazy(
+  () => import("./pages/PoliciesAndData/PoliciesAndData"),
+);
 
 export default function AuthenticatedSwitch({
   showclassicsubmit,
@@ -73,7 +75,7 @@ export default function AuthenticatedSwitch({
         <Suspense fallback={<div>Loading...</div>}>
           <Routes>
             <Route path="/profile" element={<Profile />} />
-            <Route path="/citation" element={<Citation />} />
+            <Route path="/policies-and-data" element={<PoliciesAndData />} />
             <Route path="/projects/overview" element={<ProjectList />} />
             <Route path="/home" element={<Home />} />
             <Route path="/report" element={<ReportEncounter />} />

frontend/src/UnAuthenticatedSwitch.jsx

@@ -3,11 +3,11 @@ import { Routes, Route, Navigate, useLocation } from "react-router-dom";
 import Footer from "./components/Footer";
 import UnAuthenticatedAppHeader from "./components/UnAuthenticatedAppHeader";
 import EncounterPageViewOnly from "./pages/Encounter/EncounterPageViewOnly";
+import PoliciesAndData from "./pages/PoliciesAndData/PoliciesAndData";
 
 // Lazy load pages
 const Login = lazy(() => import("./pages/Login"));
 const Unauthorized = lazy(() => import("./pages/errorPages/Unauthorized"));
-const Citation = lazy(() => import("./pages/Citation"));
 const ReportEncounter = lazy(
   () => import("./pages/ReportsAndManagamentPages/ReportEncounter"),
 );
@@ -55,7 +55,7 @@ export default function UnAuthenticatedSwitch({ showclassicsubmit }) {
               element={<Unauthorized setHeader={setHeader} />}
             />
             <Route path="/encounter" element={<EncounterPageViewOnly />} />
-            <Route path="/citation" element={<Citation />} />
+            <Route path="/policies-and-data" element={<PoliciesAndData />} />
             <Route path="/report" element={<ReportEncounter />} />
             <Route path="/reportConfirm" element={<ReportConfirm />} />
             <Route path="/login" element={<Login />} />

frontend/src/components/UnAuthenticatedAppHeader.jsx

@@ -9,7 +9,9 @@ import { FormattedMessage } from "react-intl";
 import FooterVisibilityContext from "../FooterVisibilityContext";
 import Logo from "./svg/Logo";
 
-export default function AuthenticatedAppHeader({ showclassicsubmit }) {
+import HeaderDropdownItems from "./header/HeaderDropdownItems";
+
+export default function UnAuthenticatedAppHeader({ showclassicsubmit }) {
   const { visible } = useContext(FooterVisibilityContext);
   const [dropdownShows, setDropdownShows] = useState({
     dropdown1: false,
@@ -102,17 +104,7 @@ export default function AuthenticatedAppHeader({ showclassicsubmit }) {
                       }
                       show={dropdownShows[`dropdown${idx + 1}`]}
                     >
-                      {Object.values(item)[0].map((subItem) => {
-                        return (
-                          <NavDropdown.Item
-                            key={subItem.name}
-                            href={subItem.href}
-                            style={{ color: "black", fontSize: "0.9rem" }}
-                          >
-                            {subItem.name}
-                          </NavDropdown.Item>
-                        );
-                      })}
+                      <HeaderDropdownItems items={Object.values(item)[0]} />
                     </NavDropdown>
                   </Nav>
                 ))}

frontend/src/components/header/HeaderDropdownItems.jsx

@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import { NavDropdown } from "react-bootstrap";
+import RightIcon from "../svg/RightIcon";
+
+export default function HeaderDropdownItems({
+  items,
+  dropdownItemStyle = { color: "black", fontSize: "0.9rem" },
+  dropdownTitleLinkStyle = {
+    color: "black",
+    fontSize: "0.9rem",
+    textDecoration: "none",
+  },
+}) {
+  const [openSubKey, setOpenSubKey] = useState(null);
+  const [subBg, setSubBg] = useState("transparent");
+
+  return items.map((subItem, subIndex) => {
+    const key = subItem.href || `menu-item-${subIndex}`;
+    const hasSub = Array.isArray(subItem.sub) && subItem.sub.length > 0;
+    const subKey = `${key}__sub`;
+
+    if (!hasSub) {
+      return (
+        <NavDropdown.Item
+          key={key}
+          href={subItem.href}
+          style={dropdownItemStyle}
+        >
+          {subItem.name}
+        </NavDropdown.Item>
+      );
+    }
+
+    return (
+      <NavDropdown
+        key={subKey}
+        className="header-dropdown"
+        title={
+          <a
+            style={dropdownTitleLinkStyle}
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              window.location.href = subItem.href;
+            }}
+            href={subItem.href}
+          >
+            {subItem.name}
+            <span style={{ paddingLeft: "34px" }}>
+              <RightIcon />
+            </span>
+          </a>
+        }
+        drop="end"
+        style={{
+          paddingLeft: 8,
+          fontSize: "0.9rem",
+          backgroundColor: subBg,
+        }}
+        onMouseEnter={() => {
+          setSubBg("#CCF0FF");
+          setOpenSubKey(subKey);
+        }}
+        onMouseLeave={() => {
+          setSubBg("white");
+          setOpenSubKey(null);
+        }}
+        show={openSubKey === subKey}
+      >
+        {subItem.sub.map((leaf, leafIndex) => {
+          const leafKey = leaf.href || `${subKey}-leaf-${leafIndex}`;
+          return (
+            <NavDropdown.Item
+              key={leafKey}
+              href={leaf.href}
+              style={dropdownItemStyle}
+            >
+              {leaf.name}
+            </NavDropdown.Item>
+          );
+        })}
+      </NavDropdown>
+    );
+  });
+}

frontend/src/components/header/Menu.jsx

@@ -2,16 +2,15 @@ import React, { useState } from "react";
 import { Nav, NavDropdown } from "react-bootstrap";
 import { FormattedMessage } from "react-intl";
 import DownIcon from "../svg/DownIcon";
-import RightIcon from "../svg/RightIcon";
 import { authenticatedMenu } from "../../constants/navMenu";
 
+import HeaderDropdownItems from "./HeaderDropdownItems";
+
 export default function Menu({
   username,
   showclassicsubmit,
   showClassicEncounterSearch,
 }) {
-  const [dropdownColor, setDropdownColor] = useState("transparent");
-
   const [dropdownShows, setDropdownShows] = useState({});
   const [dropdownBorder, setDropdownBorder] = useState("2px solid transparent");
 
@@ -56,67 +55,7 @@ export default function Menu({
             }
             show={dropdownShows[`dropdown${idx + 1}`]}
           >
-            {Object.values(item)[0].map((subItem) => {
-              return subItem.sub ? (
-                <NavDropdown
-                  className="header-dropdown"
-                  title={
-                    <a
-                      style={{
-                        color: "black",
-                        fontSize: "0.9rem",
-                        textDecoration: "none",
-                      }}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        window.location.href = subItem.href;
-                      }}
-                      href={subItem.href}
-                    >
-                      {subItem.name}
-                      <span style={{ paddingLeft: "34px" }}>
-                        <RightIcon />
-                      </span>
-                    </a>
-                  }
-                  drop="end"
-                  style={{
-                    paddingLeft: 8,
-                    fontSize: "0.9rem",
-                    backgroundColor: dropdownColor,
-                  }}
-                  onMouseEnter={() => {
-                    setDropdownColor("#CCF0FF");
-                    handleMouseEnterLeave(`dropdown7`, true);
-                  }}
-                  onMouseLeave={() => {
-                    setDropdownColor("white");
-                    handleMouseEnterLeave(`dropdown7`, false);
-                  }}
-                  show={dropdownShows[`dropdown7`]}
-                >
-                  {subItem.sub.map((sub) => {
-                    return (
-                      <NavDropdown.Item
-                        key={sub?.name}
-                        href={sub.href}
-                        style={{ color: "black", fontSize: "0.9rem" }}
-                      >
-                        {sub.name}
-                      </NavDropdown.Item>
-                    );
-                  })}
-                </NavDropdown>
-              ) : (
-                <NavDropdown.Item
-                  href={subItem.href}
-                  style={{ color: "black", fontSize: "0.9rem" }}
-                >
-                  {subItem.name}
-                </NavDropdown.Item>
-              );
-            })}
+            <HeaderDropdownItems items={Object.values(item)[0]} />
           </NavDropdown>
         </Nav>
       ))}

frontend/src/constants/navMenu.js

@@ -64,11 +64,25 @@ const authenticatedMenu = (
       {
         name: (
           <FormattedMessage
-            id="MENU_LEARN_CITINGWILDBOOK"
-            defaultMessage="Citing Wildbook"
+            id="MENU_POLICIES_AND_DATA"
+            defaultMessage="Policies and Data"
           />
         ),
-        href: `${process.env.PUBLIC_URL}/citation`,
+        href: `${process.env.PUBLIC_URL}/policies-and-data?section=citing_wildbook`,
+        sub: [
+          {
+            name: <FormattedMessage id="MENU_LEARN_PRIVACYPOLICY" />,
+            href: `${process.env.PUBLIC_URL}/policies-and-data?section=privacy_policy`,
+          },
+          {
+            name: <FormattedMessage id="MENU_LEARN_TERMSOFUSE" />,
+            href: `${process.env.PUBLIC_URL}/policies-and-data?section=terms_of_use`,
+          },
+          {
+            name: <FormattedMessage id="MENU_LEARN_CITINGWILDBOOK" />,
+            href: `${process.env.PUBLIC_URL}/policies-and-data?section=citing_wildbook`,
+          },
+        ],
       },
       {
         name: (
@@ -342,11 +356,25 @@ const unAuthenticatedMenu = (showclassicsubmit) => [
       {
         name: (
           <FormattedMessage
-            id="MENU_LEARN_CITINGWILDBOOK"
-            defaultMessage="Citing Wildbook"
+            id="MENU_POLICIES_AND_DATA"
+            defaultMessage="Policies and Data"
           />
         ),
-        href: `${process.env.PUBLIC_URL}/citation`,
+        href: `${process.env.PUBLIC_URL}/policies-and-data?section=citing_wildbook`,
+        sub: [
+          {
+            name: <FormattedMessage id="MENU_LEARN_PRIVACYPOLICY" />,
+            href: `${process.env.PUBLIC_URL}/policies-and-data?section=privacy_policy`,
+          },
+          {
+            name: <FormattedMessage id="MENU_LEARN_TERMSOFUSE" />,
+            href: `${process.env.PUBLIC_URL}/policies-and-data?section=terms_of_use`,
+          },
+          {
+            name: <FormattedMessage id="MENU_LEARN_CITINGWILDBOOK" />,
+            href: `${process.env.PUBLIC_URL}/policies-and-data?section=citing_wildbook`,
+          },
+        ],
       },
       {
         name: (

frontend/src/locale/de.json

@@ -13,11 +13,12 @@
   "LOGIN_LOGOUT": "Abmelden",
   "MENU_LEARN_ABOUTWILDBOOK": "Über Wildbook",
   "MENU_LEARN_CONTACTUS": "Kontaktieren Sie uns",
-  "MENU_LEARN_CITINGWILDBOOK": "Wildbuch zitieren",
+  "MENU_LEARN_CITINGWILDBOOK": "Wildbook zitieren",
   "MENU_LEARN_HOWTOPHOTOGRAPH": "Wie man fotografiert",
   "MENU_LEARN_PRIVACYPOLICY": "Datenschutzrichtlinie",
   "MENU_LEARN_TERMSOFUSE": "Nutzungsbedingungen",
   "MENU_LEARN_LEARNMORE": "Erfahren Sie mehr über Wildbook",
+  "MENU_POLICIES_AND_DATA": "Richtlinien und Daten",
   "MENU_LEARN_REPORTENCOUNTER": "Eine Begegnung melden",
   "MENU_LEARN_REPORTENCOUNTER_CLASSIC": "Eine Begegnung melden (klassisch)",
   "MENU_LEARN_BULKIMPORT": "Massenimport",

frontend/src/locale/en.json

@@ -18,6 +18,7 @@
     "MENU_LEARN_PRIVACYPOLICY": "Privacy Policy",
     "MENU_LEARN_TERMSOFUSE": "Terms of Use",
     "MENU_LEARN_LEARNMORE": "Learn more about Wildbook",
+    "MENU_POLICIES_AND_DATA": "Policies and Data",
     "MENU_LEARN_REPORTENCOUNTER": "Report an Encounter",
     "MENU_LEARN_REPORTENCOUNTER_CLASSIC": "Report an Encounter (Classic)",
     "MENU_LEARN_BULKIMPORT": "Bulk Import",

frontend/src/locale/es.json

@@ -18,6 +18,7 @@
   "MENU_LEARN_PRIVACYPOLICY": "Política de privacidad",
   "MENU_LEARN_TERMSOFUSE": "Términos de uso",
   "MENU_LEARN_LEARNMORE": "Aprender más sobre Wildbook",
+  "MENU_POLICIES_AND_DATA": "Políticas y datos",
   "MENU_LEARN_REPORTENCOUNTER": "Reportar un avistamiento",
   "MENU_LEARN_REPORTENCOUNTER_CLASSIC": "Reportar un avistamiento (clásico)",
   "MENU_LEARN_BULKIMPORT": "Importación masiva",

frontend/src/locale/fr.json

@@ -18,6 +18,7 @@
   "MENU_LEARN_PRIVACYPOLICY": "Politique de confidentialité",
   "MENU_LEARN_TERMSOFUSE": "Conditions d'utilisation",
   "MENU_LEARN_LEARNMORE": "En savoir plus sur Wildbook",
+  "MENU_POLICIES_AND_DATA": "Politiques et données",
   "MENU_LEARN_REPORTENCOUNTER": "Signaler une observation",
   "MENU_LEARN_REPORTENCOUNTER_CLASSIC": "Signaler une observation (classique)",
   "MENU_LEARN_BULKIMPORT": "Importation en masse",

frontend/src/locale/it.json

@@ -18,6 +18,7 @@
   "MENU_LEARN_PRIVACYPOLICY": "Politica sulla privacy",
   "MENU_LEARN_TERMSOFUSE": "Termini di utilizzo",
   "MENU_LEARN_LEARNMORE": "Scopri di più su Wildbook",
+  "MENU_POLICIES_AND_DATA": "Politiche e dati",
   "MENU_LEARN_REPORTENCOUNTER": "Segnala un Incontro",
   "MENU_LEARN_REPORTENCOUNTER_CLASSIC": "Segnala un Incontro (Classico)",
   "MENU_LEARN_BULKIMPORT": "Importazione in massa",

frontend/src/pages/Citation.jsx

@@ -5,11 +5,14 @@ import { Container, Row, Col } from "react-bootstrap";
 export default function Citation() {
   return (
     <Container>
-      <Row className="my-5">
+      <Row
+        className="mb-4"
+        // style={{marginTop: "-40px"}}
+      >
         <Col>
-          <h1>
+          <h3>
             <FormattedMessage id="CITATION_TITLE" />
-          </h1>
+          </h3>
         </Col>
       </Row>
       <Row className="mb-3">