🎨 styles: drawer comon

:%s

src/components/common/Layout/Layout.tsx

@@ -1,6 +1,8 @@
 import { CommerceProvider } from '@framework'
 import { useRouter } from 'next/router'
 import { FC } from 'react'
+import { useModalCommon } from 'src/components/hooks'
+import { DrawerCommon, ScrollToTop } from '..'
 import Footer from '../Footer/Footer'
 import Header from '../Header/Header'
 import s from './Layout.module.scss'
@@ -13,12 +15,25 @@ interface Props {
 // note: demo code
 const Layout: FC<Props> = ({ children }) => {
     const { locale = 'en-US' } = useRouter()
+    const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: true })
 
+    const toggle = () => {
+        if (visibleCartDrawer) {
+            closeCartDrawer()
+        } else {
+            openModal()
+        }
+    }
     return (
         <CommerceProvider locale={locale}>
             <div className={s.mainLayout}>
+                <button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button>
                 <Header />
                 <main >{children}</main>
+                <DrawerCommon
+                    title="Cart"
+                    visible={visibleCartDrawer}
+                    onClose={closeCartDrawer} />
                 <Footer />
             </div>
         </CommerceProvider>