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

refactor: add active styles for nav

Browse source
This commit is contained in:
Nicola Zambello 2023-02-18 21:41:51 +01:00
parent 4b14fcff24
commit 35adc7db03
Signed by: nzambello
GPG key ID: 56E4A92C2C1E50BA
1 changed files with 58 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
app/root.tsx
View file

@ -274,7 +274,12 @@ function Layout({ children }: React.PropsWithChildren<{}>) {
<Home size={16} /> <Home size={16} />
</ThemeIcon> </ThemeIcon>
<Text size="sm">Home</Text> <Text
size="sm"
weight={location.pathname === '/' ? 'bold' : 'normal'}
>
Home
</Text>
</Group> </Group>
</UnstyledButton> </UnstyledButton>
<UnstyledButton <UnstyledButton
@ -303,7 +308,16 @@ function Layout({ children }: React.PropsWithChildren<{}>) {
<Clock size={16} /> <Clock size={16} />
</ThemeIcon> </ThemeIcon>
<Text size="sm">Time entries</Text> <Text
size="sm"
weight={
location.pathname.includes('/time-entries')
? 'bold'
: 'normal'
}
>
Time entries
</Text>
</Group> </Group>
</UnstyledButton> </UnstyledButton>
<UnstyledButton <UnstyledButton
@ -332,12 +346,21 @@ function Layout({ children }: React.PropsWithChildren<{}>) {
<Briefcase size={16} /> <Briefcase size={16} />
</ThemeIcon> </ThemeIcon>
<Text size="sm">Projects</Text> <Text
size="sm"
weight={
location.pathname.includes('/projects')
? 'bold'
: 'normal'
}
>
Projects
</Text>
</Group> </Group>
</UnstyledButton> </UnstyledButton>
<UnstyledButton <UnstyledButton
component={Link} component={Link}
to="/" to="/report"
sx={(theme) => ({ sx={(theme) => ({
display: 'block', display: 'block',
width: '100%', width: '100%',
@ -361,7 +384,16 @@ function Layout({ children }: React.PropsWithChildren<{}>) {
<FileText size={16} /> <FileText size={16} />
</ThemeIcon> </ThemeIcon>
<Text size="sm">Report</Text> <Text
size="sm"
weight={
location.pathname.includes('/report')
? 'bold'
: 'normal'
}
>
Report
</Text>
</Group> </Group>
</UnstyledButton> </UnstyledButton>
<UnstyledButton <UnstyledButton
@ -390,12 +422,21 @@ function Layout({ children }: React.PropsWithChildren<{}>) {
<Upload size={16} /> <Upload size={16} />
</ThemeIcon> </ThemeIcon>
<Text size="sm">Import/Export</Text> <Text
size="sm"
weight={
location.pathname.includes('/importexport')
? 'bold'
: 'normal'
}
>
Import/Export
</Text>
</Group> </Group>
</UnstyledButton> </UnstyledButton>
<UnstyledButton <UnstyledButton
component={Link} component={Link}
to="/" to="/statistics"
sx={(theme) => ({ sx={(theme) => ({
display: 'block', display: 'block',
width: '100%', width: '100%',
@ -419,7 +460,16 @@ function Layout({ children }: React.PropsWithChildren<{}>) {
<BarChart2 size={16} /> <BarChart2 size={16} />
</ThemeIcon> </ThemeIcon>
<Text size="sm">Statistics</Text> <Text
size="sm"
weight={
location.pathname.includes('/statistics')
? 'bold'
: 'normal'
}
>
Statistics
</Text>
</Group> </Group>
</UnstyledButton> </UnstyledButton>
</Navbar.Section> </Navbar.Section>