From 3b50475fae7f54106aa9478fa4c28a1311ec483d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?=
 <dorien.groenwald@visuellverstehen.de>
Date: Wed, 5 Jun 2024 18:17:54 +0200
Subject: [PATCH 1/5] feat: add header (wip)

---
 public/assets/svg/logo/logo-large-color.svg | 11 +++++
 src/main.tsx                                |  2 +
 src/tsx/components/navigation/NavItem.tsx   | 19 ++++++++
 src/tsx/icons/Arrow.tsx                     | 16 ++++++
 src/tsx/layout/Header.tsx                   | 54 +++++++++++++++++++++
 tailwind.config.js                          |  7 ++-
 6 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 public/assets/svg/logo/logo-large-color.svg
 create mode 100644 src/tsx/components/navigation/NavItem.tsx
 create mode 100644 src/tsx/icons/Arrow.tsx
 create mode 100644 src/tsx/layout/Header.tsx

diff --git a/public/assets/svg/logo/logo-large-color.svg b/public/assets/svg/logo/logo-large-color.svg
new file mode 100644
index 0000000..05b70c8
--- /dev/null
+++ b/public/assets/svg/logo/logo-large-color.svg
@@ -0,0 +1,11 @@
+<svg width="285" height="62" viewBox="0 0 285 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M75.0025 2.48C99.5823 2.48071 104.99 13.0404 104.99 26C104.99 13.0404 110.398 2.48071 134.977 2.48C134.844 15.3361 129.269 30.32 104.99 30.32C80.7108 30.32 75.1361 15.3361 75.0025 2.48Z" fill="#ACB63B"/>
+    <path d="M75.0025 34.1599C99.5823 34.1606 104.99 44.7204 104.99 57.6799C104.99 44.7204 110.398 34.1606 134.977 34.1599C134.844 47.016 129.269 61.9999 104.99 61.9999C80.7108 61.9999 75.1361 47.016 75.0025 34.1599Z" fill="#659858"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M156.03 58.5269C154.522 59.5039 152.479 60.5 150 60.5V51.5C150.02 51.5 150.33 51.4961 151.137 50.9731C151.909 50.4729 152.696 49.803 153.801 48.862C153.912 48.7679 154.025 48.6712 154.142 48.5716C154.182 48.5382 154.222 48.5042 154.262 48.4698C156.433 46.6221 160.103 43.5 164.995 43.5C169.855 43.5 173.237 46.5869 175.226 48.4029C175.326 48.4941 175.422 48.5822 175.515 48.6665C177.984 50.9049 178.921 51.5 179.99 51.5C181.058 51.5 181.996 50.9049 184.465 48.6665C184.558 48.5822 184.654 48.4941 184.754 48.4029C186.743 46.5869 190.125 43.5 194.985 43.5C199.877 43.5 203.546 46.6221 205.718 48.4698C205.758 48.5042 205.798 48.5382 205.838 48.5716C205.955 48.6712 206.068 48.7679 206.179 48.8619C207.284 49.803 208.071 50.4729 208.843 50.9731C209.65 51.4961 209.96 51.5 209.98 51.5V60.5C207.501 60.5 205.458 59.5039 203.95 58.5269C202.646 57.6821 201.384 56.6043 200.373 55.74C200.247 55.6326 200.126 55.5284 200.008 55.4284C197.458 53.2606 196.174 52.5 194.985 52.5C193.916 52.5 192.979 53.0951 190.51 55.3335C190.417 55.4178 190.321 55.5059 190.221 55.5971C188.231 57.4131 184.85 60.5 179.99 60.5C175.13 60.5 171.748 57.4131 169.759 55.5971C169.659 55.5059 169.563 55.4178 169.47 55.3335C167.001 53.0951 166.063 52.5 164.995 52.5C163.806 52.5 162.522 53.2606 159.972 55.4284C159.854 55.5284 159.732 55.6325 159.607 55.74C158.595 56.6043 157.334 57.6821 156.03 58.5269Z" fill="#4C7741"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M156.03 15.5269C154.522 16.5039 152.479 17.5 150 17.5V8.5C150.02 8.5 150.33 8.49607 151.137 7.97314C151.909 7.47291 152.696 6.80297 153.801 5.86196C153.912 5.76792 154.025 5.67118 154.142 5.57162C154.182 5.53816 154.222 5.50422 154.262 5.46984C156.433 3.62211 160.103 0.5 164.995 0.5C169.855 0.5 173.237 3.58687 175.226 5.4029C175.326 5.49414 175.422 5.58218 175.515 5.66646C177.984 7.90487 178.921 8.5 179.99 8.5C181.058 8.5 181.996 7.90487 184.465 5.66646C184.558 5.58218 184.654 5.49415 184.754 5.4029C186.743 3.58688 190.125 0.5 194.985 0.5C199.877 0.5 203.546 3.62211 205.718 5.46985C205.758 5.50422 205.798 5.53816 205.838 5.57162C205.955 5.67116 206.068 5.7679 206.179 5.86193C207.284 6.80295 208.071 7.47291 208.843 7.97314C209.65 8.49607 209.96 8.5 209.98 8.5V17.5C207.501 17.5 205.458 16.5039 203.95 15.5269C202.646 14.6821 201.384 13.6043 200.373 12.74C200.247 12.6326 200.126 12.5284 200.008 12.4284C197.458 10.2606 196.174 9.5 194.985 9.5C193.916 9.5 192.979 10.0951 190.51 12.3335C190.417 12.4178 190.321 12.5059 190.221 12.5971C188.232 14.4131 184.85 17.5 179.99 17.5C175.13 17.5 171.748 14.4131 169.759 12.5971C169.659 12.5059 169.563 12.4178 169.47 12.3335C167.001 10.0951 166.063 9.5 164.995 9.5C163.806 9.5 162.522 10.2606 159.972 12.4284C159.854 12.5284 159.732 12.6325 159.607 12.74C158.595 13.6043 157.334 14.6821 156.03 15.5269Z" fill="#4C7741"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M156.234 35.7305C154.747 36.8141 152.632 38 150 38V29C149.977 29 149.966 29.0018 149.966 29.0017C149.966 29.0014 150.246 28.958 150.933 28.457C151.708 27.8923 152.5 27.1334 153.606 26.0742C153.716 25.9685 153.83 25.8598 153.947 25.748C155.107 24.6378 156.6 23.2317 158.307 22.1276C160.062 20.9923 162.305 20 164.995 20C170.023 20 173.46 23.5381 175.393 25.5283C175.502 25.6407 175.606 25.7482 175.706 25.8499C178.254 28.4492 179.129 29 179.99 29C180.851 29 181.726 28.4492 184.274 25.8499C184.374 25.7482 184.478 25.6407 184.587 25.5283C186.52 23.5381 189.957 20 194.985 20C197.675 20 199.917 20.9923 201.673 22.1276C203.38 23.2317 204.872 24.6378 206.033 25.748C206.15 25.8598 206.263 25.9685 206.374 26.0741C207.479 27.1334 208.272 27.8923 209.047 28.457C209.734 28.958 210.014 29.0014 210.014 29.0017C210.014 29.0018 210.002 29 209.98 29V38C207.348 38 205.233 36.8141 203.746 35.7305C202.445 34.7821 201.189 33.5747 200.178 32.6031C200.052 32.482 199.93 32.3647 199.812 32.252C198.621 31.1122 197.687 30.2683 196.785 29.6849C195.931 29.1327 195.381 29 194.985 29C194.124 29 193.249 29.5508 190.701 32.1501C190.601 32.2518 190.497 32.3593 190.388 32.4717C188.454 34.4619 185.018 38 179.99 38C174.962 38 171.525 34.4619 169.592 32.4717C169.483 32.3593 169.379 32.2518 169.279 32.1501C166.731 29.5508 165.856 29 164.995 29C164.599 29 164.048 29.1327 163.195 29.6849C162.292 30.2683 161.359 31.1122 160.168 32.252C160.05 32.3647 159.928 32.482 159.802 32.603C158.791 33.5747 157.535 34.7821 156.234 35.7305Z" fill="#ACB63B"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M29.9899 62C46.5529 62 59.9799 48.5685 59.9799 32C59.9799 15.4315 46.5529 2 29.9899 2C13.427 2 0 15.4315 0 32C0 48.5685 13.427 62 29.9899 62ZM30.4898 54C42.912 54 52.9822 43.9264 52.9822 31.5C52.9822 19.0736 42.912 9 30.4898 9C18.0675 9 7.99732 19.0736 7.99732 31.5C7.99732 43.9264 18.0675 54 30.4898 54Z" fill="#4C7741"/>
+    <ellipse cx="30.4898" cy="31.5" rx="12.4958" ry="12.5" fill="#ACB63B"/>
+    <path d="M225.002 0.508475C249.582 0.509229 254.99 14.8733 254.99 28.6017L255.005 30L255.99 30C280.269 30 284.844 45.8728 284.977 59.4915C260.398 59.4908 254.99 45.1267 254.99 31.3983C254.99 45.1267 249.582 59.4908 225.002 59.4915C225.136 45.8728 229.711 30 253.99 30C229.711 30 225.136 14.1272 225.002 0.508475Z" fill="#659858"/>
+    <path d="M255.005 30C255.005 17.0404 258.506 0.48 284.992 0.48C284.51 16 279.284 30 255.005 30Z" fill="#ACB63B"/>
+</svg>
diff --git a/src/main.tsx b/src/main.tsx
index 23c859a..3436c0f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,10 +2,12 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './tsx/App.tsx'
 import Footer from './tsx/layout/Footer.tsx'
