diff --git a/astro.config.mjs b/astro.config.mjs index 6708e95..5ab34eb 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,10 +1,14 @@ import { defineConfig } from "astro/config"; import react from "@astrojs/react"; +import svgr from "vite-plugin-svgr"; // https://astro.build/config export default defineConfig({ site: 'https://scrumlr.io', integrations: [react()], + vite: { + plugins: [svgr()], + }, devToolbar: { enabled: false, }, diff --git a/modules.d.ts b/modules.d.ts index 90f33eb..aaecd61 100644 --- a/modules.d.ts +++ b/modules.d.ts @@ -1 +1,3 @@ +/// + declare module "react-spring-carousel"; diff --git a/package.json b/package.json index 97d3dc6..2fcc9f1 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,8 @@ "eslint-plugin-astro": "^1.5.0", "eslint-plugin-jsx-a11y": "^6.10.2", "prettier-plugin-astro": "^0.14.1", - "sass": "^1.97.3" - } + "sass": "^1.97.3", + "vite-plugin-svgr": "^4.5.0" + }, + "packageManager": "pnpm@9.5.0+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ce9d45b..88d0011 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -60,6 +60,9 @@ importers: sass: specifier: ^1.97.3 version: 1.97.3 + vite-plugin-svgr: + specifier: ^4.5.0 + version: 4.5.0(rollup@4.57.1)(typescript@5.1.3)(vite@6.4.1(@types/node@25.2.3)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)) packages: @@ -1667,6 +1670,74 @@ packages: '@sinonjs/fake-timers@10.3.0': resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==} + '@svgr/babel-plugin-add-jsx-attribute@8.0.0': + resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@svgr/babel-plugin-remove-jsx-attribute@8.0.0': + resolution: {integrity: sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0': + resolution: {integrity: sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0': + resolution: {integrity: sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@svgr/babel-plugin-svg-dynamic-title@8.0.0': + resolution: {integrity: sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@svgr/babel-plugin-svg-em-dimensions@8.0.0': + resolution: {integrity: sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@svgr/babel-plugin-transform-react-native-svg@8.1.0': + resolution: {integrity: sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@svgr/babel-plugin-transform-svg-component@8.0.0': + resolution: {integrity: sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==} + engines: {node: '>=12'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@svgr/babel-preset@8.1.0': + resolution: {integrity: sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + + '@svgr/core@8.1.0': + resolution: {integrity: sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==} + engines: {node: '>=14'} + + '@svgr/hast-util-to-babel-ast@8.0.0': + resolution: {integrity: sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==} + engines: {node: '>=14'} + + '@svgr/plugin-jsx@8.1.0': + resolution: {integrity: sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==} + engines: {node: '>=14'} + peerDependencies: + '@svgr/core': '*' + '@types/babel__core@7.20.5': resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} @@ -2276,6 +2347,15 @@ packages: resolution: {integrity: sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==} engines: {node: '>=4'} + cosmiconfig@8.3.6: + resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==} + engines: {node: '>=14'} + peerDependencies: + typescript: '>=4.9.5' + peerDependenciesMeta: + typescript: + optional: true + cross-spawn@7.0.6: resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} @@ -2431,6 +2511,9 @@ packages: domutils@3.2.2: resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==} + dot-case@3.0.4: + resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==} + dset@3.1.4: resolution: {integrity: sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==} engines: {node: '>=4'} @@ -3187,6 +3270,9 @@ packages: json-parse-better-errors@1.0.2: resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==} + json-parse-even-better-errors@2.3.1: + resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==} + json-schema-traverse@0.4.1: resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==} @@ -3234,6 +3320,9 @@ packages: resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} engines: {node: '>= 0.8.0'} + lines-and-columns@1.2.4: + resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} + locate-path@3.0.0: resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==} engines: {node: '>=6'} @@ -3270,6 +3359,9 @@ packages: resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} hasBin: true + lower-case@2.0.2: + resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==} + lru-cache@11.2.6: resolution: {integrity: sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==} engines: {node: 20 || >=22} @@ -3600,6 +3692,9 @@ packages: nlcst-to-string@4.0.0: resolution: {integrity: sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==} + no-case@3.0.4: + resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==} + nocache@3.0.4: resolution: {integrity: sha512-WDD0bdg9mbq6F4mRxEYcPWwfA1vxd0mrvKOyxI7Xj/atfRHVeutzuWByG//jfm4uPzp0y4Kj051EORCBSQMycw==} engines: {node: '>=12.0.0'} @@ -3775,6 +3870,10 @@ packages: resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==} engines: {node: '>=4'} + parse-json@5.2.0: + resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==} + engines: {node: '>=8'} + parse-latin@7.0.0: resolution: {integrity: sha512-mhHgobPPua5kZ98EF4HWiH167JWBfl4pvAIXXdbaVohtK7a6YBOy56kvhCqduqyo/f3yrHFWmqmiMg/BkBkYYQ==} @@ -3804,6 +3903,10 @@ packages: path-parse@1.0.7: resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} + path-type@4.0.0: + resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==} + engines: {node: '>=8'} + piccolore@0.1.3: resolution: {integrity: sha512-o8bTeDWjE086iwKrROaDf31K0qC/BENdm15/uH9usSC/uZjJOKb2YGiVHfLY4GhwsERiPI1jmwI2XrA7ACOxVw==} @@ -4302,6 +4405,9 @@ packages: resolution: {integrity: sha512-4zemZi0HvTnYwLfrpk/CF9LOd9Lt87kAt50GnqhMpyF9U3poDAP2+iukq2bZsO/ufegbYehBkqINbsWxj4l4cw==} engines: {node: '>= 18'} + snake-case@3.0.4: + resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==} + source-map-js@1.2.1: resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} engines: {node: '>=0.10.0'} @@ -4426,6 +4532,9 @@ packages: peerDependencies: react: '>=17.0' + svg-parser@2.0.4: + resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==} + svgo@4.0.0: resolution: {integrity: sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==} engines: {node: '>=16'} @@ -4718,6 +4827,11 @@ packages: vfile@6.0.3: resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==} + vite-plugin-svgr@4.5.0: + resolution: {integrity: sha512-W+uoSpmVkSmNOGPSsDCWVW/DDAyv+9fap9AZXBvWiQqrboJ08j2vh0tFxTD/LjwqwAd3yYSVJgm54S/1GhbdnA==} + peerDependencies: + vite: '>=2.6.0' + vite@6.4.1: resolution: {integrity: sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==} engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} @@ -7193,6 +7307,76 @@ snapshots: dependencies: '@sinonjs/commons': 3.0.1 + '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.29.0)': + dependencies: + '@babel/core': 7.29.0 + + '@svgr/babel-plugin-remove-jsx-attribute@8.0.0(@babel/core@7.29.0)': + dependencies: + '@babel/core': 7.29.0 + + '@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0(@babel/core@7.29.0)': + dependencies: + '@babel/core': 7.29.0 + + '@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0(@babel/core@7.29.0)': + dependencies: + '@babel/core': 7.29.0 + + '@svgr/babel-plugin-svg-dynamic-title@8.0.0(@babel/core@7.29.0)': + dependencies: + '@babel/core': 7.29.0 + + '@svgr/babel-plugin-svg-em-dimensions@8.0.0(@babel/core@7.29.0)': + dependencies: + '@babel/core': 7.29.0 + + '@svgr/babel-plugin-transform-react-native-svg@8.1.0(@babel/core@7.29.0)': + dependencies: + '@babel/core': 7.29.0 + + '@svgr/babel-plugin-transform-svg-component@8.0.0(@babel/core@7.29.0)': + dependencies: + '@babel/core': 7.29.0 + + '@svgr/babel-preset@8.1.0(@babel/core@7.29.0)': + dependencies: + '@babel/core': 7.29.0 + '@svgr/babel-plugin-add-jsx-attribute': 8.0.0(@babel/core@7.29.0) + '@svgr/babel-plugin-remove-jsx-attribute': 8.0.0(@babel/core@7.29.0) + '@svgr/babel-plugin-remove-jsx-empty-expression': 8.0.0(@babel/core@7.29.0) + '@svgr/babel-plugin-replace-jsx-attribute-value': 8.0.0(@babel/core@7.29.0) + '@svgr/babel-plugin-svg-dynamic-title': 8.0.0(@babel/core@7.29.0) + '@svgr/babel-plugin-svg-em-dimensions': 8.0.0(@babel/core@7.29.0) + '@svgr/babel-plugin-transform-react-native-svg': 8.1.0(@babel/core@7.29.0) + '@svgr/babel-plugin-transform-svg-component': 8.0.0(@babel/core@7.29.0) + + '@svgr/core@8.1.0(typescript@5.1.3)': + dependencies: + '@babel/core': 7.29.0 + '@svgr/babel-preset': 8.1.0(@babel/core@7.29.0) + camelcase: 6.3.0 + cosmiconfig: 8.3.6(typescript@5.1.3) + snake-case: 3.0.4 + transitivePeerDependencies: + - supports-color + - typescript + + '@svgr/hast-util-to-babel-ast@8.0.0': + dependencies: + '@babel/types': 7.29.0 + entities: 4.5.0 + + '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0(typescript@5.1.3))': + dependencies: + '@babel/core': 7.29.0 + '@svgr/babel-preset': 8.1.0(@babel/core@7.29.0) + '@svgr/core': 8.1.0(typescript@5.1.3) + '@svgr/hast-util-to-babel-ast': 8.0.0 + svg-parser: 2.0.4 + transitivePeerDependencies: + - supports-color + '@types/babel__core@7.20.5': dependencies: '@babel/parser': 7.29.0 @@ -8035,6 +8219,15 @@ snapshots: js-yaml: 3.14.2 parse-json: 4.0.0 + cosmiconfig@8.3.6(typescript@5.1.3): + dependencies: + import-fresh: 3.3.1 + js-yaml: 4.1.1 + parse-json: 5.2.0 + path-type: 4.0.0 + optionalDependencies: + typescript: 5.1.3 + cross-spawn@7.0.6: dependencies: path-key: 3.1.1 @@ -8184,6 +8377,11 @@ snapshots: domelementtype: 2.3.0 domhandler: 5.0.3 + dot-case@3.0.4: + dependencies: + no-case: 3.0.4 + tslib: 2.8.1 + dset@3.1.4: {} dunder-proto@1.0.1: @@ -9126,6 +9324,8 @@ snapshots: json-parse-better-errors@1.0.2: {} + json-parse-even-better-errors@2.3.1: {} + json-schema-traverse@0.4.1: {} json-stable-stringify-without-jsonify@1.0.1: {} @@ -9166,6 +9366,8 @@ snapshots: prelude-ls: 1.2.1 type-check: 0.4.0 + lines-and-columns@1.2.4: {} + locate-path@3.0.0: dependencies: p-locate: 3.0.0 @@ -9202,6 +9404,10 @@ snapshots: dependencies: js-tokens: 4.0.0 + lower-case@2.0.2: + dependencies: + tslib: 2.8.1 + lru-cache@11.2.6: {} lru-cache@5.1.1: @@ -9901,6 +10107,11 @@ snapshots: dependencies: '@types/nlcst': 2.0.3 + no-case@3.0.4: + dependencies: + lower-case: 2.0.2 + tslib: 2.8.1 + nocache@3.0.4: {} node-abort-controller@3.1.1: {} @@ -10078,6 +10289,13 @@ snapshots: error-ex: 1.3.4 json-parse-better-errors: 1.0.2 + parse-json@5.2.0: + dependencies: + '@babel/code-frame': 7.29.0 + error-ex: 1.3.4 + json-parse-even-better-errors: 2.3.1 + lines-and-columns: 1.2.4 + parse-latin@7.0.0: dependencies: '@types/nlcst': 2.0.3 @@ -10103,6 +10321,8 @@ snapshots: path-parse@1.0.7: {} + path-type@4.0.0: {} + piccolore@0.1.3: {} picocolors@1.1.1: {} @@ -10819,6 +11039,11 @@ snapshots: smol-toml@1.6.0: {} + snake-case@3.0.4: + dependencies: + dot-case: 3.0.4 + tslib: 2.8.1 + source-map-js@1.2.1: {} source-map-support@0.5.21: @@ -10942,6 +11167,8 @@ snapshots: dependencies: react: 18.2.0 + svg-parser@2.0.4: {} + svgo@4.0.0: dependencies: commander: 11.1.0 @@ -11195,6 +11422,17 @@ snapshots: '@types/unist': 3.0.3 vfile-message: 4.0.3 + vite-plugin-svgr@4.5.0(rollup@4.57.1)(typescript@5.1.3)(vite@6.4.1(@types/node@25.2.3)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)): + dependencies: + '@rollup/pluginutils': 5.3.0(rollup@4.57.1) + '@svgr/core': 8.1.0(typescript@5.1.3) + '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.1.3)) + vite: 6.4.1(@types/node@25.2.3)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2) + transitivePeerDependencies: + - rollup + - supports-color + - typescript + vite@6.4.1(@types/node@25.2.3)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2): dependencies: esbuild: 0.25.12 diff --git a/src/components/Navbar/Navbar.astro b/src/components/Navbar/Navbar.astro index ce9c06f..9d07c40 100644 --- a/src/components/Navbar/Navbar.astro +++ b/src/components/Navbar/Navbar.astro @@ -12,9 +12,7 @@ const content = await getTranslatedContent("Header", lang); const userMenuLabels = { germanLabel: content.german, - englishLabel: content.english, - loginLabel: content.login, - logoutLabel: content.logout + englishLabel: content.english }; --- diff --git a/src/components/UserMenu/UserMenu.scss b/src/components/UserMenu/UserMenu.scss index fc48c9e..fff5d55 100644 --- a/src/components/UserMenu/UserMenu.scss +++ b/src/components/UserMenu/UserMenu.scss @@ -15,7 +15,7 @@ } } - .user-menu__avatar { + .user-menu__change-language-button { height: 56px; width: 56px; border-radius: 999px; @@ -25,21 +25,42 @@ background-color: transparent; position: relative; z-index: 100; + } - > img { - height: 100%; - width: 100%; - transition: all 0.2s cubic-bezier(0.7, 0.53, 0.17, 0.99); + .user-menu--active { + .user-menu__icon-container { + transform: scale(0.8); } } - @media (prefers-color-scheme: dark) { - .user-menu__avatar > img { - content: url(/assets/images/Stan_Avatar_4dark.png); + + .user-menu__icon-container { + box-sizing: border-box; + + display: flex; + justify-content: center; + align-items: center; + + width: 56px; + height: 56px; + border-radius: 100%; + border: 4px solid var(--light-blue); + + background-color: var(--light-blue); + + transition: all 0.2s cubic-bezier(0.7, 0.53, 0.17, 0.99); + + @media (prefers-color-scheme: dark) { + border-color: var(--navy-200); + background-color: var(--navy-500); } } - .user-menu--active { - .user-menu__avatar > img { - transform: scale(0.8); + + .user-menu__icon { + width: 32px; + height: 32px; + + @media (prefers-color-scheme: dark) { + color: var(--white); } } @@ -119,8 +140,7 @@ } } - .user-menu__dropdown a svg, - .user-menu__dropdown button svg { + .user-menu__flag { height: 32px; width: 32px; } @@ -130,4 +150,3 @@ font-weight: bold; font-size: 16px; } - diff --git a/src/components/UserMenu/UserMenu.tsx b/src/components/UserMenu/UserMenu.tsx index 5895c92..01fdf9f 100644 --- a/src/components/UserMenu/UserMenu.tsx +++ b/src/components/UserMenu/UserMenu.tsx @@ -1,33 +1,20 @@ import { useState, useEffect } from "react"; import classNames from "classnames"; +import ChangeLanguageIcon from "@icons/change-language.svg?react" +import DE from "@icons/flags/DE.svg?react"; +import US from "@icons/flags/US.svg?react"; import "./UserMenu.scss"; type UserMenuProps = { germanLabel: string; englishLabel: string; - loginLabel: string; - logoutLabel: string; }; const UserMenu = ({ germanLabel, - englishLabel, - loginLabel, - logoutLabel, + englishLabel }: UserMenuProps) => { const [isActive, setIsActive] = useState(false); - const [isAuthenticated, setIsAuthenticated] = useState(false); - - useEffect(() => { - fetch(`api/user`, { - method: "GET", - credentials: "include", - }).then((response) => { - if (response.status === 200) { - setIsAuthenticated(true); - } - }); - }, []); useEffect(() => { document.addEventListener("click", (event) => { @@ -37,174 +24,31 @@ const UserMenu = ({ }); }, []); - const handleLogout = () => { - fetch(`api/login`, { - method: "DELETE", - credentials: "include", - }).then(() => { - document.location.reload(); - }); - }; - return (
diff --git a/src/icons/change-language.svg b/src/icons/change-language.svg new file mode 100644 index 0000000..4527ef2 --- /dev/null +++ b/src/icons/change-language.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/icons/flags/DE.svg b/src/icons/flags/DE.svg new file mode 100644 index 0000000..edff7bf --- /dev/null +++ b/src/icons/flags/DE.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/icons/flags/US.svg b/src/icons/flags/US.svg new file mode 100644 index 0000000..c2720b6 --- /dev/null +++ b/src/icons/flags/US.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 5cd6b5d..bc7e6ae 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -92,6 +92,9 @@ const lang = getLangFromUrl(Astro.url); --light-grey-3: #edeff2; --dark-grey: #939daa; + --navy-200: #586073; + --navy-500: #303745; + color: var(--lightmode-black); background: var(--lightmode-background); }