Merge pull request #28 from nr2f1/header

header
nr2f1 · Jul 8, 2024 · 49b18cb · 49b18cb
2 parents 0ecaadd + be7cc1e
commit 49b18cb
Show file tree

Hide file tree

Showing 26 changed files with 7,256 additions and 8,127 deletions.
diff --git a/.github/workflows/deploy-assets-to-gh-pages.yaml b/.github/workflows/deploy-assets-to-gh-pages.yaml
@@ -6,13 +6,9 @@ on:
     branches:
       - main
     paths:
-      - website-assets/**/*
+      - website-assets/**
       - .deploy-assets-to-gh-pages.yaml
-      - '!CHANGELOG.md'  
-  workflow_run:
-    workflows: ["PR validation"]
-    types:
-      - completed
+      - '!CHANGELOG.md' 
 
 # Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
 permissions:

diff --git a/.github/workflows/deploy-website-preview.yaml b/.github/workflows/deploy-website-preview.yaml
@@ -6,15 +6,9 @@ on:
     branches:
       - main
     paths:
-      - website/**/*
       - .github/workflows/deploy-website-preview.yaml
       - '!CHANGELOG.md'         
-      - '!website-assets/**/*'         
-  workflow_run:
-    workflows: ["PR validation"]
-    types:
-      - completed      
-
+      - website/**         
 env:
   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
   VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

diff --git a/package.json b/package.json
@@ -58,17 +58,18 @@
     "@apollo/client": "^3.10.8",
     "@apollo/experimental-nextjs-app-support": "^0.8.0",
     "@formatjs/intl-localematcher": "^0.5.4",
+    "@mui/base": "5.0.0-beta.40",
     "graphql": "^16.9.0",
     "negotiator": "^0.6.3",
     "next": "14.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tslib": "^2.6.3"
   },
-  "packageManager": "[email protected]+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a",
   "pnpm": {
     "overrides": {
       "next@>=13.4.0 <14.1.1": ">=14.1.1"
     }
-  }
+  },
+  "packageManager": "[email protected]+sha512.c85cd21b6da10332156b1ca2aa79c0a61ee7ad2eb0453b88ab299289e9e8ca93e6091232b25c07cbf61f6df77128d9c849e5c9ac6e44854dbd211c49f3a67adc"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website-assets/readme.md b/website-assets/readme.md
@@ -0,0 +1,13 @@
+# Website assets
+
+## Description
+
+To keep the costs as low as possible, the website assets are stored in this NX project. This way, the assets are deployed to GitHub pages (https://nr2f1.github.io/website/) and can be used in the website.
+
+## Development
+
+Add assets to the `/public` folder and run `nx build website-assets` to build the assets. The assets are then available in the `dist/assets` folder.
+
+## Deployment
+
+Once you worked and merged your changes, the assets are automatically deployed to GitHub pages. The assets are available at https://nr2f1.github.io/website/.
diff --git a/website/next.config.js b/website/next.config.js
@@ -12,6 +12,15 @@ const nextConfig = {
     // See: https://github.com/gregberge/svgr
     svgr: false,
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'nr2f1.github.io',
+        pathname: '/website/**',
+      },
+    ],
+  },
 };
 
 const plugins = [

diff --git a/website/src/app/[lang]/layout.scss b/website/src/app/[lang]/layout.scss
diff --git a/website/src/app/[lang]/layout.tsx b/website/src/app/[lang]/layout.tsx
@@ -1,15 +1,14 @@
 import { Nunito_Sans } from 'next/font/google';
 
-import '@styles/main.scss';
-import './layout.scss';
-
 const nunitoSans = Nunito_Sans({
   display: 'swap',
   subsets: ['latin'],
   preload: true,
   variable: '--font-nunito-sans',
 });
 
+import '@styles/main.scss';
+
 import Footer from '@components/footer';
 import Header from '@components/header';
 import { AVAILABLE_LOCALES, LocaleParamsPath } from '@i18n/locales';

diff --git a/website/src/app/[lang]/page.tsx b/website/src/app/[lang]/page.tsx
@@ -10,6 +10,40 @@ const Page: NextPage<LocaleParamsPath> = async ({ params: { lang } }) => {
       <p>
         Language is <strong>{lang}</strong>
       </p>
+      <p>
+        <a href="/" className="button button--on-light">
+          button link
+        </a>
+      </p>
+      <button type="button" className="button" disabled>
+        button
+      </button>
+
+      <p>
+        <a href="/" className="button button--on-dark">
+          button link
+        </a>
+      </p>
+
+      <p>
+        <a href="/" className="button button--accent-on-light">
+          Donate
+        </a>
+      </p>
+      <button type="button" className="button button--accent-on-light">
+        Donate
+      </button>
+      <p>
+        <a href="/" className="button button--accent-on-dark">
+          button link
+        </a>
+      </p>
+      <button type="button" className="button button--accent-on-light" disabled>
+        Donate
+      </button>
+      <button type="button" className="button button--accent-on-dark" disabled>
+        Donate
+      </button>
     </div>
   );
 };

diff --git a/website/src/components/header/index.module.scss b/website/src/components/header/index.module.scss
@@ -0,0 +1,42 @@
+.header {
+
+  &__top {
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--background-inverse-primary);
+    display: flex;
+    padding: var(--spacing-4) var(--spacing-6);
+
+    & nav ul {
+      display: flex;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      column-gap: var(--spacing-4);
+    }
+
+    &_right {
+      display: flex;
+      align-items: center;
+      column-gap: var(--spacing-4);
+    }
+
+  }
+
+  &__logo {
+    max-width: 170px;
+    flex-basis: 100%;
+  }
+
+  &__bottom {
+    background-color: var(--background-inverse-secondary);
+    padding: var(--spacing-2) var(--spacing-8);
+
+    & nav {
+      display: flex;
+      justify-content: space-between;
+      padding: var(--spacing-2) var(--spacing-6);
+    }
+
+  }
+}
diff --git a/website/src/components/header/index.scss b/website/src/components/header/index.scss
diff --git a/website/src/components/header/index.tsx b/website/src/components/header/index.tsx
@@ -1,47 +1,73 @@
-'use client';
+import styles from './index.module.scss';
 
-import { AVAILABLE_LOCALES, AvailableLocale, english } from '@i18n/locales';
-import './index.scss';
+import { ASSETS_URL } from '@config/utils';
+import Image from 'next/image';
+import Link from 'next/link';
+import LocaleSelector from './locale-selector';
+import NavList, { NavItem } from './nav-list';
 
-import MainLogo from '@components/logos/main';
-import { usePathname, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+const navItems: NavItem[] = [
+  {
+    href: '/',
+    label: 'Menu Item',
+  },
+  {
+    href: '/',
+    label: 'Menu Item',
+  },
+  {
+    href: '/',
+    label: 'Menu Item',
+  },
+  {
+    href: '/',
+    label: 'Menu Item',
+  },
+];
 
 const Header = () => {
-  const [locale, setLocale] = useState<AvailableLocale>(english);
-  const router = useRouter();
-  const pathname = usePathname();
-
-  const pathnameWithoutLocale = pathname.split('/').slice(2).join('/');
-
-  useEffect(() => {
-    const locale = pathname.split('/')[1];
-    setLocale(locale as AvailableLocale);
-  }, [pathname]);
-
-  const handleOnChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const {
-      target: { value },
-    } = event;
-    setLocale(value as AvailableLocale);
-    router.push(`/${value}/${pathnameWithoutLocale}`);
-  };
-
   return (
-    <header>
-      <div className="content-wrapper">
-        <div className="logo">
-          <MainLogo />
-
-          <select value={locale} onChange={handleOnChange}>
-            {AVAILABLE_LOCALES.map((locale) => (
-              <option key={locale} value={locale}>
-                {locale}
-              </option>
-            ))}
-          </select>
+    <header className={styles.header}>
+      <div className={styles.header__top}>
+        <div className={styles.header__logo}>
+          <Link href="/">
+            <Image
+              src={`${ASSETS_URL}/nr2f1-foundation-logo-color-white-text-original.png`}
+              alt="nr2f1 foundation logo"
+              width={1000}
+              height={1000}
+              loading="eager"
+              priority={true}
+            />
+          </Link>
+        </div>
+        <div className={styles.header__top_right}>
+          <nav>
+            <ul>
+              <li>
+                <Link href="/" className="button button--on-dark">
+                  Register a patient
+                </Link>
+              </li>
+              <li>
+                <Link href="/" className="button button--accent-on-dark">
+                  Donate
+                </Link>
+              </li>
+            </ul>
+          </nav>
+          <LocaleSelector />
         </div>
       </div>
+      <div className={styles.header__bottom}>
+        <nav>
+          <NavList name="About BBSOS" items={navItems} />
+          <NavList name="Living with BBSOS" items={navItems} />
+          <NavList name="Research" items={navItems} />
+          <NavList name="About us" items={navItems} />
+          <NavList name="Support us" items={navItems} />
+        </nav>
+      </div>
     </header>
   );
 };