sidebar width

This commit is contained in:
Andres
2022-07-08 15:47:18 +02:00
parent 494682354c
commit 1fda560d0d
2 changed files with 13 additions and 3 deletions

View File

@@ -2,11 +2,12 @@
background: #fff; background: #fff;
height: 100vh; height: 100vh;
left: -317px; left: -317px;
max-width: 317px; /* max-width: 317px; */
min-width: 317px; /* min-width: 317px; */
position: fixed; position: fixed;
top: 0; top: 0;
transition: 0.2s ease-in; transition: 0.2s ease-in;
width: 317px;
z-index: 2; z-index: 2;
} }

View File

@@ -12,12 +12,20 @@ type PropsType = {
export const Sidebar: FC<PropsType> = ({open, handleClose}) => { export const Sidebar: FC<PropsType> = ({open, handleClose}) => {
return ( return (
<> <>
{/*бэкграунд справа от открытого меню*/}
{open && <div className={s.background} onClick={handleClose}/>} {open && <div className={s.background} onClick={handleClose}/>}
<aside className={`${s.sidebar} ${open ? s.open : ''}`}> <aside className={`${s.sidebar} ${open ? s.open : ''}`}>
<button className={s.close} onClick={handleClose}> <button className={s.close} onClick={handleClose}>
<img src={closeIcon} alt='close sidebar'/> <img
src={closeIcon}
alt='close sidebar'
id={'hw5-menu-close'}
/>
</button> </button>
<nav id={'hw5-menu'} className={s.nav}> <nav id={'hw5-menu'} className={s.nav}>
<NavLink <NavLink
id={'hw5-pre-junior-link'} id={'hw5-pre-junior-link'}
to={PATH.PRE_JUNIOR} to={PATH.PRE_JUNIOR}
@@ -42,6 +50,7 @@ export const Sidebar: FC<PropsType> = ({open, handleClose}) => {
> >
Junior+ Junior+
</NavLink> </NavLink>
</nav> </nav>
</aside> </aside>
</> </>