✨ feat: product lisT

:%s

src/components/common/Layout/Layout.tsx

@@ -1,10 +1,13 @@
 import { CommerceProvider } from '@framework'
 import { useRouter } from 'next/router'
 import { FC } from 'react'
+import { FilterProvider } from 'src/components/contexts/FilterContext'
 import { useModalCommon } from 'src/components/hooks'
-import { CartDrawer } from '..'
+import { BRAND, CATEGORY, FEATURED } from 'src/utils/constanst.utils'
+import { CartDrawer, CustomShapeSvg } from '..'
 import Footer from '../Footer/Footer'
 import Header from '../Header/Header'
+import MenuNavigationProductList from '../MenuNavigationProductList/MenuNavigationProductList'
 import s from './Layout.module.scss'
 
 interface Props {
@@ -16,6 +19,7 @@ interface Props {
 const Layout: FC<Props> = ({ children }) => {
     const { locale = 'en-US' } = useRouter()
     const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: false })
+    const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false })
 
     const toggle = () => {
         if (visibleCartDrawer) {
@@ -24,17 +28,27 @@ const Layout: FC<Props> = ({ children }) => {
             openModal()
         }
     }
+    const toggleFilter = () => {
+        console.log("click")
+        if (visibleFilter) {
+            closeFilter()
+        } else {
+            openFilter()
+        }
+    }
     return (
         <CommerceProvider locale={locale}>
-            <div className={s.mainLayout}>
-                <Header />
-                <main >{children}</main>
-                <button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button>
-                <CartDrawer
-                    visible={visibleCartDrawer}
-                    onClose={closeCartDrawer} />
-                <Footer />
-            </div>
+                <div className={s.mainLayout}>
+                    <Header toggleFilter={toggleFilter}/>
+                    <main >{children}</main>
+                    <button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button>
+                    <CustomShapeSvg/>
+                    <CartDrawer
+                        visible={visibleCartDrawer}
+                        onClose={closeCartDrawer} />
+					<div className={s.filter}><MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter}/> </div>
+                    <Footer />
+                </div>
         </CommerceProvider>
 
     )