forked from RiseUP/riseup-squad23
87 lines
2.2 KiB
JavaScript
87 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
|
|
const MobileMenuToggle = ({ isOpen, onToggle, className = '' }) => {
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={`mobile-menu-toggle btn btn-outline-primary d-lg-none ${className}`}
|
|
onClick={onToggle}
|
|
aria-label={isOpen ? 'Fechar menu' : 'Abrir menu'}
|
|
aria-expanded={isOpen}
|
|
style={{
|
|
position: 'fixed',
|
|
top: '1rem',
|
|
left: '1rem',
|
|
zIndex: 1060,
|
|
width: '3rem',
|
|
height: '3rem',
|
|
padding: 0,
|
|
border: '2px solid #435ebe',
|
|
borderRadius: '0.375rem',
|
|
backgroundColor: 'white',
|
|
boxShadow: '0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
transition: 'all 0.3s ease'
|
|
}}
|
|
>
|
|
<div
|
|
className="hamburger-icon"
|
|
style={{
|
|
width: '1.5rem',
|
|
height: '1.2rem',
|
|
position: 'relative',
|
|
transform: isOpen ? 'rotate(45deg)' : 'none',
|
|
transition: 'transform 0.3s ease'
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
display: 'block',
|
|
position: 'absolute',
|
|
height: '2px',
|
|
width: '100%',
|
|
backgroundColor: '#435ebe',
|
|
borderRadius: '1px',
|
|
opacity: isOpen ? 0 : 1,
|
|
left: 0,
|
|
top: '0.25rem',
|
|
transition: 'all 0.3s ease'
|
|
}}
|
|
/>
|
|
<span
|
|
style={{
|
|
display: 'block',
|
|
position: 'absolute',
|
|
height: '2px',
|
|
width: '100%',
|
|
backgroundColor: '#435ebe',
|
|
borderRadius: '1px',
|
|
left: 0,
|
|
top: '0.5rem',
|
|
transform: isOpen ? 'rotate(90deg)' : 'none',
|
|
transition: 'all 0.3s ease'
|
|
}}
|
|
/>
|
|
<span
|
|
style={{
|
|
display: 'block',
|
|
position: 'absolute',
|
|
height: '2px',
|
|
width: '100%',
|
|
backgroundColor: '#435ebe',
|
|
borderRadius: '1px',
|
|
opacity: isOpen ? 0 : 1,
|
|
left: 0,
|
|
top: '0.75rem',
|
|
transition: 'all 0.3s ease'
|
|
}}
|
|
/>
|
|
</div>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default MobileMenuToggle;
|