mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
✨ feat: show menu in mode login/ nit login
:%s
This commit is contained in:
parent
faabf5228d
commit
48ab2f2242
@ -1,15 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Layout } from 'src/components/common';
|
||||
import { AccountSignIn } from 'src/components/modules/account';
|
||||
|
||||
const AccountNotLogin = () => {
|
||||
return (
|
||||
<>
|
||||
<AccountSignIn/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
AccountNotLogin.Layout = Layout
|
||||
|
||||
export default AccountNotLogin;
|
@ -1,7 +1,6 @@
|
||||
import classNames from 'classnames'
|
||||
import React, { memo, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import React, { memo, useEffect, useRef, useState } from 'react'
|
||||
import { useModalCommon } from 'src/components/hooks'
|
||||
import { CartDrawer } from '..'
|
||||
import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate'
|
||||
import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo'
|
||||
import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight'
|
||||
@ -17,6 +16,7 @@ interface props {
|
||||
const Header = memo(({ toggleFilter, visibleFilter }: props) => {
|
||||
const headeFullRef = useRef<HTMLDivElement>(null)
|
||||
const [isFullHeader, setIsFullHeader] = useState<boolean>(true)
|
||||
const [isModeAuthenRegister, setIsModeAuthenRegister] = useState<boolean>(false)
|
||||
const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false })
|
||||
const { visible: visibleModalInfo, closeModal: closeModalInfo, openModal: openModalInfo } = useModalCommon({ initialValue: false })
|
||||
|
||||
@ -32,7 +32,17 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => {
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll)
|
||||
}
|
||||
}, [headeFullRef.current])
|
||||
}, [])
|
||||
|
||||
const openModalRegister = () => {
|
||||
setIsModeAuthenRegister(true)
|
||||
openModalAuthen()
|
||||
}
|
||||
|
||||
const openModalLogin = () => {
|
||||
setIsModeAuthenRegister(false)
|
||||
openModalAuthen()
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -43,7 +53,8 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => {
|
||||
<HeaderMenu
|
||||
isStickyHeader={true}
|
||||
toggleFilter={toggleFilter}
|
||||
openModalAuthen={openModalAuthen}
|
||||
openModalLogin={openModalLogin}
|
||||
openModalRegister={openModalRegister}
|
||||
openModalInfo={openModalInfo} />
|
||||
</div>
|
||||
|
||||
@ -54,16 +65,17 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => {
|
||||
isFull={isFullHeader}
|
||||
visibleFilter={visibleFilter}
|
||||
toggleFilter={toggleFilter}
|
||||
openModalAuthen={openModalAuthen}
|
||||
openModalInfo={openModalInfo} />
|
||||
openModalLogin={openModalLogin}
|
||||
openModalRegister = {openModalRegister}
|
||||
openModalInfo={openModalInfo}
|
||||
/>
|
||||
<HeaderSubMenu />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<HeaderSubMenuMobile />
|
||||
<ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
|
||||
<ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} mode={isModeAuthenRegister? 'register': ''} />
|
||||
<ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} />
|
||||
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
@ -22,12 +22,14 @@ import {
|
||||
import Logo from '../../../Logo/Logo'
|
||||
import s from './HeaderMenu.module.scss'
|
||||
import { useLogout } from '../../../../hooks/auth'
|
||||
import useActiveCustomer from 'src/components/hooks/useActiveCustomer'
|
||||
interface Props {
|
||||
children?: any
|
||||
isFull?: boolean
|
||||
isStickyHeader?: boolean
|
||||
visibleFilter?: boolean
|
||||
openModalAuthen: () => void
|
||||
openModalLogin: () => void
|
||||
openModalRegister: () => void
|
||||
openModalInfo: () => void
|
||||
toggleFilter: () => void
|
||||
}
|
||||
@ -37,29 +39,37 @@ const HeaderMenu = memo(
|
||||
isFull,
|
||||
isStickyHeader,
|
||||
visibleFilter,
|
||||
openModalAuthen,
|
||||
openModalLogin,
|
||||
openModalRegister,
|
||||
openModalInfo,
|
||||
toggleFilter,
|
||||
}: Props) => {
|
||||
const router = useRouter()
|
||||
const { toggleCartDrawer } = useCartDrawer()
|
||||
const { customer } = useActiveCustomer()
|
||||
|
||||
const { logout } = useLogout()
|
||||
|
||||
const optionMenu = useMemo(
|
||||
const optionMenuNotAuthen = useMemo(
|
||||
() => [
|
||||
{
|
||||
onClick: openModalAuthen,
|
||||
name: 'Login (Demo)',
|
||||
onClick: openModalLogin,
|
||||
name: 'Sign in',
|
||||
},
|
||||
{
|
||||
onClick: openModalInfo,
|
||||
name: 'Create User Info (Demo)',
|
||||
},
|
||||
{
|
||||
link: '/account-not-login',
|
||||
name: 'Account Not Login (Demo)',
|
||||
onClick: openModalRegister,
|
||||
name: 'Create account',
|
||||
},
|
||||
],
|
||||
[openModalLogin, openModalRegister]
|
||||
)
|
||||
|
||||
const optionMenu = useMemo(
|
||||
() => [
|
||||
// {
|
||||
// onClick: openModalInfo,
|
||||
// name: 'Create User Info (Demo)',
|
||||
// },
|
||||
{
|
||||
link: '/demo',
|
||||
name: 'Notifications Empty (Demo)',
|
||||
@ -78,7 +88,7 @@ const HeaderMenu = memo(
|
||||
onClick: logout,
|
||||
},
|
||||
],
|
||||
[openModalAuthen, openModalInfo, logout]
|
||||
[logout]
|
||||
)
|
||||
return (
|
||||
<section
|
||||
@ -140,7 +150,7 @@ const HeaderMenu = memo(
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<MenuDropdown options={optionMenu} isHasArrow={false}>
|
||||
<MenuDropdown options={customer ? optionMenu : optionMenuNotAuthen} isHasArrow={false}>
|
||||
<IconUser />
|
||||
</MenuDropdown>
|
||||
</li>
|
||||
|
Loading…
x
Reference in New Issue
Block a user