From d0d4a5128156f3afc5d45e0c369145f88eef2f5d Mon Sep 17 00:00:00 2001
From: "Embruch, Gerd" <gerd.embruch@uni-hamburg.de>
Date: Mon, 1 Jul 2024 11:23:28 +0200
Subject: [PATCH] added basic responsive header

---
 package-lock.json               | 456 +++++++++++++++++++++++++++++++-
 package.json                    |   5 +-
 public/vite.svg                 |   1 -
 src/assets/img/uhh_logo.svg     | 162 ++++++++++++
 src/layouts/MainLayout.jsx      |   2 +
 src/layouts/partials/Header.jsx |  63 +++++
 vite.config.js                  |   9 +-
 7 files changed, 691 insertions(+), 7 deletions(-)
 delete mode 100644 public/vite.svg
 create mode 100755 src/assets/img/uhh_logo.svg
 create mode 100644 src/layouts/partials/Header.jsx

diff --git a/package-lock.json b/package-lock.json
index c6a7438..60347a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,10 @@
       "name": "ragchat-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "hamburger-react": "^2.5.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.2.1",
         "react-router-dom": "^6.24.0"
       },
       "devDependencies": {
@@ -24,7 +26,8 @@
         "postcss": "^8.4.39",
         "sass": "^1.77.6",
         "tailwindcss": "^3.4.4",
-        "vite": "^5.3.1"
+        "vite": "^5.3.1",
+        "vite-plugin-svgr": "^4.2.0"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -1073,6 +1076,29 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
+      "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.18.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
@@ -1297,6 +1323,231 @@
         "win32"
       ]
     },
+    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz",
+      "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz",
+      "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz",
+      "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz",
+      "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz",
+      "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-svg-component": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz",
+      "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-preset": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz",
+      "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@svgr/babel-plugin-add-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0",
+        "@svgr/babel-plugin-svg-dynamic-title": "8.0.0",
+        "@svgr/babel-plugin-svg-em-dimensions": "8.0.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "8.1.0",
+        "@svgr/babel-plugin-transform-svg-component": "8.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/core": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz",
+      "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^8.1.3",
+        "snake-case": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/hast-util-to-babel-ast": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz",
+      "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.21.3",
+        "entities": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/plugin-jsx": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz",
+      "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "@svgr/hast-util-to-babel-ast": "8.0.0",
+        "svg-parser": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "*"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1813,6 +2064,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -1938,6 +2202,33 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cosmiconfig": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+      "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -2115,6 +2406,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -2136,6 +2438,29 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
@@ -2675,6 +3000,13 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -3043,6 +3375,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/hamburger-react": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/hamburger-react/-/hamburger-react-2.5.1.tgz",
+      "integrity": "sha512-XlTIinYeYzLu76q4Vd9olwOJP0hFgAeZfJFX6tTT/ufTLhmOjI77CGFYIwGc6gcDeeT86660ZoKx3/L67vdZEw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -3226,6 +3567,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-async-function": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
@@ -3703,6 +4051,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -3822,6 +4177,16 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3924,6 +4289,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
@@ -4163,6 +4539,25 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -4227,6 +4622,16 @@
         "node": "14 || >=16.14"
       }
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
@@ -4530,6 +4935,15 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -4922,6 +5336,17 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -5220,6 +5645,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
@@ -5336,6 +5768,13 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/tslib": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+      "dev": true,
+      "license": "0BSD"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -5559,6 +5998,21 @@
         }
       }
     },
