✨ 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>