bug: add dot MenuFilter, add page AccountSignIn , fix spacing MenuFilter

pages/account.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import { Layout } from 'src/components/common';
-import { AccountPage } from 'src/components/modules/account';
+import { AccountPage, AccountSignIn } from 'src/components/modules/account';
 
 const Account = () => {
     return (
-        <AccountPage/>
+        // <AccountPage/>
+        <>
+            <AccountSignIn/>
+        </>
     );
 };
 

src/components/common/Header/Header.tsx

@@ -11,10 +11,11 @@ import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu'
 import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuMobile'
 import s from './Header.module.scss'
 interface props {
-    toggleFilter: () => void
+    toggleFilter: () => void,
+    visibleFilter:boolean
 }
 
-const Header = memo(({ toggleFilter }: props) => {
+const Header = memo(({ toggleFilter,visibleFilter }: props) => {
     const headeFullRef = useRef<HTMLDivElement>(null)
     const [isFullHeader, setIsFullHeader] = useState<boolean>(true)
     const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false })
@@ -55,6 +56,7 @@ const Header = memo(({ toggleFilter }: props) => {
                 <HeaderHighLight />
                 <div className={s.menu}>
                     <HeaderMenu
+                        visibleFilter={visibleFilter}
                         toggleFilter={toggleFilter}
                         toggleCart={toggleCart}
                         isFull={isFullHeader}

src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss

@@ -22,10 +22,25 @@
                 margin-left: 1.6rem;
             }
             .iconFilter{
+                @apply relative;
+                .dot{
+                    @apply absolute;
+                    top: -0.08rem;
+                    right: -0.2rem;
+                    background-color: var(--negative);
+                    width: 1.2rem;
+                    height: 1.2rem;
+                    border-radius: 1.2rem;
+                    @apply hidden;
+                    &.isShow{
+                        @apply block;
+                    }
+                }
                 @screen md {
                     display: none;
                 }
             }
+            
         }
         .inputSearch {
             margin-top: 2.4rem;

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

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import Link from 'next/link'
-import { memo, useMemo } from 'react'
+import { memo, useEffect, useMemo, useState } from 'react'
 import InputSearch from 'src/components/common/InputSearch/InputSearch'
 import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
 import { IconBuy, IconFilter, IconHeart, IconHistory, IconUser } from 'src/components/icons'
@@ -11,6 +11,7 @@ import { useRouter } from 'next/router'
 interface Props {
     children?: any,
     isFull: boolean,
+    visibleFilter?:boolean,
     openModalAuthen: () => void,
     openModalInfo: () => void,
     toggleFilter:() => void,
@@ -19,8 +20,10 @@ interface Props {
 
 const FILTER_PAGE = [ROUTE.HOME,ROUTE.PRODUCTS]
 
-const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
+const HeaderMenu = memo(({ visibleFilter,isFull, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
     const router = useRouter()
+
+
     const optionMenu = useMemo(() => [
         {
             onClick: openModalAuthen,
@@ -50,6 +53,7 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter,
                             FILTER_PAGE.includes(router.pathname) && (
                                 <button className={s.iconFilter} onClick={toggleFilter}>
                                     <IconFilter/>
+                                    <div className={classNames({[s.dot]:true,[s.isShow]:visibleFilter})}></div>
                                 </button>
                             )
                         }

src/components/common/Layout/Layout.tsx

@@ -29,7 +29,7 @@ const Layout: FC<Props> = ({ children }) => {
     return (
         <CommerceProvider locale={locale}>
                 <div className={s.mainLayout}>
-                    <Header toggleFilter={toggleFilter}/>
+                    <Header toggleFilter={toggleFilter} visibleFilter={visibleFilter}/>
                     <main >{children}</main>
                     
                     <CustomShapeSvg/>

src/components/common/MenuNavigation/MenuNavigation.module.scss

@@ -1,5 +1,6 @@
 @import "../../../styles/utilities";
 .menuNavigationWrapper{
+    @apply hidden;
     .menuNavigationHeading{
         @screen md {
             @apply sub-headline font-bold ;

src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss

@@ -10,8 +10,6 @@
 }
 .menuNavigationProductListMobile{
     @apply relative transition-all duration-100;
-    
-
     &.isShow{
         &::after{
             content: "";
@@ -39,13 +37,14 @@
             transform: translateY(0%)
         }
         .content{
-            @apply  relative w-full h-full;
+            @apply  absolute w-full h-full;
             margin-top: 3rem;
-            padding-top: 8rem ;
+            padding-top: 10rem ;
             padding-bottom: 10rem;
             background-color: white;
             overflow-y: auto;
-            height: 100vh;
+            height: 96%;
+            bottom: 0;
             border-radius: 2.4rem 2.4rem 0 0;
             .head{
                 @apply flex justify-between fixed;
@@ -53,7 +52,7 @@
                 left:0;
                 margin-top: 3rem;
                 border-radius: 2.4rem 2.4rem 0 0;
-                padding: 3rem 2rem 1rem 2rem;
+                padding: 4rem 2rem 2rem 2rem;
                 width: 100%;
                 background-color: white;
                 z-index: 10000;
@@ -68,7 +67,8 @@
                 left:0;
                 width: 100%;
                 background-color: white;
-                padding: 0 1rem 2rem 1rem;
+                padding: 0 1rem 3rem 1rem;
+                
             }
             button{
                 margin-top: 2rem;

src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss

@@ -9,7 +9,7 @@
         margin: 0.8rem 0;
     }
     .menuSortList{
-        margin-bottom: 2rem;
+        padding-bottom: 1rem;
         box-sizing: border-box;
         
         li{
@@ -22,7 +22,7 @@
              &.active {
                 @apply font-bold relative;
                 color:var(--text-active);
-                background-color: var(--primary-lightest);
+                background-color: var(--gray);
                 &::after{
                     @apply absolute;
                     content:"";

src/components/modules/account/AccountSignIn/AccountSignIn.module.scss

@@ -0,0 +1,37 @@
+@import "../../../../styles/utilities";
+.accountSignInWrapper{
+
+    @screen sm-only{
+        @apply w-full;
+        .imgError{
+            width: 30%;
+            margin: 0 auto;
+        }
+        .text{
+            @apply sub-headline;
+             color:var(--text-placeholder);
+             text-align: center;
+             margin-top: 3.6rem;
+        }
+        .btn{
+           @apply flex justify-center;
+            margin: 2.6rem auto;
+            button{
+                 padding: 1.6rem 7rem;
+            }
+        }
+        .dontHaveAccount{
+            @apply flex justify-center font-bold;
+            div{
+                color:var(--text-active);
+            }
+            span{
+                color:var(--positive);
+            }
+        }
+    }
+    @screen md{
+        @apply hidden;
+    }
+  
+}

src/components/modules/account/AccountSignIn/AccountSignIn.tsx

@@ -0,0 +1,40 @@
+import React from "react"
+import { ButtonCommon, StaticImage } from "src/components/common";
+import s from './AccountSignIn.module.scss';
+import {LANGUAGE} from 'src/utils/language.utils';
+import AccountSignInImg from '../../../../../public/assets/images/accountsignin.png'
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+interface AccountSignIn {
+
+}
+
+const AccountSignIn = ({ } : AccountSignIn) => {
+    const router = useRouter();
+    function openLogin(){
+        router.push({
+            pathname: '/account/query',
+            search: '?openLogin=true'
+          });
+    }
+    return (
+       <>
+            <div className={s.accountSignInWrapper}>
+                <div className={s.imgError}>
+                    <StaticImage src={AccountSignInImg} />
+                </div>
+                <div className={s.text}>
+                    Sign in to get more interesting <br/> features
+                </div>
+                <div className={s.btn}>
+                    <ButtonCommon size="default" onClick={openLogin}>{LANGUAGE.BUTTON_LABEL.SIGNIN}</ButtonCommon>
+                </div>
+                <div className={s.dontHaveAccount}>
+                    <div>Don't have an account? &nbsp;</div> <span><a><Link href="/"> Create Account</Link></a></span>
+                </div>
+            </div>
+       </>
+    )
+}
+
+export default AccountSignIn

src/components/modules/account/index.ts

@@ -1,3 +1,4 @@
 export { default as AccountNavigation } from './AccountNavigation/AccountNavigation'
 export { default as DeliveryItem } from './DeliveryItem/DeliveryItem'
-export { default as AccountPage } from './AccountPage/AccountPage'
+export { default as AccountPage } from './AccountPage/AccountPage'
+export { default as AccountSignIn } from './AccountSignIn/AccountSignIn'

src/utils/language.utils.ts

@@ -5,6 +5,7 @@ export const LANGUAGE = {
         CONFIRM:'Confirm',
         ADD_TO_CARD: 'Add to Cart',
         PREORDER: 'Pre-Order Now',
+        SIGNIN :'Sign In'
     },
     PLACE_HOLDER: {
         SEARCH: 'Search',