Use an own language switcher component for the app header

Add a draft for toggling the language between en and de via a language
switcher in the app header.

src/web/components/structure/header.jsx

@@ -29,6 +29,7 @@ import useGmp from 'web/utils/useGmp';
 
 import LogoutIcon from 'web/components/icon/logouticon';
 import MySettingsIcon from 'web/components/icon/mysettingsicon';
+import LanguageSwitch from './languageswitch';
 
 const Header = () => {
   const gmp = useGmp();
@@ -69,6 +70,7 @@ const Header = () => {
   ];
   return (
     <AppHeader
+      languageSwitch={<LanguageSwitch />}
       menuPoints={menuPoints}
       isLoggedIn={loggedIn}
       username={username}
@@ -78,5 +80,3 @@ const Header = () => {
 };
 
 export default Header;
-
-// vim: set ts=2 sw=2 tw=80:

src/web/components/structure/languageswitch.jsx

@@ -0,0 +1,39 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {FlagDeIcon, FlagEnIcon} from '@greenbone/opensight-ui-components';
+import {ActionIcon} from '@mantine/core';
+
+import useLocale from 'web/hooks/useLocale';
+import useTranslation from 'web/hooks/useTranslation';
+
+const getNextLanguage = language => (language === 'en' ? 'de' : 'en');
+
+const LanguageSwitch = () => {
+  const [language, changeLanguage] = useLocale();
+  const [_] = useTranslation();
+
+  const nextLanguage = getNextLanguage(language);
+  const titles = {
+    en: _('Switch language to English'),
+    de: _('Switch language to German'),
+  };
+
+  const handleLanguageChange = () => {
+    changeLanguage(nextLanguage);
+  };
+  return (
+    <ActionIcon
+      variant="transparent"
+      onClick={handleLanguageChange}
+      title={titles[nextLanguage]}
+      color="neutral.0"
+    >
+      {language === 'en' ? <FlagEnIcon /> : <FlagDeIcon />}
+    </ActionIcon>
+  );
+};
+
+export default LanguageSwitch;