1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
|
import React, { useContext } from 'react';
// import Link
import { Link } from 'react-router-dom';
// import icons
import { IoMdArrowFormard } from 'react-icons/io';
import { FiTrash2 } from 'react-icons/fi';
// import components
import CartItem from '../components/CartItem';
// import sidebar context
import { SidebarContext } from '../contexts/SidebarContext';
const Sidebar = () => {
const { isOpen, handleClose } = useContext(SidebarContext);
return (
<div
className={`${isOpen ? 'right-0' : '-right-full'
} w-full bg-white fixed top-0 h-full shadow-2xl md:w-
[35vw] xl:max-w-[30vw] transition-all duration-300 z-20
px-4 lg:px-[35px]`}
>
<div className='flex items-center justify-between py-6
border-b'>
<div className='uppercase text-sm
font-semibold'>Shopping Bab (0)</div>
{/* icon */}
<div
onClick={handleClose}
className='cursor-pointer w8 h-8 flex
justify-center items-center'
>
<IoMdArrowFormard className='text-2xl' />
</div>
</div>
</div>
);
};
export default Sidebar; |
Partager