From e3566077665bcc7db9dc60d45bdf33f9879b273c Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Fri, 21 Jul 2023 14:22:46 +0200
Subject: [PATCH] chore(shared): Make SectionsMenu a shared component

---
 .../dev/components/navigation/modal-menu.mjs  |  3 +-
 .../org/components/navigation/modal-menu.mjs  |  2 +-
 .../components/navigation/sections-menu.mjs   | 54 +++++++++++++++++++
 3 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 sites/shared/components/navigation/sections-menu.mjs

diff --git a/sites/dev/components/navigation/modal-menu.mjs b/sites/dev/components/navigation/modal-menu.mjs
index f83ca281cc2..ef35476939e 100644
--- a/sites/dev/components/navigation/modal-menu.mjs
+++ b/sites/dev/components/navigation/modal-menu.mjs
@@ -3,11 +3,10 @@ import { NavigationContext } from 'shared/context/navigation-context.mjs'
 // Hooks
 import { useContext } from 'react'
 // Components
-import { SectionsMenu, ns as sectionsNs } from 'site/components/navigation/sections-menu.mjs'
+import { SectionsMenu, ns as sectionsNs } from 'shared/components/navigation/sections-menu.mjs'
 import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
 import { nsMerge } from 'shared/utils.mjs'
 import { ChoiceLink } from 'shared/components/choice-link.mjs'
-
 import { NavLinks, Breadcrumbs } from 'shared/components/navigation/sitenav.mjs'
 
 export const ns = nsMerge(sectionsNs)
diff --git a/sites/org/components/navigation/modal-menu.mjs b/sites/org/components/navigation/modal-menu.mjs
index 193e079bccf..f43107fca49 100644
--- a/sites/org/components/navigation/modal-menu.mjs
+++ b/sites/org/components/navigation/modal-menu.mjs
@@ -1,4 +1,4 @@
-import { SectionsMenu } from 'site/components/navigation/sections-menu.mjs'
+import { SectionsMenu } from 'shared/components/navigation/sections-menu.mjs'
 import { useTranslation } from 'next-i18next'
 import { ActiveSection, ns as primaryNs } from 'shared/components/navigation/primary.mjs'
 import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
diff --git a/sites/shared/components/navigation/sections-menu.mjs b/sites/shared/components/navigation/sections-menu.mjs
new file mode 100644
index 00000000000..5d909d94d16
--- /dev/null
+++ b/sites/shared/components/navigation/sections-menu.mjs
@@ -0,0 +1,54 @@
+import { useContext } from 'react'
+import { NavigationContext } from 'shared/context/navigation-context.mjs'
+import Link from 'next/link'
+import { icons, ns as sectionsNs } from 'shared/components/navigation/primary.mjs'
+import { useTranslation } from 'next-i18next'
+import orderBy from 'lodash.orderby'
+import { colors } from 'shared/components/header.mjs'
+
+export const ns = sectionsNs
+
+const onlySections = (tree) => orderBy(tree, ['t'], ['asc']).filter((entry) => entry.m)
+
+export const SectionsMenu = ({ bOnly = false }) => {
+  const { t } = useTranslation(ns)
+  const { siteNav } = useContext(NavigationContext)
+
+  const output = []
+  let i = 1
+  const sharedClasses = 'p-0 rounded shadow hover:shadow-lg w-full text-neutral-900'
+  for (const page of onlySections(siteNav)) {
+    if ((!bOnly && !page.h && !page.b) || (!page.h && bOnly && page.b)) {
+      if (page.t !== 'spacer') {
+        const item = (
+          <Link
+            key={page.s}
+            className={
+              bOnly
+                ? `bg-secondary border border solid border-secondary bg-opacity-0 hover:bg-opacity-20 ${sharedClasses}`
+                : `bg-${colors[i]}-400 bg-opacity-70 hover:bg-opacity-100 ${sharedClasses}`
+            }
+            href={`/${page.s}`}
+            title={page.t}
+          >
+            <div className="flex flex-col rounded">
+              <div className={`flex flex-row items-center justify-between pt-2 px-4`}>
+                <h6 className="text-neutral-900">{page.t}</h6>
+                {icons[page.s] ? icons[page.s]('w-10 h-10') : null}
+              </div>
+              <div
+                className={`font-medium text-base leading-5 text-left rounded-b pt-0 pb-4 px-4 `}
+              >
+                {t(page.s + 'About')}
+              </div>
+            </div>
+          </Link>
+        )
+        output.push(item)
+        i++
+      }
+    }
+  }
+
+  return <div className="flex flex-col gap-2">{output}</div>
+}