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

📱 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

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>