+import Header from './tsx/layout/Header.tsx'
 import './css/site.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
+        <Header />
         <App />
         <Footer />
     </React.StrictMode>,
diff --git a/src/tsx/components/navigation/NavItem.tsx b/src/tsx/components/navigation/NavItem.tsx
new file mode 100644
index 0000000..778909e
--- /dev/null
+++ b/src/tsx/components/navigation/NavItem.tsx
@@ -0,0 +1,19 @@
+import Arrow from "../../icons/Arrow";
+
+interface NavItemProps {
+    label: string;
+    url: string;
+}
+
+const NavItem: React.FC<NavItemProps> = ({ label, url }) => {
+    return (
+        <a href={url} className="text-lg font-bold flex justify-between items-center group">
+            <p className="transition-color ease-in-out duration-300 group-hover:text-green-light-900">
+                {label}
+            </p>
+            <Arrow classes="w-6 transition-all ease-in-out duration-300 group-hover:translate-x-2 group-hover:text-green-light-900"/>
+        </a>
+    );
+}
+
+export default NavItem;
diff --git a/src/tsx/icons/Arrow.tsx b/src/tsx/icons/Arrow.tsx
new file mode 100644
index 0000000..62050f8
--- /dev/null
+++ b/src/tsx/icons/Arrow.tsx
@@ -0,0 +1,16 @@
+interface ArrowProps {
+    classes: string;
+}
+
+const Arrow: React.FC<ArrowProps> = ({ classes }) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+            className={classes}>
+            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+        </svg>
+    );
+}
+
+export default Arrow;
diff --git a/src/tsx/layout/Header.tsx b/src/tsx/layout/Header.tsx
new file mode 100644
index 0000000..f4fa5b6
--- /dev/null
+++ b/src/tsx/layout/Header.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import NavItem from "../components/navigation/NavItem";
+
+
+function Header() {
+    const [open, setOpen] = React.useState(false);
+
+    function toggleNavigation() {
+        setOpen(!open);
+    }
+
+    return (
+        <header className="bg-white fixed w-screen inset-x-0 top-0">
+            <div className="px-4 py-5 max-w-screen-lg mx-auto flex justify-between items-center md:px-6 2xl:max-w-screen-xl">
+                <a href="/" aria-label="Zur Startseite navigieren" className="flex items-center gap-x-4 xl:gap-x-5">
+                    <img
+                        src="/assets/svg/logo/logo-large-color.svg"
+                        className="w-18 md:w-24 xl:w-28" alt="Green Ecolution Logo"/>
+                    <p className="hidden text-green-dark-900 font-lato font-semibold text-xl md:block xl:text-3xl">
+                        Green Ecolution
+                    </p>
+                </a>
+
+                <button
+                    aria-expanded={open}
+                    aria-controls="main-navigation"
+                    aria-haspopup="menu"
+                    aria-label="Hauptnavigation öffnen"
+                    className="relative w-10 h-10 p-2 z-50 group lg:hidden"
+                    onClick={toggleNavigation}
+                >
+                    <span className={`block w-6 h-0.5 ${open ? 'bg-white rotate-45 absolute' : 'bg-grey-900 mb-1'}`}></span>
+                    <span className={`block w-6 h-0.5 ${open ? 'bg-white -rotate-45 absolute' : 'bg-grey-900 mb-1'}`}></span>
+                </button>
+
+                <nav
+                    id="main-navigation"
+                    className={`fixed inset-y-0 right-0 w-[60vw] h-screen text-white bg-grey-900 z-40 ${open ? 'block' : 'hidden'}`}
+                >
+                    <ul className="pl-4 pr-8 pt-[20vh] md:pl-6 md:pr-12">
+                        <li className="mb-4">
+                            <NavItem label="Das Projekt" url="/das-projekt"/>
+                        </li>
+                        <li>
+                            <NavItem label="Kontakt" url="/kontakt"/>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+    );
+}
+
+export default Header;
diff --git a/tailwind.config.js b/tailwind.config.js
index cb8c06e..1897857 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,7 +17,7 @@ export default {
           '900': '#659858',
         },
         'dark': {
-          '900': '#659858',
+          '900': '#4C7741',
         },
       },
       'grey': {
@@ -48,7 +48,10 @@ export default {
         },
         screens: {
             '3xl': '1920px',
-        }
+        },
+        spacing: {
+            '18': '4.5rem',
+        },
     },
   },
   plugins: [],

