✨ feat: open modal authen from the header

:%s

src/components/common/Header/Header.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames'
 import React, { memo, useEffect, useState } from 'react'
+import { useModalCommon } from 'src/components/hooks/useModalCommon'
 import { isMobile } from 'src/utils/funtion.utils'
 import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate'
 import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight'
@@ -8,13 +9,10 @@ import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu'
 import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuMobile'
 import s from './Header.module.scss'
 
-interface Props {
-    className?: string
-    children?: any
-}
 
-const Header = memo(({ }: Props) => {
+const Header = memo(() => {
     const [isFullHeader, setIsFullHeader] = useState<boolean>(true)
+    const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: true })
 
     useEffect(() => {
         window.addEventListener('scroll', handleScroll)
@@ -37,12 +35,13 @@ const Header = memo(({ }: Props) => {
             <header className={classNames({ [s.header]: true, [s.full]: isFullHeader })}>
                 <HeaderHighLight isShow={isFullHeader} />
                 <div className={s.menu}>
-                    <HeaderMenu isFull={isFullHeader} />
+                    <HeaderMenu isFull={isFullHeader} openModalAuthen={openModalAuthen} />
                     <HeaderSubMenu isShow={isFullHeader} />
                 </div>
             </header>
             <HeaderSubMenuMobile />
-            <ModalAuthenticate/>
+            visible = {visibleModalAuthen.toString()}
+            <ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
         </>
     )
 })

src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx

@@ -1,30 +1,35 @@
 import classNames from 'classnames'
 import Link from 'next/link'
-import { memo } from 'react'
+import { memo, useMemo } from 'react'
 import InputSearch from 'src/components/common/InputSearch/InputSearch'
 import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
 import { IconBuy, IconHeart, IconHistory, IconUser } from 'src/components/icons'
 import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import s from './HeaderMenu.module.scss'
 
-const OPTION_MENU = [
-    {
-        link: ROUTE.ACCOUNT,
-        name: 'Account',
-    },
-    {
-        link: '/',
-        name: 'Logout',
-    },
-
-]
-
 interface Props {
     children?: any,
     isFull: boolean,
+    openModalAuthen: () => void,
 }
 
-const HeaderMenu = memo(({ isFull }: Props) => {
+const HeaderMenu = memo(({ isFull, openModalAuthen }: Props) => {
+    const optionMenu = useMemo(() => [
+        {
+            onClick: openModalAuthen,
+            name: 'Login (Demo)',
+        },
+        {
+            link: ROUTE.ACCOUNT,
+            name: 'Account',
+        },
+        {
+            link: '/',
+            name: 'Logout',
+        },
+
+    ], [openModalAuthen])
+
     return (
         <section className={classNames({ [s.headerMenu]: true, [s.full]: isFull })}>
             <div className={s.left}>
@@ -54,7 +59,7 @@ const HeaderMenu = memo(({ isFull }: Props) => {
                     </Link>
                 </li>
                 <li>
-                    <MenuDropdown options={OPTION_MENU} isHasArrow={false}><IconUser /></MenuDropdown>
+                    <MenuDropdown options={optionMenu} isHasArrow={false}><IconUser /></MenuDropdown>
                 </li>
                 <li>
                     <button>

src/components/common/MenuDropdown/MenuDropdown.module.scss

@@ -62,17 +62,25 @@
         .menuIner {
             @apply rounded list-none bg-white;
             border: 1px solid var(--text-active);
-            margin-top: .4rem;
+            margin-top: 0.4rem;
             li {
                 @apply block w-full transition-all duration-200 cursor-pointer text-active;
-                padding: 0.8rem 1.6rem;
-                &:hover {
-                    @apply bg-primary-lightest;
-                    color: var(--primary);
+                button {
+                    all: unset;
+                    color: currentColor;
+                    @apply text-left w-full;
+                }
+                button,
+                a {
+                    padding: 0.8rem 1.6rem;
                 }
                 a {
                     @apply block;
                 }
+                &:hover {
+                    @apply bg-primary-lightest;
+                    color: var(--primary);
+                }
             }
         }
     }

src/components/common/MenuDropdown/MenuDropdown.tsx

@@ -5,7 +5,7 @@ import s from './MenuDropdown.module.scss';
 
 interface Props {
     children?: React.ReactNode,
-    options: { link: string, name: string }[],
+    options: { link?: string, name: string, onClick?: () => void }[],
     isHasArrow?: boolean,
     align?: 'left'
 }
@@ -26,11 +26,16 @@ const MenuDropdown = ({ options, children, isHasArrow = true, align }: Props) =>
                 <ul className={s.menuIner}>
                     {
                         options.map(item => <li key={item.name}>
-                            <Link href={item.link}>
-                                <a >
+                            {item.onClick ?
+                                <button onClick={item.onClick}>
                                     {item.name}
-                                </a>
-                            </Link>
+                                </button>
+                                :
+                                <Link href={item.link || ''}>
+                                    <a >
+                                        {item.name}
+                                    </a>
+                                </Link>}
                         </li>)
                     }
                 </ul>

src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss

@@ -1,4 +1,7 @@
 .formAuthenticate {
-    @apply grid grid-cols-2 overflow-hidden;
-    width: 200%;
+    @apply overflow-hidden;
+    .inner {
+        @apply grid grid-cols-2 overflow-hidden;
+        width: 200%;
+    }
 }

src/components/common/ModalAuthenticate/ModalAuthenticate.tsx

@@ -1,9 +1,15 @@
 import React, { useState } from 'react'
+import ModalCommon from '../ModalCommon/ModalCommon'
 import FormLogin from './components/FormLogin/FormLogin'
 import FormRegister from './components/FormRegister/FormRegister'
 import s from './ModalAuthenticate.module.scss'
 
-const ModalAuthenticate = () => {
+interface Props {
+    visible: boolean,
+    closeModal: () => void,
+}
+
+const ModalAuthenticate = ({ visible, closeModal }: Props) => {
     const [isLogin, setIsLogin] = useState<boolean>(true)
 
     const onSwitch = () => {
@@ -11,10 +17,15 @@ const ModalAuthenticate = () => {
     }
 
     return (
-        <section className={s.formAuthenticate}>
-            <FormLogin isHide={!isLogin} onSwitch={onSwitch} />
-            <FormRegister isHide={isLogin} onSwitch={onSwitch} />
-        </section>
+        <ModalCommon visible={visible} onClose={closeModal} title={isLogin ? 'Sign In' : 'Create Account'}>
+            <section className={s.formAuthenticate}>
+                <div className={s.inner}>
+                    <FormLogin isHide={!isLogin} onSwitch={onSwitch} />
+                    <FormRegister isHide={isLogin} onSwitch={onSwitch} />
+                </div>
+            </section>
+        </ModalCommon>
+
     )
 }
 

src/components/hooks/useModalCommon.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+
+interface Props {
+    initialValue?: boolean,
+}
+
+export const useModalCommon = ({ initialValue = false }: Props) => {
+    const [visible, setVisible] = useState<boolean>(initialValue)
+
+    const openModal = (e?: any) => {
+        e && e.stopPropagation()
+        setVisible(true)
+    }
+
+    const closeModal = (e?: any) => {
+        e && e.stopPropagation()
+        setVisible(false)
+    }
+
+    return {
+        visible, openModal, closeModal
+    }
+};