Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-06 21:45:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

✨ Add contentComponents to the main layout

Browse Source 
Return button is not inside of the header.
This commit is contained in:
ajnart
2023-08-14 10:15:12 +02:00
parent b249c0205f
commit ce5552c913
6 changed files with 31 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/locales/en/common.json
View File

@@ -3,6 +3,7 @@
"about": "About",
"cancel": "Cancel",
"close": "Close",
"back": "Back",
"delete": "Delete",
"ok": "OK",
"edit": "Edit",

5
src/components/layout/Templates/MainLayout.tsx
View File

@@ -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}

3
src/components/layout/header/AvatarMenu.tsx
View File

@@ -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" />}
>

3
src/components/layout/header/Header.tsx
View File

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

22
src/pages/board/[slug]/customize.tsx
View File

@@ -134,7 +134,19 @@ export default function CustomizationPage() {
})} • Homarr`;
return (
<MainLayout>
<MainLayout
contentComponents={
<Button
component={Link}
passHref
href={backToBoardHref}
variant="light"
leftIcon={<IconArrowLeft size={16} />}
>
{t('backToBoard')}
</Button>
}
>
<Head>
<title>{metaTitle}</title>
</Head>
@@ -191,14 +203,6 @@ export default function CustomizationPage() {
name: firstUpperCase(query.slug),
})}
</Title>
<Button
component={Link}
href={backToBoardHref}
variant="light"
leftIcon={<IconArrowLeft size={16} />}
>
{t('backToBoard')}
</Button>
</Group>
<BoardCustomizationFormProvider form={form}>
<Stack spacing="xl">

10
src/pages/user/preferences.tsx
View File

@@ -10,6 +10,7 @@ import {
Title,
} from '@mantine/core';
import { createFormContext } from '@mantine/form';
import { IconArrowLeft } from '@tabler/icons-react';
import { GetServerSideProps } from 'next';
import { useTranslation } from 'next-i18next';
import Head from 'next/head';
@@ -33,7 +34,14 @@ const PreferencesPage = () => {
const headTitle = `${t('metaTitle')} • Homarr`;
return (
<MainLayout showExperimental>
<MainLayout
showExperimental
contentComponents={
<Button component="a" href="/board/" variant="light" leftIcon={<IconArrowLeft size={16} />}>
{t('common:back')}
</Button>
}
>
<Container>
<Paper p="xl" mih="100%" withBorder>
<Head>