Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-11 16:05:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

💄 Add discord and GH to experimental header

Browse Source
This commit is contained in:
Manuel
2023-08-09 22:06:56 +02:00
parent 865da09c24
commit 932150c72f
1 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/layout/header/Header.tsx
View File

@@ -1,6 +1,8 @@
import { import {
Anchor,
Box, Box,
Center, Center,
Divider,
Flex, Flex,
Group, Group,
Header, Header,
@@ -32,7 +34,7 @@ export const MainHeader = ({
}: MainHeaderProps) => { }: MainHeaderProps) => {
const { breakpoints } = useMantineTheme(); const { breakpoints } = useMantineTheme();
const isSmallerThanMd = useMediaQuery(`(max-width: ${breakpoints.sm})`); const isSmallerThanMd = useMediaQuery(`(max-width: ${breakpoints.sm})`);
const experimentalHeaderNoteHeight = isSmallerThanMd ? 50 : 30; const experimentalHeaderNoteHeight = isSmallerThanMd ? 60 : 30;
const headerBaseHeight = isSmallerThanMd ? 60 + 46 : 60; const headerBaseHeight = isSmallerThanMd ? 60 + 46 : 60;
const headerHeight = showExperimental const headerHeight = showExperimental
? headerBaseHeight + experimentalHeaderNoteHeight ? headerBaseHeight + experimentalHeaderNoteHeight
@@ -69,7 +71,7 @@ export const MainHeader = ({
}; };
type ExperimentalHeaderNoteProps = { type ExperimentalHeaderNoteProps = {
height?: 30 | 50; height?: 30 | 60;
visible?: boolean; visible?: boolean;
}; };
const ExperimentalHeaderNote = ({ visible = false, height = 30 }: ExperimentalHeaderNoteProps) => { const ExperimentalHeaderNote = ({ visible = false, height = 30 }: ExperimentalHeaderNoteProps) => {
@@ -77,13 +79,28 @@ const ExperimentalHeaderNote = ({ visible = false, height = 30 }: ExperimentalHe
if (!visible) return null; if (!visible) return null;
return ( return (
<Box bg="red" h={height} p={3} px={6}> <Box bg="red" h={height} p={3} px={6} style={{ overflow: 'hidden' }}>
<Flex h="100%" align="center" columnGap={7}> <Group position="apart" noWrap>
<IconAlertTriangle color="white" size="1rem" style={{ minWidth: '1rem' }} /> <Flex h="100%" align="center" columnGap={7}>
<Text color="white" lineClamp={height === 30 ? 1 : 2}> <IconAlertTriangle color="white" size="1rem" style={{ minWidth: '1rem' }} />
{t('experimentalNote.label')} <Text color="white" lineClamp={height === 30 ? 1 : 2}>
</Text> {t('experimentalNote.label')}
</Flex> </Text>
</Flex>
<Group noWrap>
<Anchor
target="_blank"
href="https://github.com/ajnart/homarr/issues/new?assignees=&labels=%F0%9F%90%9B+Bug&projects=&template=bug.yml&title=[Authentication%20beta]:%20%3Ctitle%3E"
color="gray.4"
>
Create issue
</Anchor>
<Divider orientation="vertical" my={5} color="white" opacity={0.4} />
<Anchor target="_blank" href="https://discord.com/invite/aCsmEV5RgA" color="gray.4">
Discord
</Anchor>
</Group>
</Group>
</Box> </Box>
); );
}; };