From c552cd1cc7cd377c6b2d9f0cbc5d67ee80df6743 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?=
 <dorien.groenwald@visuellverstehen.de>
Date: Wed, 5 Jun 2024 18:55:31 +0200
Subject: [PATCH 2/5] feat: add navigation transitions

---
 src/tsx/FakeProgress.tsx  |  2 +-
 src/tsx/icons/Arrow.tsx   |  4 ++--
 src/tsx/layout/Header.tsx | 24 +++++++++++++++++-------
 tailwind.config.js        |  3 +++
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/tsx/FakeProgress.tsx b/src/tsx/FakeProgress.tsx
index 55959a4..f21dc8e 100644
--- a/src/tsx/FakeProgress.tsx
+++ b/src/tsx/FakeProgress.tsx
@@ -225,7 +225,7 @@ const FakeProgress = ({ }: FakeProgressProps) => {
     <div className="flex flex-col items-center justify-center w-full sm:w-1/2 px-4">
       <div className="relative w-full sm:w-3/4 h-2 sm:h-2 bg-gray-300 rounded-full overflow-hidden">
         <div
-          className="absolute left-0 top-0 h-full bg-green-middle-900 transition-all duration-100 ease-linear"
+          className="absolute left-0 top-0 h-full -z-10 bg-green-middle-900 transition-all duration-100 ease-linear"
           style={{ width: `${progress}%` }}
         ></div>
       </div>
diff --git a/src/tsx/icons/Arrow.tsx b/src/tsx/icons/Arrow.tsx
index 62050f8..d5abcfc 100644
--- a/src/tsx/icons/Arrow.tsx
+++ b/src/tsx/icons/Arrow.tsx
@@ -6,9 +6,9 @@ const Arrow: React.FC<ArrowProps> = ({ classes }) => {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
-            fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+            fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor"
             className={classes}>
-            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+            <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
         </svg>
     );
 }
