nzambello/work-timer
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor: root nav with navlink

Browse source
This commit is contained in:
Nicola Zambello 2023-02-18 21:54:57 +01:00
parent 72df192ebc
commit 46e6f2f5ac
Signed by: nzambello
GPG key ID: 56E4A92C2C1E50BA
1 changed files with 43 additions and 196 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

239
app/root.tsx
View file

@ -33,7 +33,8 @@ import {
Box, Box,
Group, Group,
UnstyledButton, UnstyledButton,
ThemeIcon ThemeIcon,
NavLink
} from '@mantine/core'; } from '@mantine/core';
import { useColorScheme, useLocalStorage } from '@mantine/hooks'; import { useColorScheme, useLocalStorage } from '@mantine/hooks';
import { StylesPlaceholder } from '@mantine/remix'; import { StylesPlaceholder } from '@mantine/remix';
@ -102,7 +103,6 @@ function Document({
}) { }) {
const preferredColorScheme = useColorScheme(); const preferredColorScheme = useColorScheme();
const toggleColorScheme = (value?: ColorScheme) => { const toggleColorScheme = (value?: ColorScheme) => {
console.log(value);
setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark')); setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
}; };
@ -248,230 +248,77 @@ function Layout({ children }: React.PropsWithChildren<{}>) {
</MediaQuery> </MediaQuery>
{user && ( {user && (
<Navbar.Section grow mt="md"> <Navbar.Section grow mt="md">
<UnstyledButton <NavLink
component={Link} component={Link}
to="/" to="/"
sx={(theme) => ({ label="Home"
display: 'block', icon={
width: '100%',
padding: theme.spacing.xs,
borderRadius: theme.radius.sm,
color:
theme.colorScheme === 'dark'
? theme.colors.dark[0]
: theme.black,
'&:hover': {
backgroundColor:
theme.colorScheme === 'dark'
? theme.colors.dark[6]
: theme.colors.gray[0]
}
})}
>
<Group>
<ThemeIcon variant="light"> <ThemeIcon variant="light">
<Home size={16} /> <Home size={16} />
</ThemeIcon> </ThemeIcon>
}
<Text active={location.pathname === '/'}
size="sm" />
weight={location.pathname === '/' ? 'bold' : 'normal'} <NavLink
>
Home
</Text>
</Group>
</UnstyledButton>
<UnstyledButton
component={Link} component={Link}
to="/time-entries" to="/time-entries"
sx={(theme) => ({ label="Time entries"
display: 'block', icon={
width: '100%',
padding: theme.spacing.xs,
borderRadius: theme.radius.sm,
color:
theme.colorScheme === 'dark'
? theme.colors.dark[0]
: theme.black,
'&:hover': {
backgroundColor:
theme.colorScheme === 'dark'
? theme.colors.dark[6]
: theme.colors.gray[0]
}
})}
>
<Group>
<ThemeIcon variant="light"> <ThemeIcon variant="light">
<Clock size={16} /> <Clock size={16} />
</ThemeIcon> </ThemeIcon>
}
<Text variant="light"
size="sm" active={location.pathname.includes('/time-entries')}
weight={ />
location.pathname.includes('/time-entries') <NavLink
? 'bold'
: 'normal'
}
>
Time entries
</Text>
</Group>
</UnstyledButton>
<UnstyledButton
component={Link} component={Link}
to="/projects" to="/projects"
sx={(theme) => ({ label="Projects"
display: 'block', icon={
width: '100%',
padding: theme.spacing.xs,
borderRadius: theme.radius.sm,
color:
theme.colorScheme === 'dark'
? theme.colors.dark[0]
: theme.black,
'&:hover': {
backgroundColor:
theme.colorScheme === 'dark'
? theme.colors.dark[6]
: theme.colors.gray[0]
}
})}
>
<Group>
<ThemeIcon variant="light"> <ThemeIcon variant="light">
<Briefcase size={16} /> <Briefcase size={16} />
</ThemeIcon> </ThemeIcon>
}
<Text variant="light"
size="sm" active={location.pathname.includes('/projects')}
weight={ />
location.pathname.includes('/projects') <NavLink
? 'bold'
: 'normal'
}
>
Projects
</Text>
</Group>
</UnstyledButton>
<UnstyledButton
component={Link} component={Link}
to="/report" to="/report"
sx={(theme) => ({ label="Report"
display: 'block', icon={
width: '100%',
padding: theme.spacing.xs,
borderRadius: theme.radius.sm,
color:
theme.colorScheme === 'dark'
? theme.colors.dark[0]
: theme.black,
'&:hover': {
backgroundColor:
theme.colorScheme === 'dark'
? theme.colors.dark[6]
: theme.colors.gray[0]
}
})}
>
<Group>
<ThemeIcon variant="light"> <ThemeIcon variant="light">
<FileText size={16} /> <FileText size={16} />
</ThemeIcon> </ThemeIcon>
}
<Text variant="light"
size="sm" active={location.pathname.includes('/report')}
weight={ />
location.pathname.includes('/report') <NavLink
? 'bold'
: 'normal'
}
>
Report
</Text>
</Group>
</UnstyledButton>
<UnstyledButton
component={Link} component={Link}
to="/importexport" to="/importexport"
sx={(theme) => ({ label="Import/Export"
display: 'block', icon={
width: '100%',
padding: theme.spacing.xs,
borderRadius: theme.radius.sm,
color:
theme.colorScheme === 'dark'
? theme.colors.dark[0]
: theme.black,
'&:hover': {
backgroundColor:
theme.colorScheme === 'dark'
? theme.colors.dark[6]
: theme.colors.gray[0]
}
})}
>
<Group>
<ThemeIcon variant="light"> <ThemeIcon variant="light">
<Upload size={16} /> <Upload size={16} />
</ThemeIcon> </ThemeIcon>
}
<Text variant="light"
size="sm" active={location.pathname.includes('/importexport')}
weight={ />
location.pathname.includes('/importexport') <NavLink
? 'bold'
: 'normal'
}
>
Import/Export
</Text>
</Group>
</UnstyledButton>
<UnstyledButton
component={Link} component={Link}
to="/statistics" to="/statistics"
sx={(theme) => ({ label="Statistics"
display: 'block', icon={
width: '100%',
padding: theme.spacing.xs,
borderRadius: theme.radius.sm,
color:
theme.colorScheme === 'dark'
? theme.colors.dark[0]
: theme.black,
'&:hover': {
backgroundColor:
theme.colorScheme === 'dark'
? theme.colors.dark[6]
: theme.colors.gray[0]
}
})}
>
<Group>
<ThemeIcon variant="light"> <ThemeIcon variant="light">
<BarChart2 size={16} /> <BarChart2 size={16} />
</ThemeIcon> </ThemeIcon>
}
<Text variant="light"
size="sm" active={location.pathname.includes('/statistics')}
weight={ />
location.pathname.includes('/statistics')
? 'bold'
: 'normal'
}
>
Statistics
</Text>
</Group>
</UnstyledButton>
</Navbar.Section> </Navbar.Section>
)} )}
{user && ( {user && (