Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from 'react';
import { PureComponent } from './BaseComponent';
import { opacity, space } from '../theme';
const data = [
{
id: 'your-policy',
children: 'Your Policy',
},
{
id: 'account',
children: 'Account',
},
{
id: 'objective',
children: 'Objective',
},
{
id: 'personal-info',
children: 'Personal Info',
},
{
id: 'beneficiaries',
children: 'Beneficiaries',
},
{
id: 'bank-info',
children: 'Bank Info',
},
{
id: 'review-and-sign',
children: 'Review & Sign',
},
];
export default class Breadcrumb extends PureComponent {
template(css) {
return (
<nav className={css('root')}>
<ul className={css('list')}>
{data.map(({ children, id }, index) => (
<li key={index} className={css('sub3', 'item')} id={id}>
<a className={css('resetLink', 'link')} href={`#${id}`}>
{children}
</a>
</li>
))}
</ul>
</nav>
);
}
styles() {
const bulletSize = '14px';
return {
root: { padding: 100 },
list: {},
item: {
textAlign: 'right',
transition: 'opacity 0.15s linear',
position: 'relative',
':not(:last-of-type)': { paddingBottom: space(24) },
':target ~ li:not(:hover)': { opacity: opacity(1) },
':before, :after': {
content: '""',
position: 'absolute',
},
':not(:last-of-type):before': {
width: 1,
height: `calc(100% - ${bulletSize})`,
right: -1,
top: bulletSize,
marginTop: '0.4rem',
borderRight: '1px solid currentColor',
},
':after': {
content: '"●"',
fontSize: '80%',
right: `calc(calc(${bulletSize} * 0.5}) * -1)`,
},
},
resetLink: {
color: 'currentColor',
textDecoration: 'none',
},
link: { padding: space(24) },
};
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.