I have written a drawer for my react app
const Sidebar = () => {
return (
<Drawer
open={burgerModalOpen}
onClose={() => setBurgerModalOpen(false)}
>
<Box>
<Navigator />
</Box>
</Drawer>
);
};
const [burgerModalOpen, setBurgerModalOpen] = React.useState(false);
return (
<>
<MobileSideBarContainer>
<BurgerIconContainer onClick={_handleOpenMobileBurger}>
<div>
<BurgerIcon />
</div>
</BurgerIconContainer>
<Sidebar />
</MobileSideBarContainer>
</>
);
}
The drawer just 'appears' and 'disappears' ... it's not sliding in like it does here
How do I fix this?
The sidebar returns the drawer object. Most likely on every new render there is a new drawer object created. Due to which there is some issue regarding refs internally. Can you try using a variable -
const drawer = (
<Drawer open={burgerModalOpen} onClose={() => setBurgerModalOpen(false)}>
<Box>
<Navigator />
</Box>
</Drawer>
);
const Sidebar = () => {
return drawer;
};