✨ Add contentComponents to the main layout

Return button is not inside of the header.

src/components/layout/Templates/MainLayout.tsx

@@ -4,10 +4,11 @@ import { MainHeader } from '~/components/layout/header/Header';
 type MainLayoutProps = {
   showExperimental?: boolean;
   headerActions?: React.ReactNode;
+  contentComponents?: React.ReactNode;
   children: React.ReactNode;
 };
 
-export const MainLayout = ({ showExperimental, headerActions, children }: MainLayoutProps) => {
+export const MainLayout = ({ showExperimental, headerActions, contentComponents, children }: MainLayoutProps) => {
   const theme = useMantineTheme();
 
   return (
@@ -17,7 +18,7 @@ export const MainLayout = ({ showExperimental, headerActions, children }: MainLa
           background: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
         },
       }}
-      header={<MainHeader headerActions={headerActions} showExperimental={showExperimental} />}
+      header={<MainHeader headerActions={headerActions} contentComponents={contentComponents} showExperimental={showExperimental} />}
       className="dashboard-app-shell"
     >
       {children}

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 />