💄 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() {
return (
<MantineAside
height="100%"
hiddenBreakpoint="md"
hidden
style={{
border: 'none',
}}
width={{
base: 'auto',
}}

View File

@@ -1,5 +1,12 @@
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';
const useStyles = createStyles((theme) => ({
@@ -48,34 +55,39 @@ export function Footer({ links }: FooterCenteredProps) {
));
return (
<Group
sx={{
position: 'fixed',
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',
<FooterComponent height="auto" style={{ border: 'none' }}>
<Group
sx={{
position: 'fixed',
bottom: 0,
right: 15,
}}
direction="row"
align="center"
mb={15}
>
Made with by @
<Anchor href="https://github.com/ajnart" style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}>
ajnart
</Anchor>
</Text>
</Group>
<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.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() {
return (
<MantineNavbar
height="100%"
hiddenBreakpoint="lg"
hidden
style={{
border: 'none',
}}
width={{
base: 'auto',
}}