♻️ enhan: toggle cart

:%s

src/components/common/Header/Header.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames'
 import React, { memo, useEffect, useMemo, useRef, useState } from 'react'
 import { useModalCommon } from 'src/components/hooks'
 import { isMobile } from 'src/utils/funtion.utils'
+import { CartDrawer } from '..'
 import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate'
 import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo'
 import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight'
@@ -10,14 +11,23 @@ import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu'
 import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuMobile'
 import s from './Header.module.scss'
 interface props {
-    toggleFilter:()=>void
+    toggleFilter: () => void
 }
 
-const Header = memo(({toggleFilter}:props) => {
+const Header = memo(({ toggleFilter }: props) => {
     const headeFullRef = useRef<HTMLDivElement>(null)
     const [isFullHeader, setIsFullHeader] = useState<boolean>(true)
     const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false })
     const { visible: visibleModalInfo, closeModal: closeModalInfo, openModal: openModalInfo } = useModalCommon({ initialValue: false })
+    const { visible: visibleCartDrawer, openModal: openCartDrawer, closeModal: closeCartDrawer } = useModalCommon({ initialValue: false })
+
+    const toggleCart = () => {
+        if (visibleCartDrawer) {
+            closeCartDrawer()
+        } else {
+            openCartDrawer()
+        }
+    }
 
     const headerHeight = useMemo(() => {
         return headeFullRef.current?.offsetHeight
@@ -46,6 +56,7 @@ const Header = memo(({toggleFilter}:props) => {
                 <div className={s.menu}>
                     <HeaderMenu
                         toggleFilter={toggleFilter}
+                        toggleCart={toggleCart}
                         isFull={isFullHeader}
                         openModalAuthen={openModalAuthen}
                         openModalInfo={openModalInfo} />
@@ -60,6 +71,7 @@ const Header = memo(({toggleFilter}:props) => {
             })}>
                 <HeaderMenu isFull={isFullHeader}
                     toggleFilter={toggleFilter}
+                    toggleCart={toggleCart}
                     openModalAuthen={openModalAuthen}
                     openModalInfo={openModalInfo} />
             </div>
@@ -67,6 +79,9 @@ const Header = memo(({toggleFilter}:props) => {
             <HeaderSubMenuMobile />
             <ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
             <ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} />
+            <CartDrawer
+                visible={visibleCartDrawer}
+                onClose={closeCartDrawer} />
         </>
     )
 })