feat: create component MenuNavigationProductList

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

@@ -0,0 +1,43 @@
+@import "../../../styles/utilities";
+.menuNavigationProductListDesktop{
+    @apply hidden;
+}
+.menuNavigationProductListMobile{
+    @apply hidden;
+    @screen md {
+        @apply hidden;
+    }
+    &.isShow{
+        @apply block;
+    }
+    .menuNavigationProductModal{
+        background: rgba(0, 0, 0, 0.5);
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 10000;
+        .content{
+            @apply spacing-horizontal;
+            margin-top: 3rem;
+            padding-top: 2rem ;
+            padding-bottom: 5rem;
+            background-color: white;
+            overflow: auto;
+            height: 100%;
+            border-radius: 2.4rem 2.4rem 0 0;
+            .head{
+                @apply flex justify-between;
+                h3{
+                    @apply heading-3 font-bold;
+                    color:var(--text-base);
+                }
+            }
+            button{
+                margin-top: 2rem;
+                width: 100%;
+            }
+        }
+    }
+}

src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import {ButtonCommon, MenuFilter, MenuNavigation} from 'src/components/common';
+import s from './MenuNavigationProductList.module.scss';
+import {IconHide} from 'src/components/icons';
+import MenuSort from './MenuSort/MenuSort';
+import {LANGUAGE} from 'src/utils/language.utils';
+import classNames from 'classnames'
+interface Props{
+    categories:{name:string,link:string}[],
+    brands:{name:string,link:string}[],
+    featured:{name:string,link:string}[],
+}
+
+const MenuNavigationProductList = ({categories,brands,featured}:Props)=>{
+    
+    const [dataSort,setDataSort] = useState({});
+    const [isShow,setIsShow] = useState(true);
+    
+    function handleValue(value:Object){
+        setDataSort({...dataSort,...value});
+    }
+    function filter(){
+        console.log(dataSort)
+    }
+
+    function hideMenu(){
+        if(isShow === true){
+            setIsShow(false);
+        }
+    }
+    return(
+        <>
+            <div className={s.menuNavigationProductListDesktop}>
+                <MenuNavigation categories={categories} heading="Categories"/>
+                <MenuNavigation categories={brands} heading="Brands"/>
+                <MenuNavigation categories={featured} heading="Featured"/>
+            </div>
+            <div className={classNames({ [s.menuNavigationProductListMobile] :true,[s.isShow]: isShow})}>
+                <div className={s.menuNavigationProductModal}>
+                    <div className={s.content}>
+                        <div className={s.head}>
+                            <h3>FILTER</h3>
+                            <div onClick={hideMenu}><IconHide/></div>
+                        </div>
+                        <MenuFilter categories={categories} heading="Categories" type="category" onChangeValue={handleValue}/>
+                        <MenuFilter categories={brands} heading="Brand" type="brand" onChangeValue={handleValue}/>
+                        <MenuFilter categories={featured} heading="Featured" type="featured" onChangeValue={handleValue}/>
+                        <MenuSort heading="SORT BY" type="sort" onChangeValue={handleValue}/>
+                        <ButtonCommon size="large" onClick={filter}>{LANGUAGE.BUTTON_LABEL.CONFIRM}</ButtonCommon>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default MenuNavigationProductList

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

@@ -0,0 +1,46 @@
+@import "../../../../styles/utilities";
+.menuSortWrapper{
+  
+    @screen md {
+        @apply hidden;
+    }
+    .menuSortHeading{
+        @apply sub-headline font-bold ;
+        color: var(--text-active);
+        font-feature-settings: 'salt' on;
+        margin: 0.8rem 0;
+    }
+    .menuSortList{
+        box-sizing: border-box;
+        &::after{
+            @apply absolute;
+            top: 110%;
+            content: "";
+            width: 100%;
+            border-bottom: 1px solid var(--border-line);
+        } 
+        li{
+            div{
+             height: 4.8rem;
+             line-height: 4.8rem;
+             padding: 0 1.6rem;
+             margin-right: 0.8rem;
+             border-radius: 0.8rem;
+             &.active {
+                @apply font-bold relative;
+                color:var(--text-active);
+                background-color: var(--primary-lightest);
+                &::after{
+                    @apply absolute;
+                    content:"";
+                    background-image: url('/assets/svg/check.svg');
+                    right: 1.6rem;
+                    top: calc(50% - 24px/2);
+                    width: 2.4rem;
+                    height: 2.4rem;
+                }
+             }
+            }
+        }
+    }
+}

src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx

@@ -0,0 +1,67 @@
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
+import s from './MenuSort.module.scss';
+
+interface Props {
+    children?: any,
+    heading:string,
+    type:string,
+    onChangeValue?: (value: Object) => void
+}
+const SORT = [
+    {
+        name: 'By Name',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=by-name`,
+    },
+    {
+        name: 'Price(High to Low)',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=high-to-low`,
+    },
+    {
+        name: 'Price (Low to High)',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=low-to-high`,
+    },
+    {
+        name: 'On Sale',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=on-sale`,
+    },
+  ];
+
+
+const MenuSort = ({heading,type,onChangeValue}:Props)=> {
+    const [active, setActive] = useState<string>('');
+
+    function handleClick(link:string){
+        setActive(link);
+
+        if(active === link){
+            setActive('');
+        }
+    }
+
+    useEffect(()=>{
+      
+        let href = active?.split("=");
+        const linkValue = href[1];
+
+        onChangeValue && onChangeValue({[type]:linkValue});
+    },[active]) 
+  
+    return (
+        <section className={classNames(s.menuSortWrapper)}>
+            <h2 className={classNames(s.menuSortHeading)}>{heading}</h2>
+            <ul className={s.menuSortList}>
+                {
+                    SORT.map(item => <li key={item.name}>
+                        <div onClick={()=> handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}>
+                            {item.name}
+                        </div>
+                    </li>)
+                }
+            </ul>
+        </section>
+    )
+}
+
+export default MenuSort