fix: lang switch

Author: deleonio

dev/src/components/LanguageSwitch.tsx

@@ -0,0 +1,34 @@
+import { useLocation } from '@docusaurus/router';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { KolLinkButton } from '@public-ui/react';
+import React, { FC } from 'react';
+
+export const LanguageSwitch: FC = () => {
+	const { i18n } = useDocusaurusContext();
+
+	const location = useLocation();
+
+	return (
+		<div>
+			{i18n.currentLocale === 'de' ? (
+				<KolLinkButton
+					_href={`/en${location.pathname}`}
+					_label="Switch to English"
+					_icon-only
+					_icon="fa-solid fa-language"
+					_tooltipAlign="left"
+					_variant="ghost"
+				/>
+			) : (
+				<KolLinkButton
+					_href={`${location.pathname.replace(/^\/en/, '')}`}
+					_label="Zu Deutsch wechseln"
+					_icon-only
+					_icon="fa-solid fa-language"
+					_tooltipAlign="left"
+					_variant="ghost"
+				/>
+			)}
+		</div>
+	);
+};

dev/src/components/LiveEditor.tsx

@@ -59,20 +59,22 @@ export function LiveEditor(props: Props) {
 
 	return (
 		<BrowserOnly>
-			<div className="grid lg:grid-cols-2 gap-4 py-4">
-				<div className={props.isOnComponentPage ? '' : 'lg:row-span-2'}>
-					<KolBadge _label="Beta" _color="#b00"></KolBadge>
-					<div className="py-2 px-4 border-solid border border-gray-300 rounded-md min-h-[5rem] grid place-content-center">
-						<ComponentDisplay tag={tag} params={config} />
+			{() => (
+				<div className="grid lg:grid-cols-2 gap-4 py-4">
+					<div className={props.isOnComponentPage ? '' : 'lg:row-span-2'}>
+						<KolBadge _label="Beta" _color="#b00"></KolBadge>
+						<div className="py-2 px-4 border-solid border border-gray-300 rounded-md min-h-[5rem] grid place-content-center">
+							<ComponentDisplay tag={tag} params={config} />
+						</div>
+					</div>
+					{props.isOnComponentPage ? '' : <KolSelect _list={tagList} _value={[tag]} _on={{ onChange: updateTag }}></KolSelect>}
+					{/* @ts-ignore */}
+					<Configuration config={config} showDescription={!props.isOnComponentPage} tag={tag} update={updateConfig} />
+					<div className="lg:col-span-2">
+						<CodeOutput params={config} tag={tag} />
 					</div>
 				</div>
-				{props.isOnComponentPage ? '' : <KolSelect _list={tagList} _value={[tag]} _on={{ onChange: updateTag }}></KolSelect>}
-				{/* @ts-ignore */}
-				<Configuration config={config} showDescription={!props.isOnComponentPage} tag={tag} update={updateConfig} />
-				<div className="lg:col-span-2">
-					<CodeOutput params={config} tag={tag} />
-				</div>
-			</div>
+			)}
 		</BrowserOnly>
 	);
 }

dev/src/pages/index.tsx

@@ -1,6 +1,6 @@
 import { translate } from '@docusaurus/Translate';
 import { Bundesanstalt } from '@public-ui/components';
-import { KolKolibri, KolHeading, KolImage, KolLink, KolLinkButton, KolLogo } from '@public-ui/react';
+import { KolKolibri, KolLink, KolLinkButton, KolLogo } from '@public-ui/react';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import Layout from '@theme/Layout';
 import React, { FunctionComponent } from 'react';

dev/src/theme/Navbar/index.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { KolLinkButton, KolVersion, KolIcon, KolImage } from '@public-ui/react';
+import { KolLinkButton, KolVersion } from '@public-ui/react';
 import React, { FunctionComponent, PropsWithChildren } from 'react';
 // import { getDarkMode, setDarkMode } from '../../shares/store';
 import BrowserOnly from '@docusaurus/BrowserOnly';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { LanguageSwitch } from '@site/src/components/LanguageSwitch';
 import Navbar from '@theme-original/Navbar';
 import JSON from '../../../node_modules/@public-ui/components/package.json';
 import ThemeSelect from './ThemeSelect';
@@ -25,21 +25,13 @@ export const NavbarWrapper: FunctionComponent<PropsWithChildren> = (props: { chi
 	// 	},
 	// };
 
-	const { i18n } = useDocusaurusContext();
-
 	return (
 		<div className="grid grid-cols-2 shadow items-center md:grid-cols-[1fr,auto,auto,auto]">
 			<Navbar {...props} />
 			<KolVersion aria-label="Kontaktformular" role="region" className="text-right pr-4" _version={JSON.version as string}></KolVersion>
 			<section aria-label="Toolbar" className="grid gap-2 col-span-2 p-4 sm:grid-cols-[auto,auto,auto]">
 				<div className="grid gap-2 grid-cols-6 col-span-2 items-center justify-items-center">
-					<div>
-						{i18n.currentLocale === 'de' ? (
-							<KolLinkButton _href="/en/" _label="Switch to English" _icon-only _icon="fa-solid fa-language" _tooltipAlign="left" _variant="ghost" />
-						) : (
-							<KolLinkButton _href="/" _label="Zu Deutsch wechseln" _icon-only _icon="fa-solid fa-language" _tooltipAlign="left" _variant="ghost" />
-						)}
-					</div>
+					<LanguageSwitch />
 					{/* <div>
 						{dark ? (
 							<KolButton _icon={'codicon codicon-moon'} _iconOnly _label="Dark-Modus ausschalten" _on={onDark} _tooltipAlign="left" _variant="ghost"></KolButton>