Feature/add header

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>,

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>

src/tsx/components/navigation/MainNavigation.tsx

@@ -0,0 +1,50 @@
+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, 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 (
+        <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'}`}
+        >
+            <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;

src/tsx/components/navigation/NavItem.tsx

@@ -0,0 +1,26 @@
+import Arrow from "../../icons/Arrow";
+
+interface NavItemProps {
+    label: string;
+    url: string;
+    isExternalLink?: boolean;
+}
+
+const NavItem: React.FC<NavItemProps> = ({ label, url, isExternalLink = false }) => {
+    return (
+        <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>
+    );
+}
+
+export default NavItem;

src/tsx/hooks/useOutsideClick.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react';
+
+export const useOutsideClick = (callback: (event: MouseEvent) => void) => {
+    const ref = useRef<HTMLElement | null>(null);
+
+    useEffect(() => {
+        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);
+        };
+    }, [callback]);
+
+    return ref;
+};
+
+export default useOutsideClick;

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" strokeWidth="1.5" stroke="currentColor"
+            className={classes}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+        </svg>
+    );
+}
+
+export default Arrow;

src/tsx/layout/Header.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import MainNavigation from '../components/navigation/MainNavigation';
+
+function Header() {
+    const [open, setOpen] = React.useState(false);
+
+    function toggleNavigation(state: boolean) {
+        setOpen(state);
+    }
+
+    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') };
+    }, [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-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 ${open ? 'opacity-0' : ''}`}>
+                    <img
+                        src="/assets/svg/logo/logo-large-color.svg"
+                        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>
+                </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(!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} onClose={() => toggleNavigation(false)}/>
+            </div>
+        </header>
+    );
+}
+
+export default Header;

tailwind.config.js

@@ -17,7 +17,7 @@ export default {
           '900': '#659858',
         },
         'dark': {
-          '900': '#659858',
+          '900': '#4C7741',
         },
       },
       'grey': {
@@ -48,7 +48,13 @@ export default {
         },
         screens: {
             '3xl': '1920px',
-        }
+        },
+        spacing: {
+            '18': '4.5rem',
+        },
+        boxShadow: {
+            'mainNav': '-4px 0px 20px 8px rgba(0,0,0,0.1)',
+        },
     },
   },
   plugins: [],