he4et/elseifplayer
1
0
Fork 0
mirror of https://github.com/He4eT/elseifplayer.git synced 2026-05-04 17:07:22 +00:00
Code Issues Projects Releases Packages Wiki Activity

MenuButton: add svg icon

Browse source
This commit is contained in:
He4eT 2023-06-03 23:39:45 +03:00 • committed by Alexey
commit d01dd59598
2 changed files with 18 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/Player/InputBox/MenuButton/MenuButton.jsx
View file

@ -7,9 +7,15 @@ export default MenuButton = ({ onClick }) => {
<button <button
aria-label='Menu' aria-label='Menu'
className={s.menuButton} className={s.menuButton}
onClick={() => setMenuOpen(true)} onClick={onClick}
> >
= <svg
class={s.menuIcon}
viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'
>
<path d='M10 10h4v4h-4zm0-6h4v4h-4zm0 12h4v4h-4z'/>
</svg>
</button> </button>
) )
} }

12
src/components/Player/InputBox/MenuButton/MenuButton.module.scss
View file

@ -1,14 +1,22 @@
.menuButton { .menuButton {
display: inline-flex;
align-items: center;
justify-content: center;
background: none; background: none;
border-left: none; border: none;
outline-offset: -8px; outline-offset: -8px;
position: absolute; position: absolute;
right: 0; right: 0;
height: 100%; height: 100%;
padding: 0; padding: 0;
aspect-ratio: 1;
&:focus-visible { &:focus-visible {
outline-offset: -4px; outline-offset: -4px;
} }
.menuIcon {
height: 32px;
width: 32px;
fill: CurrentColor;
}
} }