logout button back

Author: enrico-kaack-comp

src/components/Core/IntelligentBreadcrumbs.tsx

@@ -1,11 +1,23 @@
-import { Breadcrumbs, BreadcrumbsDomRef, FlexBox, FlexBoxAlignItems, Ui5CustomEvent } from '@ui5/webcomponents-react';
+import {
+  Breadcrumbs,
+  BreadcrumbsDomRef,
+  Button,
+  FlexBox,
+  FlexBoxAlignItems,
+  Menu,
+  MenuItem,
+  Ui5CustomEvent,
+} from '@ui5/webcomponents-react';
 import { BreadcrumbsItem } from '@ui5/webcomponents-react/wrappers';
 import { NavigateOptions, useParams } from 'react-router-dom';
 import useLuigiNavigate from '../Shared/useLuigiNavigate.tsx';
 import LandscapeLabel from './LandscapeLabel.tsx';
 import { useTranslation } from 'react-i18next';
 import { FeedbackButton } from './FeedbackButton.tsx';
 import { BetaButton } from './BetaButton.tsx';
+import { useRef, useState } from 'react';
+import { useAuthOnboarding } from '../../spaces/onboarding/auth/AuthContextOnboarding.tsx';
+import { SearchParamToggleVisibility } from '../Helper/FeatureToggleExistance.tsx';
 
 const PREFIX = '/mcp';
 
@@ -67,6 +79,50 @@ export function BreadCrumbFeedbackHeader() {
       <IntelligentBreadcrumbs />
       <BetaButton />
       <FeedbackButton />
+      <SearchParamToggleVisibility
+        shouldBeVisible={(params) => {
+          if (params === undefined) return false;
+          if (params.get('showHeaderBar') === null) return false;
+          return params?.get('showHeaderBar') === 'false';
+        }}
+      >
+        <LogoutMenu />
+      </SearchParamToggleVisibility>
     </FlexBox>
   );
 }
+
+function LogoutMenu() {
+  const auth = useAuthOnboarding();
+  const { t } = useTranslation();
+
+  const buttonRef = useRef(null);
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
+  return (
+    <>
+      <Button
+        ref={buttonRef}
+        icon="menu2"
+        onClick={() => {
+          setMenuIsOpen(true);
+        }}
+      />
+      <Menu
+        opener={buttonRef.current}
+        open={menuIsOpen}
+        onClose={() => {
+          setMenuIsOpen(false);
+        }}
+      >
+        <MenuItem
+          icon="log"
+          text={t('ShellBar.signOutButton')}
+          onClick={async () => {
+            setMenuIsOpen(false);
+            await auth.logout();
+          }}
+        />
+      </Menu>
+    </>
+  );
+}