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

Rework header, footer, logo

Browse Source 
Fixes Align Homarr logo to the left #96
This commit is contained in:
Thomas "ajnart" Camlong
2022-05-14 21:41:30 +02:00
parent f3f2006f14
commit 4545a6bbf5
4 changed files with 79 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/AppShelf/AddAppShelfItem.tsx
View File

@@ -10,6 +10,8 @@ import {
Text, Text,
Card, Card,
LoadingOverlay, LoadingOverlay,
ActionIcon,
Tooltip,
} from '@mantine/core'; } from '@mantine/core';
import { useForm } from '@mantine/form'; import { useForm } from '@mantine/form';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
@@ -19,6 +21,35 @@ import { useConfig } from '../../tools/state';
import { ServiceTypeList } from '../../tools/types'; import { ServiceTypeList } from '../../tools/types';
import { AppShelfItemWrapper } from './AppShelfItemWrapper'; import { AppShelfItemWrapper } from './AppShelfItemWrapper';
export function AddItemShelfButton(props: any) {
const [opened, setOpened] = useState(false);
return (
<>
<Modal
size="xl"
radius="md"
opened={props.opened || opened}
onClose={() => setOpened(false)}
title="Add a service"
>
<AddAppShelfItemForm setOpened={setOpened} />
</Modal>
<ActionIcon
variant="default"
radius="md"
size="xl"
color="blue"
style={props.style}
onClick={() => setOpened(true)}
>
<Tooltip label="Add a service">
<Apps />
</Tooltip>
</ActionIcon>
</>
);
}
export default function AddItemShelfItem(props: any) { export default function AddItemShelfItem(props: any) {
const [opened, setOpened] = useState(false); const [opened, setOpened] = useState(false);
return ( return (

2
src/components/layout/Footer.tsx
View File

@@ -72,7 +72,7 @@ export function Footer({ links }: FooterCenteredProps) {
}} }}
> >
Made with ❤️ by @ Made with ❤️ by @
<Anchor href="https://github.com/ajnart" style={{ color: 'inherit', fontStyle: 'inherit' }}> <Anchor href="https://github.com/ajnart" style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}>
ajnart ajnart
</Anchor> </Anchor>
</Text> </Text>

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

@@ -1,18 +1,11 @@
import React, { useState } from 'react'; import React from 'react';
import { import { createStyles, Header as Head, Group, Drawer, Center } from '@mantine/core';
createStyles,
Header as Head,
Container,
Group,
Burger,
Drawer,
Center,
} from '@mantine/core';
import { useBooleanToggle } from '@mantine/hooks'; import { useBooleanToggle } from '@mantine/hooks';
import { NextLink } from '@mantine/next'; import { NextLink } from '@mantine/next';
import { Logo } from './Logo'; import { Logo } from './Logo';
import { SettingsMenuButton } from '../Settings/SettingsMenu';
import CalendarComponent from '../modules/calendar/CalendarModule'; import CalendarComponent from '../modules/calendar/CalendarModule';
import { SettingsMenuButton } from '../Settings/SettingsMenu';
import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
const HEADER_HEIGHT = 60; const HEADER_HEIGHT = 60;
@@ -40,8 +33,6 @@ const useStyles = createStyles((theme) => ({
header: { header: {
display: 'flex', display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
height: '100%', height: '100%',
}, },
@@ -94,46 +85,18 @@ interface HeaderResponsiveProps {
export function Header({ links }: HeaderResponsiveProps) { export function Header({ links }: HeaderResponsiveProps) {
const [opened, toggleOpened] = useBooleanToggle(false); const [opened, toggleOpened] = useBooleanToggle(false);
const [active, setActive] = useState('/');
const { classes, cx } = useStyles(); const { classes, cx } = useStyles();
const items = (
<>
{links.map((link) => (
<NextLink
key={link.label}
href={link.link}
className={cx(classes.link, { [classes.linkActive]: active === link.link })}
onClick={(event) => {
setActive(link.link);
toggleOpened(false);
}}
>
{link.label}
</NextLink>
))}
</>
);
return ( return (
<Head height={HEADER_HEIGHT} mb={10} className={classes.root}> <Head height={HEADER_HEIGHT}>
<Container className={classes.header}> <Group direction="row" align="center" position="apart" className={classes.header} mx="xl">
<Group>
<NextLink style={{ textDecoration: 'none' }} href="/"> <NextLink style={{ textDecoration: 'none' }} href="/">
<Logo style={{ fontSize: 22 }} /> <Logo style={{ fontSize: 22 }} />
</NextLink> </NextLink>
</Group>
<Group spacing={5} className={classes.links}>
{items}
</Group>
<Group> <Group>
<SettingsMenuButton /> <SettingsMenuButton />
<AddItemShelfButton />
<Burger </Group>
opened={opened}
onClick={() => toggleOpened()}
className={classes.burger}
size="sm"
/>
</Group> </Group>
<Drawer <Drawer
@@ -149,7 +112,6 @@ export function Header({ links }: HeaderResponsiveProps) {
</Center> </Center>
)} )}
</Drawer> </Drawer>
</Container>
</Head> </Head>
); );
} }

16
src/components/layout/Logo.tsx
View File

@@ -1,8 +1,10 @@
import { Text } from '@mantine/core'; import { Group, Text } from '@mantine/core';
import * as React from 'react'; import * as React from 'react';
import { CURRENT_VERSION } from '../../../data/constants';
export function Logo({ style }: any) { export function Logo({ style }: any) {
return ( return (
<Group>
<Text <Text
sx={style} sx={style}
weight="bold" weight="bold"
@@ -11,5 +13,17 @@ export function Logo({ style }: any) {
> >
Homarr Homarr
</Text> </Text>
<Text
style={{
color: 'gray',
fontStyle: 'inherit',
fontSize: 'inherit',
alignSelf: 'end',
alignContent: 'start',
}}
>
{CURRENT_VERSION}
</Text>
</Group>
); );
} }