From 70a01dec075cd68ded0a41cad0ddebd37cd8271d Mon Sep 17 00:00:00 2001
From: Johannes Schmidt <devshred@tigerflanke.de>
Date: Wed, 5 Jun 2024 22:01:58 +0200
Subject: [PATCH] feat(layout): improve visibility on mobile devices

---
 package-lock.json                             | 298 +++++++++++++++++-
 package.json                                  |   3 +
 src/components/layout/NavDesktop.tsx          |  13 +
 ...{NavbarButton.tsx => NavDesktopButton.tsx} |   6 +-
 src/components/layout/NavMobile.tsx           |  27 ++
 src/components/layout/NavMobileButton.tsx     |  27 ++
 src/components/layout/Navbar.tsx              |  19 +-
 src/components/layout/ThemeSwitcher.tsx       |   9 +-
 .../services/providers/language/data/de.json  |   6 +-
 .../services/providers/language/data/en.json  |   4 +-
 src/components/track/DownloadLink.tsx         |  14 +-
 src/components/track/TrackHeader.tsx          |   4 +-
 src/pages/AboutScreen.tsx                     |   1 +
 src/pages/FaqScreen.tsx                       |   1 +
 14 files changed, 405 insertions(+), 27 deletions(-)
 create mode 100644 src/components/layout/NavDesktop.tsx
 rename src/components/layout/{NavbarButton.tsx => NavDesktopButton.tsx} (68%)
 create mode 100644 src/components/layout/NavMobile.tsx
 create mode 100644 src/components/layout/NavMobileButton.tsx

diff --git a/package-lock.json b/package-lock.json
index 8a6255a..18aed82 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,9 @@
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jsx-a11y": "^6.8.0",
+        "framer-motion": "^11.2.10",
         "gpxparser": "^3.0.8",
+        "hamburger-react": "^2.5.1",
         "leaflet": "^1.9.4",
         "prettier": "^3.2.5",
         "react": "^18.3.1",
@@ -30,6 +32,7 @@
         "react-leaflet": "^4.2.1",
         "react-leaflet-custom-control": "^1.4.0",
         "react-router-dom": "^6.23.1",
+        "react-use": "^17.5.0",
         "sanitize-html": "^2.13.0",
         "uuid": "^9.0.1",
         "vite-plugin-package-version": "^1.1.0"
@@ -2602,6 +2605,12 @@
         "hoist-non-react-statics": "^3.3.0"
       }
     },
+    "node_modules/@types/js-cookie": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==",
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -3097,6 +3106,12 @@
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "dev": true
     },
+    "node_modules/@xobotyi/scrollbar-width": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
+      "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==",
+      "license": "MIT"
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -4344,6 +4359,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "license": "MIT",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -4444,6 +4468,15 @@
         "tiny-invariant": "^1.0.6"
       }
     },
+    "node_modules/css-in-js-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
+      "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==",
+      "license": "MIT",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.3"
+      }
+    },
     "node_modules/css-selector-tokenizer": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
@@ -4453,6 +4486,19 @@
         "fastparse": "^1.1.2"
       }
     },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -5245,6 +5291,15 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "node_modules/error-stack-parser": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
+      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
@@ -6131,6 +6186,23 @@
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
     },
+    "node_modules/fast-loops": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz",
+      "integrity": "sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==",
+      "license": "MIT"
+    },
+    "node_modules/fast-shallow-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
+      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
+    },
+    "node_modules/fastest-stable-stringify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
+      "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==",
+      "license": "MIT"
+    },
     "node_modules/fastparse": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
@@ -6370,6 +6442,31 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.2.10",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.10.tgz",
+      "integrity": "sha512-/gr3PLZUVFCc86a9MqCUboVrALscrdluzTb3yew+2/qKBU8CX6nzs918/SRBRCqaPbx0TZP10CB6yFgK2C5cYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/from2": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
@@ -6772,6 +6869,15 @@
         "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
       }
     },
+    "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/handlebars": {
       "version": "4.7.8",
       "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
@@ -7039,6 +7145,12 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.5.tgz",
+      "integrity": "sha512-fedL7PRwmeVkgyhu9hLeTBaI6wcGk7JGJswdaRsa5aUbkXI1kr1xZwTPBtaYPpwf56878iDek6VbVnuWMebJmw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -7168,6 +7280,16 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
+    "node_modules/inline-style-prefixer": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-7.0.0.tgz",
+      "integrity": "sha512-I7GEdScunP1dQ6IM2mQWh6v0mOYdYmH3Bp31UecKdrcUgcURTcctSe1IECdUznSHKSmsHtjrT3CwCPI1pyxfUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "css-in-js-utils": "^3.1.0",
+        "fast-loops": "^1.1.3"
+      }
+    },
     "node_modules/inquirer": {
       "version": "8.2.5",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.5.tgz",
@@ -7790,6 +7912,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==",
+      "license": "MIT"
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -8357,6 +8485,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "license": "CC0-1.0"
+    },
     "node_modules/memoize-one": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
