✨ Add contentComponents to the main layout

Return button is not inside of the header.

src/components/layout/header/AvatarMenu.tsx

@@ -41,13 +41,14 @@ export const AvatarMenu = () => {
             <CurrentUserAvatar user={sessionData?.user ?? null} />
           </Menu.Target>
           <Menu.Dropdown>
-            <Menu.Item icon={<Icon size="1rem" />} onClick={toggleColorScheme}>
+            <Menu.Item closeMenuOnClick={false} icon={<Icon size="1rem" />} onClick={toggleColorScheme}>
               {t('actions.avatar.switchTheme')}
             </Menu.Item>
             {sessionData?.user && (
               <>
                 <Menu.Item
                   component={Link}
+                  passHref
                   href="/user/preferences"
                   icon={<IconUserCog size="1rem" />}
                 >

src/components/layout/header/Header.tsx

@@ -21,6 +21,7 @@ type MainHeaderProps = {
   logoHref?: string;
   showExperimental?: boolean;
   headerActions?: React.ReactNode;
+  contentComponents?: React.ReactNode;
   leftIcon?: React.ReactNode;
 };
 
@@ -29,6 +30,7 @@ export const MainHeader = ({
   logoHref = '/',
   headerActions,
   leftIcon,
+  contentComponents,
 }: MainHeaderProps) => {
   const { breakpoints } = useMantineTheme();
   const isSmallerThanMd = useMediaQuery(`(max-width: ${breakpoints.sm})`);
@@ -53,6 +55,7 @@ export const MainHeader = ({
 
         <Group noWrap style={{ flex: 1 }} position="right">
           <Group noWrap spacing={8}>
+            {contentComponents}
             {headerActions}
           </Group>
           <AvatarMenu />