feat(pdc-frontend): integrate nav wip

frameless · Sep 28, 2023 · ab4091e · ab4091e
1 parent 894a6b7
commit ab4091e
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 32 deletions.
diff --git a/apps/pdc-frontend/package.json b/apps/pdc-frontend/package.json
@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@frameless/samenwerkende-catalogi": "0.0.0-semantically-released",
+    "@frameless/ui": "0.0.0-semantically-released",
     "@tanstack/react-query": "4.29.12",
     "@utrecht/component-library-css": "1.0.0-alpha.539",
     "@utrecht/component-library-react": "1.0.0-alpha.348",
@@ -43,8 +44,7 @@
     "rehype-raw": "6.1.1",
     "sharp": "0.32.1",
     "vega": "5.25.0",
-    "vega-lite": "5.14.1",
-    "yarn": "1.22.19"
+    "vega-lite": "5.14.1"
   },
   "devDependencies": {
     "eslint": "8.35.0",

diff --git a/apps/pdc-frontend/src/app/[locale]/layout.tsx b/apps/pdc-frontend/src/app/[locale]/layout.tsx
@@ -3,7 +3,7 @@ import { dir } from 'i18next';
 import type { Metadata } from 'next';
 import React from 'react';
 import { QueryClientProvider } from '@/client';
-import { Page, PageContent, PageHeader, SkipLink, Surface } from '@/components';
+import { Navigation, Page, PageContent, PageHeader, SkipLink, Surface } from '@/components';
 import { ClientLanguageSwitcher } from '@/components/ClientLanguageSwitcher';
 import '@utrecht/component-library-css';
 import '../../styles/globals.css';
@@ -12,11 +12,14 @@ import { Footer } from '@/components/Footer';
 import { Logo } from '@/components/Logo';
 import { Main } from '@/components/Main';
 import { SearchBar } from '@/components/SearchBar';
+import { getNavListData } from '@/data';
 import { getLiveSuggestions, onSearchSubmitAction } from './search/actions';
 import 'react-loading-skeleton/dist/skeleton.css';
 import { useTranslation } from '../i18n/index';
 import { languages } from '../i18n/settings';
 
+import '@frameless/ui/dist/bundle.css';
+
 const escapeComment = (data: any) => String(data).replace(/--/g, '-\u200B-');
 
 const HTMLComment = ({ data }: any) => (
@@ -200,35 +203,7 @@ const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
                   </div>
                 </div>
               </PageHeader>
-              <nav className="utrecht-topnav" id="menu">
-                <ul className="utrecht-topnav__list">
-                  <li className="utrecht-topnav__item">
-                    <a className="utrecht-topnav__link" href="https://www.utrecht.nl/wonen-en-leven">
-                      Wonen en leven
-                    </a>
-                  </li>
-                  <li className="utrecht-topnav__item">
-                    <a className="utrecht-topnav__link" href="https://www.utrecht.nl/zorg-en-onderwijs">
-                      Zorg en onderwijs
-                    </a>
-                  </li>
-                  <li className="utrecht-topnav__item">
-                    <a className="utrecht-topnav__link" href="https://www.utrecht.nl/werk-en-inkomen">
-                      Werk en inkomen
-                    </a>
-                  </li>
-                  <li className="utrecht-topnav__item">
-                    <a className="utrecht-topnav__link" href="https://www.utrecht.nl/ondernemen">
-                      Ondernemen
-                    </a>
-                  </li>
-                  <li className="utrecht-topnav__item">
-                    <a className="utrecht-topnav__link" href="https://www.utrecht.nl/bestuur-en-organisatie">
-                      Bestuur en organisatie
-                    </a>
-                  </li>
-                </ul>
-              </nav>
+              <Navigation list={getNavListData(t)} mobileBreakpoint={1400} />
               <PageContent className="utrecht-page-content--modifier" style={{ position: 'relative' }}>
                 <Main id="main">{children}</Main>
               </PageContent>

diff --git a/apps/pdc-frontend/src/app/i18n/locales/en/layout.json b/apps/pdc-frontend/src/app/i18n/locales/en/layout.json
@@ -88,5 +88,29 @@
         "title": "Contact us via WhatsApp"
       }
     ]
+  },
+  "navigation": {
+    "list": [
+      {
+        "title": "Living and Life",
+        "link": "https://www.utrecht.nl/wonen-en-leven"
+      },
+      {
+        "title": "Health and Education",
+        "link": "https://www.utrecht.nl/zorg-en-onderwijs"
+      },
+      {
+        "title": "Work and Income",
+        "link": "https://www.utrecht.nl/werk-en-inkomen"
+      },
+      {
+        "title": "Business",
+        "link": "https://www.utrecht.nl/ondernemen"
+      },
+      {
+        "title": "Government and Organization",
+        "link": "https://www.utrecht.nl/bestuur-en-organisatie"
+      }
+    ]
   }
 }
diff --git a/apps/pdc-frontend/src/app/i18n/locales/nl/layout.json b/apps/pdc-frontend/src/app/i18n/locales/nl/layout.json
@@ -88,5 +88,29 @@
         "title": "Neem contact op via WhatsApp"
       }
     ]
+  },
+  "navigation": {
+    "list": [
+      {
+        "title": "Wonen en leven",
+        "link": "https://www.utrecht.nl/wonen-en-leven"
+      },
+      {
+        "title": "Zorg en onderwijs",
+        "link": "https://www.utrecht.nl/zorg-en-onderwijs"
+      },
+      {
+        "title": "Werk en inkomen",
+        "link": "https://www.utrecht.nl/werk-en-inkomen"
+      },
+      {
+        "title": "Ondernemen",
+        "link": "https://www.utrecht.nl/ondernemen"
+      },
+      {
+        "title": "Bestuur en organisatie",
+        "link": "https://www.utrecht.nl/bestuur-en-organisatie"
+      }
+    ]
   }
 }
diff --git a/apps/pdc-frontend/src/data/index.ts b/apps/pdc-frontend/src/data/index.ts
@@ -0,0 +1,23 @@
+// eslint-disable-next-line no-unused-vars
+export const getNavListData = (t: (text: string) => string) => [
+  {
+    title: t('navigation.list.0.title'),
+    link: t('navigation.list.0.link'),
+  },
+  {
+    title: t('navigation.list.1.title'),
+    link: t('navigation.list.1.link'),
+  },
+  {
+    title: t('navigation.list.2.title'),
+    link: t('navigation.list.2.link'),
+  },
+  {
+    title: t('navigation.list.3.title'),
+    link: t('navigation.list.3.link'),
+  },
+  {
+    title: t('navigation.list.4.title'),
+    link: t('navigation.list.4.link'),
+  },
+];