@@ -8580,6 +8714,26 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/nano-css": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.6.1.tgz",
+      "integrity": "sha512-T2Mhc//CepkTa3X4pUhKgbEheJHYAxD0VptuqFhDbGMUWVV2m+lkNiW/Ieuj35wrfC8Zm0l7HvssQh7zcEttSw==",
+      "license": "Unlicense",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "css-tree": "^1.1.2",
+        "csstype": "^3.1.2",
+        "fastest-stable-stringify": "^2.0.2",
+        "inline-style-prefixer": "^7.0.0",
+        "rtl-css-js": "^1.16.1",
+        "stacktrace-js": "^2.0.2",
+        "stylis": "^4.3.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -12797,6 +12951,41 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-universal-interface": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
+      "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==",
+      "peerDependencies": {
+        "react": "*",
+        "tslib": "*"
+      }
+    },
+    "node_modules/react-use": {
+      "version": "17.5.0",
+      "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.5.0.tgz",
+      "integrity": "sha512-PbfwSPMwp/hoL847rLnm/qkjg3sTRCvn6YhUZiHaUa3FA6/aNoFX79ul5Xt70O1rK+9GxSVqkY0eTwMdsR/bWg==",
+      "license": "Unlicense",
+      "dependencies": {
+        "@types/js-cookie": "^2.2.6",
+        "@xobotyi/scrollbar-width": "^1.9.5",
+        "copy-to-clipboard": "^3.3.1",
+        "fast-deep-equal": "^3.1.3",
+        "fast-shallow-equal": "^1.0.0",
+        "js-cookie": "^2.2.1",
+        "nano-css": "^5.6.1",
+        "react-universal-interface": "^0.6.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.1.0",
+        "set-harmonic-interval": "^1.0.1",
+        "throttle-debounce": "^3.0.1",
+        "ts-easing": "^0.2.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -13116,6 +13305,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -13242,6 +13437,15 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rtl-css-js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
+      "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "node_modules/run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -13376,6 +13580,18 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/semantic-release": {
       "version": "23.0.2",
       "resolved": "https://registry.npmjs.org/semantic-release/-/semantic-release-23.0.2.tgz",
@@ -13773,6 +13989,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/set-harmonic-interval": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
+      "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==",
+      "license": "Unlicense",
+      "engines": {
+        "node": ">=6.9"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -13958,7 +14183,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -14048,12 +14272,57 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stack-generator": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz",
+      "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
       "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
       "dev": true
     },
+    "node_modules/stackframe": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==",
+      "license": "MIT"
+    },
+    "node_modules/stacktrace-gps": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz",
+      "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "source-map": "0.5.6",
+        "stackframe": "^1.3.4"
+      }
+    },
+    "node_modules/stacktrace-gps/node_modules/source-map": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+      "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stacktrace-js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
+      "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
+      "license": "MIT",
+      "dependencies": {
+        "error-stack-parser": "^2.0.6",
+        "stack-generator": "^2.0.5",
+        "stacktrace-gps": "^3.0.4"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -14364,6 +14633,12 @@
       "integrity": "sha512-UfJMcSJc+SEXEl9lH/VLHSZbThQyLpw1vLO1Lb+j4RWDvG3N2f7yj3PVQA3cmkTBNldJ9eFnM+xEXxHIXrYiJw==",
       "dev": true
     },
+    "node_modules/stylis": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
+      "license": "MIT"
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -14575,6 +14850,15 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -14677,6 +14961,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==",
+      "license": "MIT"
+    },
     "node_modules/tough-cookie": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-3.0.1.tgz",
@@ -14723,6 +15013,12 @@
         "typescript": ">=4.2.0"
       }
     },
+    "node_modules/ts-easing": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
+      "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==",
+      "license": "Unlicense"
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
diff --git a/package.json b/package.json
index d04f701..bf2a9f5 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,9 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
+    "framer-motion": "^11.2.10",
     "gpxparser": "^3.0.8",
+    "hamburger-react": "^2.5.1",
     "leaflet": "^1.9.4",
     "prettier": "^3.2.5",
     "react": "^18.3.1",
