Sfoglia il codice sorgente

Add highlight to primary navbar items

Set background to active item in primary navbar.
feature/transactions
parent
commit
92b4dfa1e2
3 ha cambiato i file con 120 aggiunte e 52 eliminazioni
  1. +45
    -34
      src/components/Navbar/Navbar.tsx
  2. +69
    -14
      src/components/PrimaryNavItem/PrimaryNavItem.tsx
  3. +6
    -4
      src/pages/notes.tsx

+ 45
- 34
src/components/Navbar/Navbar.tsx Vedi File

@@ -21,7 +21,6 @@ const Base = styled('aside')({
const PrimaryNavItems = styled('nav')({
width: '100%',
height: '4rem',
display: 'flex',
position: 'fixed',
bottom: 0,
left: 0,
@@ -35,6 +34,17 @@ const PrimaryNavItems = styled('nav')({
left: 'auto',
width: '4rem',
height: '100%',
},
})

const PrimaryNavItemsContainer = styled('div')({
width: '100%',
height: '100%',
maxWidth: 720,
display: 'flex',
margin: '0 auto',
'@media (min-width: 1080px)': {
width: '100%',
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'stretch',
@@ -42,8 +52,7 @@ const PrimaryNavItems = styled('nav')({
})

const PrimaryNavItemGroup = styled('div')({
display: 'flex',
alignItems: 'center',
display: 'contents',
'@media (min-width: 1080px)': {
display: 'block',
},
@@ -120,39 +129,41 @@ const Navbar = ({
<NavbarContainer>
<NavbarItems>
<PrimaryNavItems>
<PrimaryNavItemGroup>
<PrimaryNavItemsContainer>
<PrimaryNavItemGroup>
{
Array.isArray(primaryItemsStart!)
&& primaryItemsStart.map(i => (
<PrimaryNavItem
key={i.id}
mobileOnly={i.mobileOnly}
href={i.href}
iconName={i.iconName}
title={i.title}
active={i.active}
/>
))
}
</PrimaryNavItemGroup>
{
Array.isArray(primaryItemsStart!)
&& primaryItemsStart.map(i => (
<PrimaryNavItem
key={i.id}
mobileOnly={i.mobileOnly}
href={i.href}
iconName={i.iconName}
title={i.title}
active={i.active}
/>
))
Array.isArray(primaryItemsEnd!)
&& (
<PrimaryNavItemGroup>
{
primaryItemsEnd.map(i => (
<PrimaryNavItem
key={i.id}
href={i.href}
iconName={i.iconName}
title={i.title}
active={i.active}
/>
))
}
</PrimaryNavItemGroup>
)
}
</PrimaryNavItemGroup>
{
Array.isArray(primaryItemsEnd!)
&& (
<PrimaryNavItemGroup>
{
primaryItemsEnd.map(i => (
<PrimaryNavItem
key={i.id}
href={i.href}
iconName={i.iconName}
title={i.title}
active={i.active}
/>
))
}
</PrimaryNavItemGroup>
)
}
</PrimaryNavItemsContainer>
</PrimaryNavItems>
<SecondaryNavItemsComponent>
<SecondaryNavItemsOverflow>


+ 69
- 14
src/components/PrimaryNavItem/PrimaryNavItem.tsx Vedi File

@@ -4,12 +4,54 @@ import Link from 'next/link'
import styled from 'styled-components'
import Icon from '../Icon/Icon'

const Base = styled('a')({
width: '4rem',
const Base = styled('div')({
width: 0,
height: '4rem',
flex: 'auto',
padding: '0.25rem',
boxSizing: 'border-box',
position: 'relative',
'@media (min-width: 1080px)': {
width: '4rem',
height: '4rem',
},
})

const ClickArea = styled('a')({
display: 'grid',
placeContent: 'center',
color: 'inherit',
placeContent: 'center',
width: '100%',
height: '100%',
position: 'absolute',
top: 0,
left: 0,
textDecoration: 'none',
})

const ClickAreaContent = styled('span')({
display: 'block',
textAlign: 'center',
lineHeight: 1,
})

const Highlight = styled('div')({
width: '100%',
height: '100%',
backgroundColor: 'var(--color-primary)',
opacity: 0.5,
borderRadius: '0.25rem',
[`+ ${ClickArea}`]: {
opacity: 0.75,
},
})

const Title = styled('small')({
display: 'block',
fontWeight: 'bolder',
'@media (min-width: 1080px)': {
display: 'none',
},
})

const MobileBase = styled(Base)({
@@ -37,18 +79,31 @@ const PrimaryNavItem: React.FC<Props> = ({
}) => {
const BaseComponent = mobileOnly ? MobileBase : Base
return (
<Link
href={href}
passHref
>
<BaseComponent
title={title}
<BaseComponent>
{
active
&& (
<Highlight />
)
}
<Link
href={href}
passHref
>
<Icon
name={iconName}
/>
</BaseComponent>
</Link>
<ClickArea
title={title}
>
<ClickAreaContent>
<Icon
name={iconName}
/>
<Title>
{title}
</Title>
</ClickAreaContent>
</ClickArea>
</Link>
</BaseComponent>
)
}



+ 6
- 4
src/pages/notes.tsx Vedi File

@@ -96,6 +96,7 @@ const Notes = ({ id: idProp }) => {
{
id: 'sidebar',
mobileOnly: true,
active: Boolean(router.query.navbar),
href: {
pathname: router.pathname,
query: {
@@ -104,13 +105,13 @@ const Notes = ({ id: idProp }) => {
},
},
iconName: 'menu',
title: 'Notes',
title: 'Menu',
},
{
id: 'folders',
active: router.pathname.startsWith('/folders'),
active: router.pathname.startsWith('/notes') && !Boolean(router.query.navbar),
href: {
pathname: '/folders',
pathname: '/notes',
},
iconName: 'note',
title: 'Notes',
@@ -135,7 +136,7 @@ const Notes = ({ id: idProp }) => {
},
},
iconName: 'bin',
title: 'View Binned Notes',
title: 'Bin',
},
]}
primaryItemsEnd={[
@@ -155,6 +156,7 @@ const Notes = ({ id: idProp }) => {
pathname: '/notes',
query: {
folder: '00000000-0000-0000-000000000000',
navbar: router.query.navbar,
},
},
iconName: 'back',


Caricamento…
Annulla
Salva