Details HTML element for About page Section component

This commit is contained in:
Simon Rapilly 2023-10-14 21:38:05 +00:00
parent eae5c7334a
commit edbbb48015
2 changed files with 10 additions and 7 deletions

View file

@ -74,15 +74,13 @@ class Section extends PureComponent {
const { collapsed } = this.state; const { collapsed } = this.state;
return ( return (
<div className={classNames('about__section', { active: !collapsed })}> <details open={!collapsed} onOpen={this.handleClick} className={classNames('about__section', { active: !collapsed })}>
<div className='about__section__title' role='button' tabIndex={0} onClick={this.handleClick}> <summary className='about__section__title'>
<Icon id={collapsed ? 'chevron-right' : 'chevron-down'} icon={collapsed ? ChevronRightIcon : ExpandMoreIcon} /> {title} <Icon id={collapsed ? 'chevron-right' : 'chevron-down'} icon={collapsed ? ChevronRightIcon : ExpandMoreIcon} /> {title}
</div> </summary>
{!collapsed && ( <div className='about__section__body'>{children}</div>
<div className='about__section__body'>{children}</div> </details>
)}
</div>
); );
} }

View file

@ -9146,6 +9146,11 @@ noscript {
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
color: $highlight-text-color; color: $highlight-text-color;
cursor: pointer; cursor: pointer;
list-style: none;
}
&__title::-webkit-details-marker {
display: none;
} }
&.active &__title { &.active &__title {