@@ -43,6 +45,7 @@
     "react-leaflet": "^4.2.1",
     "react-leaflet-custom-control": "^1.4.0",
     "react-router-dom": "^6.23.1",
+    "react-use": "^17.5.0",
     "sanitize-html": "^2.13.0",
     "uuid": "^9.0.1",
     "vite-plugin-package-version": "^1.1.0"
diff --git a/src/components/layout/NavDesktop.tsx b/src/components/layout/NavDesktop.tsx
new file mode 100644
index 0000000..4d06356
--- /dev/null
+++ b/src/components/layout/NavDesktop.tsx
@@ -0,0 +1,13 @@
+import NavDesktopButton from './NavDesktopButton'
+
+const NavDesktop = () => {
+  return (
+    <div className="hidden md:flex flex-1 justify-end mr-6">
+      <NavDesktopButton label="home" linkTo="/" />
+      <NavDesktopButton label="faq" linkTo="/faq" />
+      <NavDesktopButton label="about" linkTo="/about" />
+    </div>
+  )
+}
+
+export default NavDesktop
diff --git a/src/components/layout/NavbarButton.tsx b/src/components/layout/NavDesktopButton.tsx
similarity index 68%
rename from src/components/layout/NavbarButton.tsx
rename to src/components/layout/NavDesktopButton.tsx
index b2b956a..2d05298 100644
--- a/src/components/layout/NavbarButton.tsx
+++ b/src/components/layout/NavDesktopButton.tsx
@@ -2,12 +2,12 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import useLanguage from '../../hooks/useLanguage'
 
