Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-06 13:35:48 +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,
Card,
LoadingOverlay,
ActionIcon,
Tooltip,
} from '@mantine/core';
import { useForm } from '@mantine/form';
import { motion } from 'framer-motion';
@@ -19,6 +21,35 @@ import { useConfig } from '../../tools/state';
import { ServiceTypeList } from '../../tools/types';
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) {
const [opened, setOpened] = useState(false);
return (

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

@@ -72,7 +72,7 @@ export function Footer({ links }: FooterCenteredProps) {
}}
>
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
</Anchor>
</Text>

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

@@ -1,18 +1,11 @@
import React, { useState } from 'react';
import {
createStyles,
Header as Head,
Container,
Group,
Burger,
Drawer,
Center,
} from '@mantine/core';
import React from 'react';
import { createStyles, Header as Head, Group, Drawer, Center } from '@mantine/core';
import { useBooleanToggle } from '@mantine/hooks';
import { NextLink } from '@mantine/next';
import { Logo } from './Logo';
import { SettingsMenuButton } from '../Settings/SettingsMenu';
import CalendarComponent from '../modules/calendar/CalendarModule';
import { SettingsMenuButton } from '../Settings/SettingsMenu';
import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
const HEADER_HEIGHT = 60;
@@ -40,8 +33,6 @@ const useStyles = createStyles((theme) => ({
header: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
height: '100%',
},
@@ -94,46 +85,18 @@ interface HeaderResponsiveProps {
export function Header({ links }: HeaderResponsiveProps) {
const [opened, toggleOpened] = useBooleanToggle(false);
const [active, setActive] = useState('/');
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 (
<Head height={HEADER_HEIGHT} mb={10} className={classes.root}>
<Container className={classes.header}>
<Group>
<Head height={HEADER_HEIGHT}>
<Group direction="row" align="center" position="apart" className={classes.header} mx="xl">
<NextLink style={{ textDecoration: 'none' }} href="/">
<Logo style={{ fontSize: 22 }} />
</NextLink>
</Group>
<Group spacing={5} className={classes.links}>
{items}
</Group>
<Group>
<SettingsMenuButton />
<Burger
opened={opened}
onClick={() => toggleOpened()}
className={classes.burger}
size="sm"
/>
<AddItemShelfButton />
</Group>
</Group>
<Drawer
@@ -149,7 +112,6 @@ export function Header({ links }: HeaderResponsiveProps) {
</Center>
)}
</Drawer>
</Container>
</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 { CURRENT_VERSION } from '../../../data/constants';
export function Logo({ style }: any) {
return (
<Group>
<Text
sx={style}
weight="bold"
@@ -11,5 +13,17 @@ export function Logo({ style }: any) {
>
Homarr
</Text>
<Text
style={{
color: 'gray',
fontStyle: 'inherit',
fontSize: 'inherit',
alignSelf: 'end',
alignContent: 'start',
}}
>
{CURRENT_VERSION}
</Text>
</Group>
);
}