+    "node_modules/vite-plugin-svgr": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.2.0.tgz",
+      "integrity": "sha512-SC7+FfVtNQk7So0XMjrrtLAbEC8qjFPifyD7+fs/E6aaNdVde6umlVVh0QuwDLdOMu7vp5RiGFsB70nj5yo0XA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.5",
+        "@svgr/core": "^8.1.0",
+        "@svgr/plugin-jsx": "^8.1.0"
+      },
+      "peerDependencies": {
+        "vite": "^2.6.0 || 3 || 4 || 5"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 1957a22..4dd3acf 100644
--- a/package.json
+++ b/package.json
@@ -11,8 +11,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "hamburger-react": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.24.0"
   },
   "devDependencies": {
@@ -27,6 +29,7 @@
     "postcss": "^8.4.39",
     "sass": "^1.77.6",
     "tailwindcss": "^3.4.4",
-    "vite": "^5.3.1"
+    "vite": "^5.3.1",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }
diff --git a/public/vite.svg b/public/vite.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/uhh_logo.svg b/src/assets/img/uhh_logo.svg
new file mode 100755
index 0000000..0e6c0de
--- /dev/null
+++ b/src/assets/img/uhh_logo.svg
@@ -0,0 +1,162 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" className="h-full pointer-events-none" viewBox="0 0 392.46 127.19">
+    <defs>
+    <style>
+        .uhhlogo--cls-1 {
+        fill: #1d1d1b;
+        stroke-opacity: 0;
+        }
+
+        .uhhlogo--cls-2 {
+        fill: #e2001a;
+        }
+
+        .uhhlogo--cls-3 {
+        fill: #fff;
+        }
+    </style>
+    </defs>
+    <title>UHH [external]</title>
+    <path className="uhhlogo--cls-1"
+    d="M120.1,97.25c-6.11,0-7.41-3.51-7.41-7.26V76.53h3.14V89.75c0,2.72.87,4.78,4.47,4.78,3.17,0,4.61-1.39,4.61-5.2V76.53H128V89.08C128,94.53,125.21,97.25,120.1,97.25Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M142,96.95V88c0-1.74-.48-2.74-2.07-2.74-2.1,0-3.64,2.21-3.64,5v6.72h-3V83h2.86a18.23,18.23,0,0,1-.2,2.72l0,0a5.08,5.08,0,0,1,4.84-3c3.16,0,4.14,2,4.14,4.45v9.74Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1" d="M151.7,81a1.88,1.88,0,1,1,0-3.75,1.88,1.88,0,1,1,0,3.75Zm-1.51,16V83h3V96.95Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M164.64,96.95h-3.05L156.38,83h3.3l2.6,7.36c.34,1,.64,1.93.9,2.86h0c.22-.87.5-1.85.81-2.74L166.68,83h3.22Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M183.93,90.17h-8.88c-.08,3.22,1.34,4.68,4.12,4.68a9.59,9.59,0,0,0,4.06-.9l.28,2.38a12.72,12.72,0,0,1-4.82.9c-4.34,0-6.72-2.24-6.72-7.14,0-4.2,2.3-7.34,6.36-7.34s5.68,2.72,5.68,6A13.66,13.66,0,0,1,183.93,90.17ZM178.22,85c-1.68,0-2.86,1.23-3.11,3.11H181A2.71,2.71,0,0,0,178.22,85Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M195.35,85.69c-2.77-.5-4.12,1.43-4.12,5.6v5.66h-3V83h2.86a18.68,18.68,0,0,1-.28,3.08h.06c.62-1.88,2-3.61,4.62-3.36Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M201.32,97.23a15.89,15.89,0,0,1-2.94-.28l.08-2.55a11.25,11.25,0,0,0,3,.45c1.62,0,2.74-.7,2.74-1.85,0-2.8-6.1-1.12-6.1-5.94,0-2.41,2-4.31,5.74-4.31a16.75,16.75,0,0,1,2.6.25l-.08,2.44a9.8,9.8,0,0,0-2.72-.39c-1.65,0-2.46.67-2.46,1.74,0,2.69,6.16,1.32,6.16,5.94C207.37,95.32,205,97.23,201.32,97.23Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1" d="M213.16,81a1.88,1.88,0,1,1,0-3.75,1.88,1.88,0,1,1,0,3.75Zm-1.51,16V83h3V96.95Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M224.87,97.19c-3,0-3.86-1.12-3.86-4.17V85.59h-2.66V83.31H221V79l3-.8v5.13h3.67v2.28H224v6.53c0,2,.42,2.58,1.82,2.58a7.7,7.7,0,0,0,1.82-.22v2.41A14.81,14.81,0,0,1,224.87,97.19Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M239.12,96.95a18.67,18.67,0,0,1,.14-2.58l0,0a4.86,4.86,0,0,1-4.62,2.88c-2.38,0-3.89-1.34-3.89-3.56,0-3.19,3.19-5,8.2-5v-.9c0-1.74-.73-2.63-2.91-2.63a8.53,8.53,0,0,0-4.14,1.12l-.28-2.55a13.88,13.88,0,0,1,4.9-.92c4.26,0,5.43,1.85,5.43,4.7v5.68c0,1.2,0,2.63.08,3.81ZM234,80.4A1.69,1.69,0,0,1,234,77a1.69,1.69,0,1,1,0,3.39Zm5,10.25c-4.37,0-5.32,1.32-5.32,2.52a1.69,1.69,0,0,0,1.9,1.71c2,0,3.42-2,3.42-3.95Zm.56-10.25a1.69,1.69,0,1,1,1.68-1.71A1.7,1.7,0,0,1,239.48,80.4Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M251.63,97.19c-3,0-3.86-1.12-3.86-4.17V85.59h-2.66V83.31h2.66V79l3-.8v5.13h3.67v2.28h-3.64v6.53c0,2,.42,2.58,1.82,2.58a7.7,7.7,0,0,0,1.82-.22v2.41A14.81,14.81,0,0,1,251.63,97.19Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1" d="M282.58,96.95V87.78h-9.2v9.16h-3.14V76.53h3.14V85h9.2V76.53h3.12V96.95Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M299.59,96.95a18.36,18.36,0,0,1,.14-2.58l0,0a4.86,4.86,0,0,1-4.62,2.88c-2.38,0-3.89-1.34-3.89-3.56,0-3.19,3.19-5,8.2-5v-.9c0-1.74-.73-2.63-2.91-2.63a8.52,8.52,0,0,0-4.14,1.12l-.28-2.55a13.87,13.87,0,0,1,4.9-.92c4.26,0,5.43,1.85,5.43,4.7v5.68c0,1.2,0,2.63.08,3.81Zm-.2-6.3c-4.37,0-5.32,1.32-5.32,2.52a1.69,1.69,0,0,0,1.9,1.71c2,0,3.42-2,3.42-3.95Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M325,96.95V88.07c0-1.74-.42-2.83-2-2.83-1.79,0-3.58,2-3.58,5v6.66H316.5V88c0-1.57-.34-2.8-2-2.8-1.9,0-3.56,2.13-3.56,5v6.66h-3V83h2.86a18.43,18.43,0,0,1-.2,2.72l.06,0a5,5,0,0,1,4.7-3,3.56,3.56,0,0,1,3.87,3,5,5,0,0,1,4.65-3c2.66,0,4.14,1.43,4.14,4.59v9.6Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M338.18,97.17a18.79,18.79,0,0,1-5-.59V76.51h3v6.41a13.61,13.61,0,0,1-.25,2.66H336a4.64,4.64,0,0,1,4.42-2.83c3.3,0,5.12,2.35,5.12,6.55C345.57,94.12,342.79,97.17,338.18,97.17Zm1.48-11.93c-2.24,0-3.45,2.6-3.45,5v4.31a7.17,7.17,0,0,0,2.19.28c2.38,0,4-1.46,4-5.21C342.4,86.78,341.54,85.24,339.66,85.24Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M359.06,96.95a18.18,18.18,0,0,1,.2-2.72l0,0a5.08,5.08,0,0,1-4.84,3c-3.16,0-4.14-2-4.14-4.45V83h3v9c0,1.74.48,2.74,2.07,2.74,2.1,0,3.64-2.21,3.64-5V83h3V96.95Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M375.08,85.69c-2.77-.5-4.12,1.43-4.12,5.6v5.66h-3V83h2.86a18.58,18.58,0,0,1-.28,3.08h.06c.62-1.88,2-3.61,4.62-3.36Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M384.37,104.11c-3.64,0-5.91-1.4-5.91-4.09a4.05,4.05,0,0,1,2.24-3.5,2.29,2.29,0,0,1-1.37-2.07,2.61,2.61,0,0,1,1.6-2.38,4.23,4.23,0,0,1-2.07-3.92c0-2.94,2.24-5.4,6.22-5.4a10.1,10.1,0,0,1,2.29.28h4.71v2.35h-2.13a2.94,2.94,0,0,1,1,2.32c0,3-2.1,5.15-6,5.15a9.15,9.15,0,0,1-1.6-.14,1.15,1.15,0,0,0-.81,1c0,.7.62,1,2.29,1h2.38c3,0,4.73,1.43,4.73,4C391.88,101.73,388.86,104.11,384.37,104.11Zm2-6.94h-2.6a6.71,6.71,0,0,1-.76,0,2.71,2.71,0,0,0-1.54,2.32c0,1.48,1.4,2.32,3.42,2.32,2.6,0,4.06-1.12,4.06-2.63C388.91,98,388.1,97.17,386.34,97.17ZM384.94,85a2.85,2.85,0,0,0-3.16,2.91c0,1.82,1.12,2.88,3.14,2.88s3.11-1,3.11-2.86A2.76,2.76,0,0,0,384.94,85Z"
+    transform="translate(0.39 -0.66)" />
+    <polygon className="uhhlogo--cls-2" points="0.42 0 96.39 0 96.39 95.97 0.42 95.97 0.42 0 0.42 0" />
+    <polygon className="uhhlogo--cls-3"
+    points="62.11 56.88 63.48 56.88 62.8 55.7 63.48 54.51 62.11 54.51 61.43 53.32 60.74 54.51 59.37 54.51 60.06 55.7 59.37 56.88 60.74 56.88 61.43 58.07 62.11 56.88 62.11 56.88" />
+    <polygon className="uhhlogo--cls-3"
+    points="83.57 56.88 84.94 56.88 84.25 55.7 84.94 54.51 83.57 54.51 82.88 53.32 82.19 54.51 80.83 54.51 81.51 55.7 80.83 56.88 82.19 56.88 82.88 58.07 83.57 56.88 83.57 56.88" />
+    <path className="uhhlogo--cls-3"
+    d="M68,58.09v.26H66.5V60.1h1.69v11h-3.9V60.35h-6.5V71.06H55.67v1.82h32.2V71.06H85.74V60.35h-6.5V71.06h-3.9v-11H77V58.35h-1.5a3.89,3.89,0,0,0-3-3.93V52.53h1.41V51.21H72.54V49.6H71v1.61H69.59v1.32H71v1.9a3.76,3.76,0,0,0-3,3.67Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-3"
+    d="M71.77,80.39a4.3,4.3,0,0,0-4.3,4.3l-.08,7.2H53.88a62.94,62.94,0,0,0,3.75-17.13H85.9a63,63,0,0,0,3.75,17.13H76.14l-.08-7.2a4.3,4.3,0,0,0-4.3-4.3Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-3"
+    d="M41.81,32H38V21.2H26.71v2.49c0,5.42-3.2,8.66-9.46,8.66-6.43,0-9.46-3-9.46-8.55V7.94h3.89V23c0,3.87,1.35,6.13,5.61,6.13S22.9,26.89,22.9,23V7.94h3.81v9.95H38V7.94h3.85v9.95H53.14V7.94H57V32H53.14V21.2H41.81V32Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M3,126.42c-1.27,0-2.37-.05-3.4-.09V114.15c1,0,2.44-.09,3.95-.09,3.78,0,6.19,1.68,6.19,6S7,126.42,3,126.42ZM3.4,116c-.54,0-1,0-1.43.05v8.23a8.5,8.5,0,0,0,1.29.09c2.3,0,4-1.3,4-4.2C7.21,117.59,6.18,116,3.4,116Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1" d="M11.87,126.35V114.13h6.64v2H14.22v3h4.07V121H14.22v3.31h4.29v2Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M26.82,126.35l-3.4-5h-.09v5H21V114.13c1-.05,2.1-.07,3.51-.07,2.7,0,4.43.94,4.43,3.44a3.42,3.42,0,0,1-3.11,3.4c.34.45.69.92,1,1.34l2.93,4.11ZM24.25,116a6.68,6.68,0,0,0-.92.05v3.53c.16,0,.49,0,.85,0,1.41,0,2.28-.72,2.28-1.86S25.73,116,24.25,116Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1" d="M40.59,116.18v3.13h3.93v1.93H40.59v5.11H38.25V114.2h6.5v2Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M51.7,126.55c-3.71,0-5.53-2.36-5.53-6.12,0-4,2.68-6.43,5.94-6.43s5.53,1.94,5.53,6.1S55,126.55,51.7,126.55Zm.2-10.44c-1.67,0-3.22,1.33-3.22,4.07,0,2.57,1,4.25,3.19,4.25,1.58,0,3.28-1.22,3.28-4.14C55.14,117.58,54,116.11,51.9,116.11Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M65.58,126.35l-3.39-5H62.1v5H59.76V114.2c1-.05,2.09-.07,3.49-.07,2.68,0,4.41.94,4.41,3.42a3.4,3.4,0,0,1-3.1,3.38l1,1.33,2.92,4.09ZM63,116a6.6,6.6,0,0,0-.92.05v3.51c.16,0,.49,0,.85,0,1.4,0,2.27-.72,2.27-1.85S64.5,116,63,116Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M72.45,126.55a10,10,0,0,1-2.48-.29l.14-2.18a8.4,8.4,0,0,0,2.54.43c1.19,0,2.11-.49,2.11-1.6,0-2.32-5.1-1.26-5.1-5.26,0-2.16,1.71-3.66,4.63-3.66a13.35,13.35,0,0,1,2.2.22l-.13,2.05a8,8,0,0,0-2.18-.32c-1.35,0-2,.61-2,1.48,0,2.18,5.11,1.37,5.11,5.17C77.26,124.87,75.44,126.55,72.45,126.55Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M84.56,126.51c-4.25,0-5.62-2.83-5.62-5.85,0-3.85,2-6.55,6.09-6.55a10.1,10.1,0,0,1,2.57.32l-.25,2.12a8.66,8.66,0,0,0-2.45-.36c-2.27,0-3.39,1.71-3.39,4.07,0,2.65,1.1,4.12,3.55,4.12a6.42,6.42,0,0,0,2.36-.5L87.7,126A9.43,9.43,0,0,1,84.56,126.51Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1" d="M97.6,126.35v-5.28H92.45v5.28H90.11V114.2h2.34v4.86H97.6V114.2h2.34v12.15Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M107.75,126.55c-3.84,0-4.7-2.09-4.7-4.41V114.2h2.34V122c0,1.53.5,2.61,2.52,2.61,1.8,0,2.56-.76,2.56-2.83V114.2h2.32v7.44C112.79,125,111,126.55,107.75,126.55Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M122.87,126.35l-3.56-6.14A27.38,27.38,0,0,1,118,117.6c.07,1,.11,3,.11,4.41v4.34h-2.27V114.2h3l3.39,5.8c.56.94,1,1.94,1.49,2.86-.09-1.22-.13-3.38-.13-4.88V114.2h2.27v12.15Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M138,116.72a9,9,0,0,0-3.22-.61,3.9,3.9,0,0,0-4.12,4.23c0,2.57,1.4,4.09,3.87,4.09a5.2,5.2,0,0,0,1.55-.22V120h2.34v5.8a11.47,11.47,0,0,1-4.16.76c-3.85,0-6.14-2.27-6.14-6s2.59-6.54,6.81-6.54a12.4,12.4,0,0,1,3.44.52Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1" d="M151.69,127.85V113.74h1.67v14.11Z" transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M169.87,126.42c-1.26,0-2.36-.05-3.39-.09V114.21c1,0,2.43-.09,3.93-.09,3.76,0,6.16,1.67,6.16,5.94S173.83,126.42,169.87,126.42Zm.38-10.33c-.54,0-1,0-1.42.05v8.19a8.55,8.55,0,0,0,1.28.09c2.29,0,3.94-1.3,3.94-4.18C174.05,117.64,173,116.09,170.25,116.09Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1" d="M178.67,126.35V114.2h6.61v2H181v3h4.05v1.91H181v3.29h4.27v2Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M193.54,126.35l-3.39-5h-.09v5h-2.34V114.2c1-.05,2.09-.07,3.49-.07,2.68,0,4.41.94,4.41,3.42a3.4,3.4,0,0,1-3.1,3.38c.34.45.68.92,1,1.33l2.92,4.09ZM191,116a6.6,6.6,0,0,0-.92.05v3.51c.16,0,.49,0,.85,0,1.4,0,2.27-.72,2.27-1.85S192.46,116,191,116Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1" d="M204.92,126.35V114.2h2.34v10.1h3.94v2.05Z" transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1" d="M212.91,126.35V114.2h6.61v2h-4.27v3h4.05v1.91h-4.05v3.29h4.27v2Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1" d="M229.54,126.35v-5.28h-5.15v5.28h-2.34V114.2h2.34v4.86h5.15V114.2h2.34v12.15Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M240.85,126.35l-3.38-5h-.09v5H235V114.2c1-.05,2.09-.07,3.49-.07,2.68,0,4.41.94,4.41,3.42a3.4,3.4,0,0,1-3.1,3.38l1,1.33,2.92,4.09ZM238.29,116a6.6,6.6,0,0,0-.92.05v3.51c.16,0,.49,0,.85,0,1.4,0,2.27-.72,2.27-1.85S239.77,116,238.29,116Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1" d="M245.63,126.35V114.2h6.61v2H248v3H252v1.91H248v3.29h4.27v2Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1" d="M265.36,127.85V113.74H267v14.11Z" transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M283.21,126.42c-1.26,0-2.36-.05-3.38-.09V114.21c1,0,2.43-.09,3.93-.09,3.76,0,6.16,1.67,6.16,5.94S287.17,126.42,283.21,126.42Zm.38-10.33c-.54,0-1,0-1.42.05v8.19a8.56,8.56,0,0,0,1.28.09c2.29,0,3.94-1.3,3.94-4.18C287.39,117.64,286.36,116.09,283.59,116.09Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1" d="M292,126.35V114.2h6.61v2h-4.27v3h4.05v1.91h-4.05v3.29h4.27v2Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M306.88,126.35l-3.38-5h-.09v5h-2.34V114.2c1-.05,2.09-.07,3.49-.07,2.68,0,4.41.94,4.41,3.42a3.4,3.4,0,0,1-3.1,3.38c.34.45.69.92,1,1.33l2.92,4.09ZM304.33,116a6.61,6.61,0,0,0-.92.05v3.51c.16,0,.49,0,.85,0,1.4,0,2.27-.72,2.27-1.85S305.8,116,304.33,116Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M321.8,126.39c-.74,0-2,0-3.55,0V114.21c1-.05,2.61-.09,4.11-.09,2.63,0,4.09,1.06,4.09,3a3,3,0,0,1-1.93,2.72v0a2.68,2.68,0,0,1,2.16,2.72C326.68,124.37,325.48,126.39,321.8,126.39ZM322,116c-.49,0-1,0-1.37,0v3.17c.29,0,.58,0,1,0,1.6,0,2.43-.65,2.43-1.73C324,116.61,323.44,116,322,116Zm-.34,5c-.18,0-.77,0-1,0v3.4a10.71,10.71,0,0,0,1.28.07c1.53,0,2.3-.72,2.3-1.82S323.15,121,321.62,121Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1" d="M329.11,126.35V114.2h2.34v12.15Z" transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1" d="M334.58,126.35V114.2h2.34v10.1h3.94v2.05Z" transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M346,126.42c-1.26,0-2.36-.05-3.38-.09V114.21c1,0,2.43-.09,3.92-.09,3.76,0,6.16,1.67,6.16,5.94S349.92,126.42,346,126.42Zm.38-10.33c-.54,0-1,0-1.42.05v8.19a8.56,8.56,0,0,0,1.28.09c2.29,0,3.94-1.3,3.94-4.18C350.13,117.64,349.11,116.09,346.34,116.09Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M359.55,126.55c-3.84,0-4.7-2.09-4.7-4.41V114.2h2.34V122c0,1.53.5,2.61,2.52,2.61,1.8,0,2.56-.76,2.56-2.83V114.2h2.32v7.44C364.59,125,362.75,126.55,359.55,126.55Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M374.67,126.35l-3.57-6.14a27.86,27.86,0,0,1-1.31-2.61c.07,1,.11,3,.11,4.41v4.34h-2.27V114.2h3l3.38,5.8c.56.94,1,1.94,1.49,2.86-.09-1.22-.12-3.38-.12-4.88V114.2h2.27v12.15Z"
+    transform="translate(0.39 -0.66)" />
+    <path className="uhhlogo--cls-1"
+    d="M389.75,116.72a9,9,0,0,0-3.22-.61,3.9,3.9,0,0,0-4.12,4.23c0,2.57,1.4,4.09,3.87,4.09a5.21,5.21,0,0,0,1.55-.22V120h2.34v5.8a11.46,11.46,0,0,1-4.16.76c-3.85,0-6.14-2.27-6.14-6s2.59-6.54,6.81-6.54a12.42,12.42,0,0,1,3.44.52Z"
+    transform="translate(0.39 -0.66)" />
+</svg>
\ No newline at end of file
diff --git a/src/layouts/MainLayout.jsx b/src/layouts/MainLayout.jsx
index 40fa6d1..b8f161e 100644
--- a/src/layouts/MainLayout.jsx
+++ b/src/layouts/MainLayout.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
+import Header from './partials/Header';
 
 function MainLayout() {
   // #################################
@@ -15,6 +16,7 @@ function MainLayout() {
   // #################################
   return (
     <>
+      <Header />
       <Outlet />
     </>
   );
diff --git a/src/layouts/partials/Header.jsx b/src/layouts/partials/Header.jsx
new file mode 100644
index 0000000..e35daaf
--- /dev/null
+++ b/src/layouts/partials/Header.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import UhhImg from '/src/assets/img/uhh_logo.svg?react';
+import PortalImg from '/src/assets/img/portal_logo.svg?react';
+import { Link } from 'react-router-dom';
+import { RiFilter2Line } from 'react-icons/ri';
+import Hamburger from 'hamburger-react';
+
+
+
+function Header() {
+  // #################################
+  // HOOKS
+  // #################################
+
+  // #################################
+  // FUNCTIONS
+  // #################################
+
+  // #################################
+  // OUTPUT
+  // #################################
+  return (
+    <header role="banner" className='row-start-1 col-span-full sm:flex justify-center'>
+      {/* mobile */}
+      <div className="flex justify-between items-center bg-UhhBlue text-UhhWhite px-4 py-2 sm:hidden">
+        <a className="hidden h-16" href="https://www.uni-hamburg.de" target="_blank" title="UHH [external]">
+          <UhhImg />
+        </a>
+        <Link className="flex" to="/">
+          <div className="h-8 pr-2">
+            <PortalImg alt='Logo of ZBH Portal' />
+          </div>
+          <h2>ZBH-Portal</h2>
+        </Link>
+        <span className="h-12 flex items-center gap-x-4">
+          <div className="h-8 w-8">
+            <RiFilter2Line className='text-3xl' />
+          </div>
+          <div className="h-full w-8">
+            <Hamburger label='show navigation' duration={0.3} />
+          </div>
+        </span>
+      </div>
+      {/* desktop */}
+      <div className="hidden text-UhhWhite px-4 py-2 sm:flex justify-between container">
+        <a className="inline-block h-20" href="https://www.uni-hamburg.de" target="_blank" title="UHH [external]">
+          <UhhImg />
+        </a>
+        <Link className="flex items-center" to="/">
+          <div className="text-UhhBlue h-20 pr-2">
+            <PortalImg />
+          </div>
+          <h2 className="font-UhhBC">
+            <div className="text-UhhGrey">ZBH</div>
+            <div className="text-UhhBlue">Portal</div>
+          </h2>
+        </Link>
+      </div>
+    </header>
+  );
+}
+
+export default React.memo(Header);
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 5a33944..6c26492 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,8 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import svgr from 'vite-plugin-svgr';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+  plugins: [react(), svgr()]
+});
-- 
GitLab