-type NavbarButtonProps = {
+type NavDesktopButtonProps = {
   label: string
   linkTo: string
 }
 
-const NavbarButton: React.FC<NavbarButtonProps> = ({ label, linkTo }) => {
+const NavDesktopButton: React.FC<NavDesktopButtonProps> = ({ label, linkTo }) => {
   const { getMessage } = useLanguage()
   return (
     <Link to={linkTo} className="btn-nav mx-1 text-nav-theme">
@@ -16,4 +16,4 @@ const NavbarButton: React.FC<NavbarButtonProps> = ({ label, linkTo }) => {
   )
 }
 
-export default NavbarButton
+export default NavDesktopButton
diff --git a/src/components/layout/NavMobile.tsx b/src/components/layout/NavMobile.tsx
new file mode 100644
index 0000000..19b1f59
--- /dev/null
+++ b/src/components/layout/NavMobile.tsx
@@ -0,0 +1,27 @@
+import { useRef, useState } from 'react'
+import { Squash as Hamburger } from 'hamburger-react'
+import { FaLightbulb, FaQuestion } from 'react-icons/fa6'
+import { FaHome } from 'react-icons/fa'
+import { useClickAway } from 'react-use'
+import NavMobileButton from './NavMobileButton'
+
+const NavMobile = () => {
+  const [isOpen, setOpen] = useState(false)
+  const ref = useRef(null)
+  useClickAway(ref, () => setOpen(false))
+
+  return (
+    <div ref={ref} className="md:hidden flex-1 justify-end mr-6 text-white">
+      <Hamburger toggled={isOpen} size={20} toggle={setOpen} />
+      {isOpen && (
+        <div className="fixed left-0 shadow-4xl right-0 top-[3.5rem] p-5 pt-0 bg-neutral-950 border-b border-b-white/20 z-10">
+          <NavMobileButton label="home" linkTo="/" icon={<FaHome />} setOpen={setOpen} />
+          <NavMobileButton label="faq" linkTo="/faq" icon={<FaQuestion />} setOpen={setOpen} />
+          <NavMobileButton label="about" linkTo="/about" icon={<FaLightbulb />} setOpen={setOpen} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default NavMobile
diff --git a/src/components/layout/NavMobileButton.tsx b/src/components/layout/NavMobileButton.tsx
new file mode 100644
index 0000000..d67ae50
--- /dev/null
+++ b/src/components/layout/NavMobileButton.tsx
@@ -0,0 +1,27 @@
+import React, { Dispatch, ReactElement, SetStateAction } from 'react'
+import useLanguage from '../../hooks/useLanguage'
+
+type NavMobileButtonProps = {
+  label: string
+  linkTo: string
+  icon: ReactElement
+  setOpen: Dispatch<SetStateAction<boolean>>
+}
+
+const NavMobileButton: React.FC<NavMobileButtonProps> = ({ label, linkTo, icon, setOpen }) => {
+  const { getMessage } = useLanguage()
+  return (
+    <div className="w-full p-[0.08rem] rounded-xl bg-gradient-to-tr from-neutral-800 via-neutral-950 to-neutral-700">
+      <a
+        onClick={() => setOpen((prev) => !prev)}
+        className={'flex items-center justify-between w-full p-5 rounded-xl bg-neutral-950'}
+        href={linkTo}
+      >
+        <span className="flex gap-1 text-lg">{getMessage(label)}</span>
+        {icon}
+      </a>
+    </div>
+  )
+}
+
+export default NavMobileButton
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 844243f..138e702 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
-import ThemeSwitcher from './ThemeSwitcher'
+import NavDesktop from './NavDesktop'
+import NavMobile from './NavMobile'
 import LanguageSelector from './LanguageSelector'
-import NavbarButton from './NavbarButton'
+import ThemeSwitcher from './ThemeSwitcher'
 
 type NavbarProps = {
   title?: string
@@ -13,7 +14,7 @@ const DEFAULT_TITLE: string = 'GPS-Tools'
 const Navbar: React.FC<NavbarProps> = ({ title = DEFAULT_TITLE }) => {
   return (
     <nav className="navbar bg-navbar flex flex-row h-16 mb-5 shadow-lg">
-      <div className="flex-none px-2 ml-6 mr-2">
+      <div className="flex-none px-2 ml-0 md:ml-3 lg:ml-6 mr-2">
         <Link to="/" className="align-middle" aria-label="GPS-Tools Homepage">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -29,13 +30,11 @@ const Navbar: React.FC<NavbarProps> = ({ title = DEFAULT_TITLE }) => {
         </Link>
       </div>
 
-      <div className="flex-1 justify-end mr-6">
-        <NavbarButton label="home" linkTo="/" />
-        <NavbarButton label="faq" linkTo="/faq" />
-        <NavbarButton label="about" linkTo="/about" />
-        <LanguageSelector />
-        <ThemeSwitcher />
-      </div>
+      <NavMobile />
+      <NavDesktop />
+
+      <LanguageSelector />
+      <ThemeSwitcher />
     </nav>
   )
 }
diff --git a/src/components/layout/ThemeSwitcher.tsx b/src/components/layout/ThemeSwitcher.tsx
index bfb87f4..10e81c8 100644
--- a/src/components/layout/ThemeSwitcher.tsx
+++ b/src/components/layout/ThemeSwitcher.tsx
@@ -1,17 +1,18 @@
 import { useEffect, useState } from 'react'
 
-type Theme = 'light' | 'dark'
+export type Theme = 'light' | 'dark'
 
 const ThemeSwitcher = () => {
   const [theme, setTheme] = useState<Theme>('dark')
-  const toggleTheme = () => {
-    setTheme(theme === 'dark' ? 'light' : 'dark')
-  }
 
   useEffect(() => {
     document.querySelector('html')?.setAttribute('data-theme', theme)
   }, [theme])
 
+  const toggleTheme = () => {
+    setTheme(theme === 'dark' ? 'light' : 'dark')
+  }
+
   return (
     <label className="swap swap-rotate mx-3 text-white" aria-label="Theme Switcher">
       {/* this hidden checkbox controls the state */}
diff --git a/src/components/services/providers/language/data/de.json b/src/components/services/providers/language/data/de.json
index 2118af4..0cf6ede 100644
--- a/src/components/services/providers/language/data/de.json
+++ b/src/components/services/providers/language/data/de.json
@@ -2,10 +2,12 @@
   "contact": "Kontakt",
   "prefix_social_icons": "Ihr findet mich am ehesten auf dem Rad: ",
   "about": "Über",
-  "home": "Track neu erstellen",
+  "home": "Startseite",
   "faq": "FAQ",
   "loading": "Wird geladen...",
   "close": "Schließen",
+  "toggle_language": "Sprache zu Englisch wechseln",
+  "toggle_theme": "Theme wechseln",
   "visualize_file": "Die Datei anzeigen.",
   "visualize_files": "Die Dateien zusammenfügen/mergen und anzeigen.",
   "button_new_process": "Eine neue Datei bearbeiten.",
@@ -44,7 +46,7 @@
   "faq_image_routelist_subtitle": "Streckenpunkteliste Garmin Edge",
   "faq_tcx_question": "Warum sollte ich TCX-Dateien exportieren?",
   "faq_tcx_answer": "Falls Du einen Garmin Edge besitzt, bietet sich die Verwendung von TCX-Dateien an, da diese Geräte dann vor allem separate Wegpunkte zuverlässiger anzeigen. Wenn Du beim Download die 'Optimierungs'-Option aktivierst, werden die Wegpunkte zusätzlich optimiert, insbesondere werden die Wegpunkte auf einen Punkt des Track gelegt und korrekt sortiert.",
-  "faq_devices_question": "Wie bekomme ich die Datei auf's Gerät?",
+  "faq_devices_question": "Wie bekomme ich die Datei auf das Gerät?",
   "faq_devices_answer": "Verbinde einfach Dein Navigationsgerät per USB-Kabel mit Deinem Computer und warte, bis sie als externes USB-Laufwerk erkannt werden. Kopiere anschließend die Datei nach:",
   "faq_devices_name": "Gerät",
   "faq_devices_directory": "Verzeichnis",
diff --git a/src/components/services/providers/language/data/en.json b/src/components/services/providers/language/data/en.json
index 3450849..b6b4137 100644
--- a/src/components/services/providers/language/data/en.json
+++ b/src/components/services/providers/language/data/en.json
@@ -3,9 +3,11 @@
   "prefix_social_icons": "You'll find me on my bike: ",
   "faq": "FAQ",
   "about": "About",
-  "home": "Create new track",
+  "home": "Homepage",
   "loading": "Loading...",
   "close": "Close",
+  "toggle_language": "Switch to German",
+  "toggle_theme": "Switch Theme",
   "visualize_file": "Visualize the file.",
   "visualize_files": "Merged and visualize the files.",
   "button_new_process": "Start working on a new file.",
diff --git a/src/components/track/DownloadLink.tsx b/src/components/track/DownloadLink.tsx
index 19e7bc9..50f40c4 100644
--- a/src/components/track/DownloadLink.tsx
+++ b/src/components/track/DownloadLink.tsx
@@ -33,10 +33,16 @@ const DownloadLink: React.FC<DownloadLinkProps> = ({
     (geoJson != null ? `&wp=${encodeToBase64(JSON.stringify(geoJson))}` : '')
 
   return (
-    <Link to={linkTo} className="inline-button py-2 px-3 mx-2">
-      <FiDownload className="inline mr-1 relative bottom-0.5" />
-      {getMessage('download_as')} {type.toUpperCase()}
-    </Link>
+    <>
+      <Link to={linkTo} className="lg:hidden flex flex-1 inline-button py-2 px-3 mx-2">
+        <FiDownload className="inline mr-1 relative -bottom-0.5" />
+        {type.toUpperCase()}
+      </Link>
+      <Link to={linkTo} className="hidden lg:flex inline-button py-2 px-3 mx-2">
+        <FiDownload className="inline mr-1 relative -bottom-0.5" />
+        {getMessage('download_as')} {type.toUpperCase()}
+      </Link>
+    </>
   )
 }
 
diff --git a/src/components/track/TrackHeader.tsx b/src/components/track/TrackHeader.tsx
index 6c10f65..34f397c 100644
--- a/src/components/track/TrackHeader.tsx
+++ b/src/components/track/TrackHeader.tsx
@@ -71,8 +71,8 @@ const TrackHeader: React.FC<TrackHeaderProps> = ({
           <FaEyeSlash className="text-3xl" onClick={() => setShowPolyline(true)} />
         )}
       </div>
-      <div className="flex-1 flex justify-end items-center mb-4">
-        <div>
+      <div className="flex-1 flex mb-4 justify-end items-center">
+        <div className="flex flex-row flex-1 justify-end items-center">
           <DownloadLink
             trackId={trackId}
             type="gpx"
diff --git a/src/pages/AboutScreen.tsx b/src/pages/AboutScreen.tsx
index 74e637f..1f76294 100644
--- a/src/pages/AboutScreen.tsx
+++ b/src/pages/AboutScreen.tsx
@@ -200,6 +200,7 @@ const AboutScreen = () => {
           <ErtIcon />
         </a>
       </p>
+      <p className="mt-10">&nbsp;</p>
     </div>
   )
 }
diff --git a/src/pages/FaqScreen.tsx b/src/pages/FaqScreen.tsx
index 6f48ca0..9a13dc7 100644
--- a/src/pages/FaqScreen.tsx
+++ b/src/pages/FaqScreen.tsx
@@ -59,6 +59,7 @@ const FaqScreen = () => {
         <h1 className="text-2xl highlight-color">{getMessage('faq_merge_question')}</h1>
         <div className="text-lg">{getMessage('faq_merge_answer')}</div>
       </p>
+      <p className="mt-10">&nbsp;</p>
     </div>
   )
 }