diff --git a/src/tsx/layout/Header.tsx b/src/tsx/layout/Header.tsx
index f4fa5b6..6cac04b 100644
--- a/src/tsx/layout/Header.tsx
+++ b/src/tsx/layout/Header.tsx
@@ -9,13 +9,23 @@ function Header() {
         setOpen(!open);
     }
 
+    React.useEffect(() => {
+        open
+        ? document.body.classList.add('overflow-hidden')
+        : document.body.classList.remove('overflow-hidden');
+
+        return () => {
+            document.body.classList.remove('overflow-hidden');
+        };
+    }, [open]);
+
     return (
-        <header className="bg-white fixed w-screen inset-x-0 top-0">
-            <div className="px-4 py-5 max-w-screen-lg mx-auto flex justify-between items-center md:px-6 2xl:max-w-screen-xl">
+        <header className={`fixed w-screen inset-x-0 top-0 z-50 before:w-screen before:transition-all before:ease-in-out before:duration-300 before:h-screen before:absolute before:bg-grey-900 before:-z-10 ${open ? 'before:visible before:opacity-20' : 'before:opacity-0 before:invisible'}`}>
+            <div className="relative px-4 py-5 max-w-screen-lg mx-auto flex justify-between items-center md:px-6 2xl:max-w-screen-xl">
                 <a href="/" aria-label="Zur Startseite navigieren" className="flex items-center gap-x-4 xl:gap-x-5">
                     <img
                         src="/assets/svg/logo/logo-large-color.svg"
-                        className="w-18 md:w-24 xl:w-28" alt="Green Ecolution Logo"/>
+                        className="w-24 xl:w-28" alt="Green Ecolution Logo"/>
                     <p className="hidden text-green-dark-900 font-lato font-semibold text-xl md:block xl:text-3xl">
                         Green Ecolution
                     </p>
@@ -29,15 +39,15 @@ function Header() {
                     className="relative w-10 h-10 p-2 z-50 group lg:hidden"
                     onClick={toggleNavigation}
                 >
-                    <span className={`block w-6 h-0.5 ${open ? 'bg-white rotate-45 absolute' : 'bg-grey-900 mb-1'}`}></span>
-                    <span className={`block w-6 h-0.5 ${open ? 'bg-white -rotate-45 absolute' : 'bg-grey-900 mb-1'}`}></span>
+                    <span className={`block w-6 h-0.5 transition-all ease-in-out duration-300 ${open ? 'bg-white rotate-45 absolute' : 'bg-grey-900 mb-1'}`}></span>
+                    <span className={`block w-6 h-0.5 transition-all ease-in-out duration-300 ${open ? 'bg-white -rotate-45 absolute' : 'bg-grey-900 mb-1'}`}></span>
                 </button>
 
                 <nav
                     id="main-navigation"
-                    className={`fixed inset-y-0 right-0 w-[60vw] h-screen text-white bg-grey-900 z-40 ${open ? 'block' : 'hidden'}`}
+                    className={`fixed inset-y-2 w-[60vw] z-10 text-white bg-grey-900 max-w-96 rounded-tl-2xl rounded-bl-2xl transition-all ease-in-out duration-300 shadow-mainNav ${open ? 'visible block right-0' : 'invisible -right-full'}`}
                 >
-                    <ul className="pl-4 pr-8 pt-[20vh] md:pl-6 md:pr-12">
+                    <ul className="px-4 pt-[30vh] md:px-6">
                         <li className="mb-4">
                             <NavItem label="Das Projekt" url="/das-projekt"/>
                         </li>
diff --git a/tailwind.config.js b/tailwind.config.js
index 1897857..9811db9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -52,6 +52,9 @@ export default {
         spacing: {
             '18': '4.5rem',
         },
+        boxShadow: {
+            'mainNav': '-4px 0px 20px 8px rgba(0,0,0,0.1)',
+        },
     },
   },
   plugins: [],

From 13ae538487af67cd0a660886dcfcfc16616802d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?=
 <dorien.groenwald@visuellverstehen.de>
Date: Wed, 5 Jun 2024 19:31:32 +0200
Subject: [PATCH 3/5] refactor: create main navigation component

---
 .../components/navigation/MainNavigation.tsx  | 38 +++++++++++++++++++
 src/tsx/components/navigation/NavItem.tsx     | 21 ++++++----
 src/tsx/layout/Header.tsx                     | 34 ++++++++---------
 3 files changed, 68 insertions(+), 25 deletions(-)
 create mode 100644 src/tsx/components/navigation/MainNavigation.tsx

diff --git a/src/tsx/components/navigation/MainNavigation.tsx b/src/tsx/components/navigation/MainNavigation.tsx
new file mode 100644
index 0000000..e820b21
--- /dev/null
+++ b/src/tsx/components/navigation/MainNavigation.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import NavItem from './NavItem';
+
+interface MainNavigationProps {
+    isOpen: boolean;
+}
+
+const MainNavigation: React.FC<MainNavigationProps> = ({ isOpen }) => {
+    return (
+        <nav
+            id="main-navigation"
+            aria-label="Hauptnavigation"
+            className={`fixed inset-y-2 px-4 w-[60vw] z-10 bg-grey-900 max-w-96 rounded-tl-2xl rounded-bl-2xl transition-all ease-in-out duration-300 shadow-mainNav md:px-6 lg:visible lg:relative lg:block lg:right-auto lg:bg-transparent lg:shadow-none lg:transition-none lg:w-auto ${isOpen ? 'visible block right-0' : 'invisible -right-full'}`}
+        >
+            <p className="pt-[20vh] text-white/80 mb-6 md:text-lg lg:hidden">Hauptnavigation</p>
+            <ul className="text-white lg:text-grey-900 lg:flex lg:gap-x-10 lg:justify-end lg:items-center">
+                <NavItem label="Das Projekt" url="/das-projekt"/>
+                <NavItem label="Kontakt" url="/kontakt"/>
+                <NavItem label="GitHub" url="https://github.com/SmartCityFlensburg" isExternalLink/>
+            </ul>
+
+            <ul className="absolute bottom-6 text-white lg:text-grey-900 flex felx-wrap gap-x-5 items-center text-sm md:bottom-10 md:text-base lg:hidden">
+                <li>
+                    <a href="https://hs-flensburg.de/impressum" target="_blank" className="transition-color ease-in-out duration-300 hover:opacity-75">
+                        Impressum
+                    </a>
+                </li>
+                <li>
+                    <a href="https://hs-flensburg.de/datenschutzerklaerung" target="_blank" className="transition-color ease-in-out duration-300 hover:opacity-75">
+                        Datenschutz
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    );
+}
+
+export default MainNavigation;
diff --git a/src/tsx/components/navigation/NavItem.tsx b/src/tsx/components/navigation/NavItem.tsx
index 778909e..095586e 100644
--- a/src/tsx/components/navigation/NavItem.tsx
+++ b/src/tsx/components/navigation/NavItem.tsx
@@ -3,16 +3,23 @@ import Arrow from "../../icons/Arrow";
 interface NavItemProps {
     label: string;
     url: string;
+    isExternalLink?: boolean;
 }
 
-const NavItem: React.FC<NavItemProps> = ({ label, url }) => {
+const NavItem: React.FC<NavItemProps> = ({ label, url, isExternalLink = false }) => {
     return (
-        <a href={url} className="text-lg font-bold flex justify-between items-center group">
-            <p className="transition-color ease-in-out duration-300 group-hover:text-green-light-900">
-                {label}
-            </p>
-            <Arrow classes="w-6 transition-all ease-in-out duration-300 group-hover:translate-x-2 group-hover:text-green-light-900"/>
-        </a>
+        <li className="mb-4 lg:mb-0">
+            <a
+                href={url}
+                target={isExternalLink ? '_blank' : '_self'}
+                className="text-lg md:text-2xl font-bold flex justify-between items-center group lg:text-lg"
+            >
+                <p className="transition-color ease-in-out duration-300 group-hover:text-green-light-900 lg:group-hover:text-green-middle-900">
+                    {label}
+                </p>
+                <Arrow classes="w-6 transition-all ease-in-out duration-300 group-hover:translate-x-2 group-hover:text-green-light-900 lg:hidden"/>
+            </a>
+        </li>
     );
 }
 
diff --git a/src/tsx/layout/Header.tsx b/src/tsx/layout/Header.tsx
index 6cac04b..0764a84 100644
--- a/src/tsx/layout/Header.tsx
+++ b/src/tsx/layout/Header.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import NavItem from "../components/navigation/NavItem";
+import MainNavigation from '../components/navigation/MainNavigation';
 
 
 function Header() {
@@ -9,18 +9,28 @@ function Header() {
         setOpen(!open);
     }
 
+    React.useEffect(() => {
+        function handleResize() {
+            if (window.matchMedia('(min-width: 1024px)').matches) {
+                setOpen(false);
+            }
+        }
+
+        window.addEventListener('resize', handleResize);
+
+        return () => { window.removeEventListener('resize', handleResize) };
+    }, []);
+
     React.useEffect(() => {
         open
         ? document.body.classList.add('overflow-hidden')
         : document.body.classList.remove('overflow-hidden');
 
-        return () => {
-            document.body.classList.remove('overflow-hidden');
-        };
+        return () => { document.body.classList.remove('overflow-hidden') };
     }, [open]);
 
     return (
-        <header className={`fixed w-screen inset-x-0 top-0 z-50 before:w-screen before:transition-all before:ease-in-out before:duration-300 before:h-screen before:absolute before:bg-grey-900 before:-z-10 ${open ? 'before:visible before:opacity-20' : 'before:opacity-0 before:invisible'}`}>
+        <header className={`fixed w-screen inset-x-0 top-0 z-50 bg-white/75 before:w-screen before:transition-all before:ease-in-out before:duration-300 before:h-screen before:absolute before:bg-grey-900 before:-z-10 lg:before:transition-none ${open ? 'before:visible before:opacity-20' : 'before:opacity-0 before:invisible'}`}>
             <div className="relative px-4 py-5 max-w-screen-lg mx-auto flex justify-between items-center md:px-6 2xl:max-w-screen-xl">
                 <a href="/" aria-label="Zur Startseite navigieren" className="flex items-center gap-x-4 xl:gap-x-5">
                     <img
@@ -43,19 +53,7 @@ function Header() {
                     <span className={`block w-6 h-0.5 transition-all ease-in-out duration-300 ${open ? 'bg-white -rotate-45 absolute' : 'bg-grey-900 mb-1'}`}></span>
                 </button>
 
-                <nav
-                    id="main-navigation"
-                    className={`fixed inset-y-2 w-[60vw] z-10 text-white bg-grey-900 max-w-96 rounded-tl-2xl rounded-bl-2xl transition-all ease-in-out duration-300 shadow-mainNav ${open ? 'visible block right-0' : 'invisible -right-full'}`}
-                >
-                    <ul className="px-4 pt-[30vh] md:px-6">
-                        <li className="mb-4">
-                            <NavItem label="Das Projekt" url="/das-projekt"/>
-                        </li>
-                        <li>
-                            <NavItem label="Kontakt" url="/kontakt"/>
-                        </li>
-                    </ul>
-                </nav>
+                <MainNavigation isOpen={open}/>
             </div>
         </header>
     );

From 5f5ac5e28aca954157f99598810666f7cc9b62eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?=
 <dorien.groenwald@visuellverstehen.de>
Date: Wed, 5 Jun 2024 21:32:22 +0200
Subject: [PATCH 4/5] feat: add a click outside option for navigation

---
 .../components/navigation/MainNavigation.tsx  | 12 ++++++++++-
 src/tsx/hooks/useOutsideClick.tsx             | 20 +++++++++++++++++++
 src/tsx/layout/Header.tsx                     | 14 ++++++-------
 3 files changed, 38 insertions(+), 8 deletions(-)
 create mode 100644 src/tsx/hooks/useOutsideClick.tsx

diff --git a/src/tsx/components/navigation/MainNavigation.tsx b/src/tsx/components/navigation/MainNavigation.tsx
index e820b21..977c9ce 100644
--- a/src/tsx/components/navigation/MainNavigation.tsx
+++ b/src/tsx/components/navigation/MainNavigation.tsx
@@ -1,14 +1,24 @@
 import * as React from 'react';
 import NavItem from './NavItem';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
 
 interface MainNavigationProps {
     isOpen: boolean;
+    onClose: () => void;
 }
 
-const MainNavigation: React.FC<MainNavigationProps> = ({ isOpen }) => {
+const MainNavigation: React.FC<MainNavigationProps> = ({ isOpen, onClose }) => {
+
+    const ref = useOutsideClick(() => {
+        if (event.target !== document.getElementById('main-navigation-toggle')) {
+            onClose();
+        }
+    });
+
     return (
         <nav
             id="main-navigation"
+            ref={ref}
             aria-label="Hauptnavigation"
             className={`fixed inset-y-2 px-4 w-[60vw] z-10 bg-grey-900 max-w-96 rounded-tl-2xl rounded-bl-2xl transition-all ease-in-out duration-300 shadow-mainNav md:px-6 lg:visible lg:relative lg:block lg:right-auto lg:bg-transparent lg:shadow-none lg:transition-none lg:w-auto ${isOpen ? 'visible block right-0' : 'invisible -right-full'}`}
         >
diff --git a/src/tsx/hooks/useOutsideClick.tsx b/src/tsx/hooks/useOutsideClick.tsx
new file mode 100644
index 0000000..3f278ff
--- /dev/null
+++ b/src/tsx/hooks/useOutsideClick.tsx
@@ -0,0 +1,20 @@
+import { useEffect, useRef } from 'react';
+
+export function useOutsideClick(callback: () => void) {
+    const ref = useRef(null);
+
+    useEffect(() => {
+        function handleClickOutside(event: MouseEvent) {
+            if (ref.current && !ref.current.contains(event.target)) {
+                callback();
+            }
+        }
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [ref, callback]);
+
+    return ref;
+}
diff --git a/src/tsx/layout/Header.tsx b/src/tsx/layout/Header.tsx
index 0764a84..cf943e2 100644
--- a/src/tsx/layout/Header.tsx
+++ b/src/tsx/layout/Header.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react';
 import MainNavigation from '../components/navigation/MainNavigation';
 
-
 function Header() {
     const [open, setOpen] = React.useState(false);
 
-    function toggleNavigation() {
-        setOpen(!open);
+    function toggleNavigation(state: boolean) {
+        setOpen(state);
     }
 
     React.useEffect(() => {
@@ -30,9 +29,9 @@ function Header() {
     }, [open]);
 
     return (
-        <header className={`fixed w-screen inset-x-0 top-0 z-50 bg-white/75 before:w-screen before:transition-all before:ease-in-out before:duration-300 before:h-screen before:absolute before:bg-grey-900 before:-z-10 lg:before:transition-none ${open ? 'before:visible before:opacity-20' : 'before:opacity-0 before:invisible'}`}>
+        <header className={`fixed w-screen inset-x-0 top-0 z-50 bg-white/75 before:w-screen before:transition-all before:ease-in-out before:duration-300 before:h-screen before:absolute before:bg-grey-900 before:-z-10 lg:before:transition-none ${open ? 'before:visible before:opacity-60' : 'before:opacity-0 before:invisible'}`}>
             <div className="relative px-4 py-5 max-w-screen-lg mx-auto flex justify-between items-center md:px-6 2xl:max-w-screen-xl">
-                <a href="/" aria-label="Zur Startseite navigieren" className="flex items-center gap-x-4 xl:gap-x-5">
+                <a href="/" aria-label="Zur Startseite navigieren" className={`flex items-center gap-x-4 xl:gap-x-5 ${open ? 'opacity-0' : ''}`}>
                     <img
                         src="/assets/svg/logo/logo-large-color.svg"
                         className="w-24 xl:w-28" alt="Green Ecolution Logo"/>
@@ -42,18 +41,19 @@ function Header() {
                 </a>
 
                 <button
+                    id="main-navigation-toggle"
                     aria-expanded={open}
                     aria-controls="main-navigation"
                     aria-haspopup="menu"
                     aria-label="Hauptnavigation öffnen"
                     className="relative w-10 h-10 p-2 z-50 group lg:hidden"
-                    onClick={toggleNavigation}
+                    onClick={() => toggleNavigation(!open)}
                 >
                     <span className={`block w-6 h-0.5 transition-all ease-in-out duration-300 ${open ? 'bg-white rotate-45 absolute' : 'bg-grey-900 mb-1'}`}></span>
                     <span className={`block w-6 h-0.5 transition-all ease-in-out duration-300 ${open ? 'bg-white -rotate-45 absolute' : 'bg-grey-900 mb-1'}`}></span>
                 </button>
 
-                <MainNavigation isOpen={open}/>
+                <MainNavigation isOpen={open} onClose={() => toggleNavigation(false)}/>
             </div>
         </header>
     );

From d565db05c3058d4ade7bf020e097615726998de9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?=
 <dorien.groenwald@visuellverstehen.de>
Date: Wed, 5 Jun 2024 21:43:37 +0200
Subject: [PATCH 5/5] fix: typescript errors in helper

---
 .../components/navigation/MainNavigation.tsx  |  8 +++++---
 src/tsx/hooks/useOutsideClick.tsx             | 19 +++++++++++--------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/tsx/components/navigation/MainNavigation.tsx b/src/tsx/components/navigation/MainNavigation.tsx
index 977c9ce..c8fe5ad 100644
--- a/src/tsx/components/navigation/MainNavigation.tsx
+++ b/src/tsx/components/navigation/MainNavigation.tsx
@@ -9,10 +9,12 @@ interface MainNavigationProps {
 
 const MainNavigation: React.FC<MainNavigationProps> = ({ isOpen, onClose }) => {
 
-    const ref = useOutsideClick(() => {
-        if (event.target !== document.getElementById('main-navigation-toggle')) {
-            onClose();
+    const ref = useOutsideClick((event: MouseEvent) => {
+        const toggleElement = document.getElementById('main-navigation-toggle');
+        if (toggleElement && (event.target === toggleElement || toggleElement.contains(event.target as Node))) {
+            return;
         }
+        onClose();
     });
 
     return (
diff --git a/src/tsx/hooks/useOutsideClick.tsx b/src/tsx/hooks/useOutsideClick.tsx
index 3f278ff..5e22672 100644
--- a/src/tsx/hooks/useOutsideClick.tsx
+++ b/src/tsx/hooks/useOutsideClick.tsx
@@ -1,20 +1,23 @@
 import { useEffect, useRef } from 'react';
 
-export function useOutsideClick(callback: () => void) {
-    const ref = useRef(null);
+export const useOutsideClick = (callback: (event: MouseEvent) => void) => {
+    const ref = useRef<HTMLElement | null>(null);
 
     useEffect(() => {
-        function handleClickOutside(event: MouseEvent) {
-            if (ref.current && !ref.current.contains(event.target)) {
-                callback();
+        const handleClickOutside = (event: MouseEvent) => {
+            if (ref.current && !ref.current.contains(event.target as Node)) {
+                callback(event);
             }
-        }
+        };
 
         document.addEventListener('mousedown', handleClickOutside);
+
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, [ref, callback]);
+    }, [callback]);
 
     return ref;
-}
+};
+
+export default useOutsideClick;