💄 Improve layout styling

This commit is contained in:
Thomas "ajnart" Camlong
2022-05-15 19:32:02 +02:00
parent a9370881f4
commit c243256180
3 changed files with 46 additions and 30 deletions

View File

@@ -5,9 +5,11 @@ import ModuleWrapper from '../modules/moduleWrapper';
export default function Aside() { export default function Aside() {
return ( return (
<MantineAside <MantineAside
height="100%"
hiddenBreakpoint="md" hiddenBreakpoint="md"
hidden hidden
style={{
border: 'none',
}}
width={{ width={{
base: 'auto', base: 'auto',
}} }}

View File

@@ -1,5 +1,12 @@
import React from 'react'; import React from 'react';
import { createStyles, Anchor, Text, Group, ActionIcon } from '@mantine/core'; import {
createStyles,
Anchor,
Text,
Group,
ActionIcon,
Footer as FooterComponent,
} from '@mantine/core';
import { BrandGithub } from 'tabler-icons-react'; import { BrandGithub } from 'tabler-icons-react';
const useStyles = createStyles((theme) => ({ const useStyles = createStyles((theme) => ({
@@ -48,34 +55,39 @@ export function Footer({ links }: FooterCenteredProps) {
)); ));
return ( return (
<Group <FooterComponent height="auto" style={{ border: 'none' }}>
sx={{ <Group
position: 'fixed', sx={{
bottom: 0, position: 'fixed',
right: 15, bottom: 0,
}} right: 15,
direction="row"
align="center"
mb={15}
>
<Group className={classes.links}>{items}</Group>
<Group spacing="xs" position="right" noWrap>
<ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
<BrandGithub size={18} />
</ActionIcon>
</Group>
<Text
style={{
fontSize: '0.75rem',
textAlign: 'center',
color: '#a0aec0',
}} }}
direction="row"
align="center"
mb={15}
> >
Made with by @ <Group className={classes.links}>{items}</Group>
<Anchor href="https://github.com/ajnart" style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}> <Group spacing="xs" position="right" noWrap>
ajnart <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
</Anchor> <BrandGithub size={18} />
</Text> </ActionIcon>
</Group> </Group>
<Text
style={{
fontSize: '0.90rem',
textAlign: 'center',
color: '#a0aec0',
}}
>
Made with by @
<Anchor
href="https://github.com/ajnart"
style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
>
ajnart
</Anchor>
</Text>
</Group>
</FooterComponent>
); );
} }

View File

@@ -5,9 +5,11 @@ import ModuleWrapper from '../modules/moduleWrapper';
export default function Navbar() { export default function Navbar() {
return ( return (
<MantineNavbar <MantineNavbar
height="100%"
hiddenBreakpoint="lg" hiddenBreakpoint="lg"
hidden hidden
style={{
border: 'none',
}}
width={{ width={{
base: 'auto', base: 'auto',
}} }}