Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-10 15:35:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

📱 Make the design way more responsive for mobile

Browse Source
This commit is contained in:
ajnart
2022-06-06 15:20:46 +02:00
parent bbb912479b
commit 00928ae709
9 changed files with 177 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/layout/Aside.tsx
View File

@@ -1,4 +1,5 @@
import { Aside as MantineAside, Group } from '@mantine/core';
import { Aside as MantineAside, createStyles, Group } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import {
WeatherModule,
DateModule,
@@ -8,12 +9,29 @@ import {
} from '../modules';
import { ModuleWrapper } from '../modules/moduleWrapper';
const useStyles = createStyles((theme) => ({
hide: {
[theme.fn.smallerThan('xs')]: {
display: 'none',
},
},
burger: {
[theme.fn.largerThan('sm')]: {
display: 'none',
},
},
}));
export default function Aside(props: any) {
const { classes, cx } = useStyles();
const matches = useMediaQuery('(min-width: 800px)');
return (
<MantineAside
pr="md"
hiddenBreakpoint="md"
hiddenBreakpoint="sm"
hidden
className={cx(classes.hide)}
style={{
border: 'none',
}}
@@ -21,13 +39,15 @@ export default function Aside(props: any) {
base: 'auto',
}}
>
<Group my="sm" grow direction="column" style={{ width: 300 }}>
<ModuleWrapper module={CalendarModule} />
<ModuleWrapper module={TotalDownloadsModule} />
<ModuleWrapper module={WeatherModule} />
<ModuleWrapper module={DateModule} />
<ModuleWrapper module={SystemModule} />
</Group>
{matches && (
<Group my="sm" grow direction="column" style={{ width: 300 }}>
<ModuleWrapper module={CalendarModule} />
<ModuleWrapper module={TotalDownloadsModule} />
<ModuleWrapper module={WeatherModule} />
<ModuleWrapper module={DateModule} />
<ModuleWrapper module={SystemModule} />
</Group>
)}
</MantineAside>
);
}

72
src/components/layout/Header.tsx
View File

@@ -1,9 +1,29 @@
import React from 'react';
import { createStyles, Header as Head, Group, Box } from '@mantine/core';
import {
createStyles,
Header as Head,
Group,
Box,
Burger,
Drawer,
Title,
ScrollArea,
ActionIcon,
Transition,
} from '@mantine/core';
import { useBooleanToggle } from '@mantine/hooks';
import { Logo } from './Logo';
import SearchBar from '../modules/search/SearchModule';
import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
import { SettingsMenuButton } from '../Settings/SettingsMenu';
import { ModuleWrapper } from '../modules/moduleWrapper';
import {
CalendarModule,
TotalDownloadsModule,
WeatherModule,
DateModule,
SystemModule,
} from '../modules';
const HEADER_HEIGHT = 60;
@@ -13,10 +33,18 @@ const useStyles = createStyles((theme) => ({
display: 'none',
},
},
burger: {
[theme.fn.largerThan('sm')]: {
display: 'none',
},
},
}));
export function Header(props: any) {
const [opened, toggleOpened] = useBooleanToggle(false);
const { classes, cx } = useStyles();
const [hidden, toggleHidden] = useBooleanToggle(true);
const drawerModule = CalendarModule;
return (
<Head height="auto">
@@ -28,6 +56,48 @@ export function Header(props: any) {
<SearchBar />
<SettingsMenuButton />
<AddItemShelfButton />
<ActionIcon className={classes.burger} variant="default" radius="md" size="xl">
<Burger
opened={!hidden}
onClick={(_) => {
toggleHidden();
toggleOpened();
}}
/>
</ActionIcon>
<Drawer
size="auto"
padding="xl"
position="right"
hidden={hidden}
title={<Title order={3}>Modules</Title>}
opened
onClose={() => {
toggleHidden();
}}
>
<Transition
mounted={opened}
transition="pop-top-right"
duration={300}
timingFunction="ease"
onExit={() => toggleOpened()}
>
{(styles) => (
<div style={styles}>
<ScrollArea style={{ height: '90vh' }}>
<Group my="sm" grow direction="column" style={{ width: 300 }}>
<ModuleWrapper module={drawerModule} />
<ModuleWrapper module={TotalDownloadsModule} />
<ModuleWrapper module={WeatherModule} />
<ModuleWrapper module={DateModule} />
<ModuleWrapper module={SystemModule} />
</Group>
</ScrollArea>
</div>
)}
</Transition>
</Drawer>
</Group>
</Group>
</Head>

25
src/components/layout/Layout.tsx
View File

@@ -1,16 +1,37 @@
import { AppShell, createStyles } from '@mantine/core';
import { AppShell, createStyles, Group } from '@mantine/core';
import { Header } from './Header';
import { Footer } from './Footer';
import Aside from './Aside';
import { ModuleWrapper } from '../modules/moduleWrapper';
import {
CalendarModule,
TotalDownloadsModule,
WeatherModule,
DateModule,
SystemModule,
} from '../modules';
const useStyles = createStyles((theme) => ({
main: {},
}));
export default function Layout({ children, style }: any) {
const drawerContent = (
<Group my="sm" grow direction="column" style={{ width: 300 }}>
<ModuleWrapper module={CalendarModule} />
<ModuleWrapper module={TotalDownloadsModule} />
<ModuleWrapper module={WeatherModule} />
<ModuleWrapper module={DateModule} />
<ModuleWrapper module={SystemModule} />
</Group>
);
const { classes, cx } = useStyles();
return (
<AppShell aside={<Aside />} header={<Header />} footer={<Footer links={[]} />}>
<AppShell
aside={<Aside />}
header={<Header data={drawerContent} />}
footer={<Footer links={[]} />}
>
<main
className={cx(classes.main)}
style={{