35 lines
1.1 KiB
JavaScript
35 lines
1.1 KiB
JavaScript
import React, {useState } from 'react';
|
|
import { Header, MediaQuery, Burger, Text, ThemeIcon, Group, Title } from '@mantine/core';
|
|
import { useMantineTheme } from '@mantine/core';
|
|
import { BsHouseDoor } from 'react-icons/bs'
|
|
|
|
|
|
function AppHeader(props) {
|
|
const theme = useMantineTheme();
|
|
|
|
return (
|
|
<Header height={70} padding="md">
|
|
{/* You can handle other responsive styles with MediaQuery component or createStyles function */}
|
|
<div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
|
|
<MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
|
|
<Burger
|
|
opened={props.opened}
|
|
onClick={() => props.setOpened((o) => !o)}
|
|
size="sm"
|
|
color={theme.colors.gray[6]}
|
|
mr="xl"
|
|
/>
|
|
</MediaQuery>
|
|
<Group>
|
|
<BsHouseDoor size={30} />
|
|
<Title><Text inherit variant="gradient" gradient={{ from: 'indigo', to: 'cyan', deg: 45 }}>goInventorize</Text></Title>
|
|
</Group>
|
|
|
|
</div>
|
|
</Header>
|
|
)
|
|
}
|
|
|
|
|
|
|
|
export default AppHeader |