Merge pull request #56 from KieIO/m7-lytran3

M7 lytran3: Fix header, cart drawer

next-env.d.ts

@@ -1,6 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

public/fonts/style.css

@@ -0,0 +1,4 @@
+@font-face {
+    font-family: "Norquay-bold";
+    src: url("./Norquay-bold.otf") format("opentype"), url("./Norquay-bold.woff") format("woff");
+}

src/components/common/Banner/Banner.tsx

@@ -8,7 +8,6 @@ interface Props {
 
 const option = {
     slidesPerView: 1,
-    mode: 'free',
 }
 const Banner = memo(({ data }: Props) => {
     if (data.length === 1) {

src/components/common/CarouselCommon/CarouselCommon.module.scss

@@ -9,6 +9,7 @@
     width: 64px;
     height: 64px;
 	border-radius: .8rem;
+	backdrop-filter: saturate(180%) blur(10px);
     &:focus {
       outline: none;
     }

src/components/common/CartDrawer/CartDrawer.module.scss

@@ -4,6 +4,6 @@
 .cartDrawer {
     @apply flex flex-col h-full;
     .body {
-        @apply flex flex-col justify-center overflow-y-auto overflow-x-hidden h-full custom-scroll;
+        @apply flex flex-col overflow-y-auto overflow-x-hidden h-full custom-scroll;
     }
 }

src/components/common/DrawerCommon/DrawerCommon.module.scss

@@ -1,21 +1,36 @@
 @import "../../../styles/utilities";
 
 .drawerCommon {
-    @apply fixed flex justify-end transition-all duration-200;
+    @apply fixed flex justify-end transition-all duration-500;
     overflow: hidden;
     top: 0;
     right: 0;
     height: 100vh;
-    width: 90%;
+    width: 100%;
-    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.15);
     z-index: 20000;
+    transform: translateX(110%);
 
+    &.show {
+        .innerWrap {
+            background: rgba(0, 0, 0, 0.2);
+            animation: animateBackground 0.8s;
+        }
+        transform: none;
+    }
+
+    .innerWrap {
+        @apply w-full;
+        background: none;
+    }
     .inner {
         @apply flex flex-col bg-white;
         width: fit-content;
         height: 100vh;
         width: 100%;
-        margin-right: 0;
+        margin-left: auto;
+        box-shadow: -3px 0 10px rgba(0, 0, 0, 0.15);
+        // transform: none;
+
         @screen md {
             max-width: 52rem;
         }
@@ -39,14 +54,21 @@
         overflow-y: auto;
         height: 100%;
     }
-    &.hide {
-        transform: translateX(110%);
-    }
 
     @screen md {
-        width: unset;
         .inner {
             min-width: 48rem;
         }
     }
 }
+
+@keyframes animateBackground {
+    0%,
+    50% {
+        background: none;
+    }
+
+    100% {
+        background: rgba(0, 0, 0, 0.2);
+    }
+}

src/components/common/DrawerCommon/DrawerCommon.tsx

@@ -11,22 +11,32 @@ interface Props {
 }
 
 const DrawerCommon = ({ title, visible, children, onClose }: Props) => {
+const refInner = useRef<HTMLDivElement>(null)
+
+const handleClickOut = (e: any) => {
+  if (e.target.contains(refInner.current)) {
+    onClose()
+  }
+}
+
   return (
     <div className={classNames({
       [s.drawerCommon]: true,
-      [s.hide]: !visible
+      [s.show]: visible
     })}>
-      <div className={s.inner}>
+      <div className={s.innerWrap} onClick={handleClickOut}>
-        <div className={s.top}>
+        <div className={s.inner} ref={refInner}>
-          <h4 className={s.heading}>
+          <div className={s.top}>
-            {title}
+            <h4 className={s.heading}>
-          </h4>
+              {title}
-          <div className={s.iconClose} onClick={onClose}>
+            </h4>
-            <IconClose />
+            <div className={s.iconClose} onClick={onClose}>
+              <IconClose />
+            </div>
+          </div>
+          <div className={s.content}>
+            {children}
           </div>
-        </div>
-        <div className={s.content}>
-          {children}
         </div>
       </div>
     </div>

src/components/common/Header/Header.tsx

@@ -12,10 +12,10 @@ import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuM
 import s from './Header.module.scss'
 interface props {
     toggleFilter: () => void,
-    visibleFilter:boolean
+    visibleFilter: boolean
 }
 
-const Header = memo(({ toggleFilter,visibleFilter }: 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 })
@@ -30,27 +30,23 @@ const Header = memo(({ toggleFilter,visibleFilter }: props) => {
         }
     }
 
-    const headerHeight = useMemo(() => {
-        return headeFullRef.current?.offsetHeight
-    }, [headeFullRef.current])
-
     useEffect(() => {
         const handleScroll = () => {
-            if (!isMobile()) {
+            if (!headeFullRef.current || window.scrollY > headeFullRef.current?.offsetHeight) {
-                if (!headerHeight || window.scrollY > headerHeight) {
+                setIsFullHeader(false)
-                    setIsFullHeader(false)
-                } else {
-                    setIsFullHeader(true)
-                }
             } else {
                 setIsFullHeader(true)
             }
+            // if (!isMobile()) {
+            // } else {
+            //     setIsFullHeader(true)
+            // }
         }
         window.addEventListener('scroll', handleScroll)
         return () => {
             window.removeEventListener('scroll', handleScroll)
         }
-    }, [headerHeight])
+    }, [headeFullRef.current])
 
     return (
         <>
@@ -59,16 +55,18 @@ const Header = memo(({ toggleFilter,visibleFilter }: props) => {
                 [s.show]: !isFullHeader
             })}>
                 <HeaderMenu
+                    isStickyHeader={true}
                     toggleFilter={toggleFilter}
                     toggleCart={toggleCart}
                     openModalAuthen={openModalAuthen}
                     openModalInfo={openModalInfo} />
             </div>
-            
+
             <header ref={headeFullRef} className={classNames({ [s.header]: true, [s.full]: isFullHeader })}>
                 <HeaderHighLight />
                 <div className={s.menu}>
                     <HeaderMenu
+                        isFull={isFullHeader}
                         visibleFilter={visibleFilter}
                         toggleFilter={toggleFilter}
                         toggleCart={toggleCart}

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

@@ -1,25 +1,46 @@
 @import "../../../../../styles/utilities";
 
 .headerMenu {
-    padding-top: 1.6rem;
+    @apply hidden;
+    padding-top: 0.8rem;
     padding-bottom: 0.8rem;
+    &.full {
+        @apply flex;
+    }
+    &.small {
+        @apply flex;
+        .left {
+            .top {
+                display: none;
+                @screen md {
+                    display: flex;
+                }
+            }
+        }
+    }
     @screen md {
         @apply flex justify-between items-center;
         padding-top: 0.8rem;
         padding-bottom: 0.8rem;
     }
     .left {
+        // margin-bottom: 3.2rem;
+        flex: 1;
         .top {
             @apply flex justify-between items-center;
-            .iconGroup{
+            margin-bottom: 2rem;
+            @screen md {
+                margin-bottom: 0;
+            }
+            .iconGroup {
                 @apply flex justify-between items-center;
             }
             .iconCart {
                 margin-left: 1.6rem;
             }
-            .iconFilter{
+            .iconFilter {
                 @apply relative;
-                .dot{
+                .dot {
                     @apply absolute;
                     top: -0.08rem;
                     right: -0.2rem;
@@ -28,7 +49,7 @@
                     height: 1.2rem;
                     border-radius: 1.2rem;
                     @apply hidden;
-                    &.isShow{
+                    &.isShow {
                         @apply block;
                     }
                 }
@@ -36,13 +57,24 @@
                     display: none;
                 }
             }
-            
         }
-        .inputSearch {
+        .searchWrap {
-            margin-top: 2.4rem;
+            @apply flex items-center;
+            .inputSearch {
+                flex: 1;
+            }
+            .buttonSearch {
+                margin-left: 1rem;
+            }
+            @screen md {
+                margin: 0 1.6rem 0 4.8rem;
+            }
             @screen lg {
                 min-width: 51.2rem;
                 max-width: 50%;
+                .buttonSearch {
+                    @apply hidden;
+                }
             }
         }
         @screen md {
@@ -52,10 +84,6 @@
                     @apply hidden;
                 }
             }
-            .inputSearch {
-                margin-left: 4.8rem;
-                margin-top: 0;
-            }
         }
     }
     .btnCart {
@@ -98,7 +126,7 @@
         }
         @screen xl {
             .iconFilterDesk {
-                display:none;
+                display: none;
             }
         }
     }

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

@@ -2,6 +2,7 @@ import classNames from 'classnames'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { memo, useMemo } from 'react'
+import { ButtonCommon } from 'src/components/common'
 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'
@@ -10,8 +11,9 @@ import Logo from '../../../Logo/Logo'
 import s from './HeaderMenu.module.scss'
 interface Props {
     children?: any,
-    isFull: boolean,
+    isFull?: boolean,
-    visibleFilter?:boolean,
+    isStickyHeader?: boolean,
+    visibleFilter?: boolean,
     openModalAuthen: () => void,
     openModalInfo: () => void,
     toggleFilter: () => void,
@@ -20,7 +22,7 @@ interface Props {
 
 const FILTER_PAGE = [ROUTE.HOME, ROUTE.PRODUCTS]
 
-const HeaderMenu = memo(({ visibleFilter,openModalAuthen, openModalInfo, toggleFilter, toggleCart}: Props) => {
+const HeaderMenu = memo(({ isFull, isStickyHeader, visibleFilter, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
     const router = useRouter()
 
 
@@ -35,7 +37,11 @@ const HeaderMenu = memo(({ visibleFilter,openModalAuthen, openModalInfo, toggleF
         },
         {
             link: '/account-not-login',
-            name: 'Account Not Login',
+            name: 'Account Not Login (Demo)',
+        },
+        {
+            link: '/demo',
+            name: 'Notifications Empty (Demo)',
         },
         {
             link: ROUTE.NOTIFICATION,
@@ -52,7 +58,11 @@ const HeaderMenu = memo(({ visibleFilter,openModalAuthen, openModalInfo, toggleF
 
     ], [openModalAuthen])
     return (
-        <section className={s.headerMenu}>
+        <section className={classNames({
+            [s.headerMenu]: true,
+            [s.small]: isStickyHeader,
+            [s.full]: isFull,
+        })}>
             <div className={s.left}>
                 <div className={s.top}>
                     <Logo />
@@ -60,8 +70,8 @@ const HeaderMenu = memo(({ visibleFilter,openModalAuthen, openModalInfo, toggleF
                         {
                             FILTER_PAGE.includes(router.pathname) && (
                                 <button className={s.iconFilter} onClick={toggleFilter}>
-                                    <IconFilter/>
+                                    <IconFilter />
-                                    <div className={classNames({[s.dot]:true,[s.isShow]:visibleFilter})}></div>
+                                    <div className={classNames({ [s.dot]: true, [s.isShow]: visibleFilter })}></div>
                                 </button>
                             )
                         }
@@ -71,8 +81,13 @@ const HeaderMenu = memo(({ visibleFilter,openModalAuthen, openModalInfo, toggleF
                     </div>
 
                 </div>
-                <div className={s.inputSearch}>
+                <div className={s.searchWrap}>
-                    <InputSearch />
+                    <div className={s.inputSearch}>
+                        <InputSearch />
+                    </div>
+                    <div className={s.buttonSearch}>
+                        <ButtonCommon>Search</ButtonCommon>
+                    </div>
                 </div>
             </div>
             <ul className={s.menu}>

src/components/common/Layout/Layout.module.scss

@@ -4,6 +4,9 @@
     min-height: 100vh;
     > main {
         flex: 1;
+        width: 100%;
+        max-width: min( 100%, 1536px);
+        margin: auto;
     }
 }
 .filter{

src/components/modules/home/HomeBanner/HomeBanner.module.scss

@@ -31,15 +31,12 @@
         width: min-content;
 
         color: var(--white);
-        font-size: 7rem;
+        font-size: 8.8rem;
         line-height: 8rem;
         letter-spacing: -0.03em;
         font-weight: bold;
         text-transform: uppercase;
 
-        @screen 2xl {
-          line-height: 8rem;
-        }
         &::after {
           @apply absolute;
           content: "";

src/styles/_base.scss

@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Nunito&family=Poppins:wght@500&family=Righteous&display=swap");
+@import '../../public/fonts/style.css';
 
 :root {
   --primary: #5b9a74;
@@ -41,7 +42,7 @@
   --line-height: 2.4rem;
 
   --font-sans: "Nunito", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
-  --font-heading: "Righteous", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
+  --font-heading: "Norquay-bold", "Righteous", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
   --font-logo: "Poppins", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
 }
 

tailwind.config.js

@@ -122,7 +122,7 @@ module.exports = {
         'xl': '1280px',
         // => @media (min-width: 1280px) { ... }
 
-        '2xl': '1536px',
+        '2xl': '1440px',
         // => @media (min-width: 1536px) { ... }
       },
       caroucel: {