@riosst100/pwa-marketplace 2.0.8 → 2.0.9

package/src/intercept.js

@@ -3,7 +3,6 @@ const moduleOverridePlugin = require('./moduleOverrideWebpackPlugin');
 const { DefinePlugin } = require('webpack');
 const { getAvailableWebsitesConfigData } = require('./Utilities/graphQL');
 const LocalizationPlugin = require('@magento/pwa-buildpack/lib/WebpackTools/plugins/LocalizationPlugin');
-const CopyPlugin = require("copy-webpack-plugin");
 
 module.exports = targets => {
   // Perform the asynchronous operation outside the tap
@@ -14,10 +13,6 @@ module.exports = targets => {
     availableWebsites = await getAvailableWebsitesConfigData();
   })();
 
-  targets.of('@magento/pwa-buildpack').transformUpward.tap(def => {
-    def.staticFromRoot.inline.body.file.template.inline = './static-files/{{ filename }}';
-  });
-
   targets.of('@magento/pwa-buildpack').specialFeatures.tap(features => {
     features[targets.name] = { i18n: true, esModules: true, cssModules: true, graphqlQueries: true };
   });
@@ -28,38 +23,38 @@ module.exports = targets => {
 
   // Tap into webpackCompiler
   targets.of('@magento/pwa-buildpack').webpackCompiler.tap(compiler => {
-    // Check if the LocalizationPlugin is present
-    if (compiler.options.plugins) {
-      const localizationPlugin = compiler.options.plugins.find(
-        plugin => plugin instanceof LocalizationPlugin
-      );
+      // Check if the LocalizationPlugin is present
+      if (compiler.options.plugins) {
+        const localizationPlugin = compiler.options.plugins.find(
+            plugin => plugin instanceof LocalizationPlugin
+        );
 
-      // Check if LocalizationPlugin is found
-      if (localizationPlugin) {
-        // Store the original mergeLocales function
-        const originalMergeLocales = localizationPlugin.mergeLocales;
+        // Check if LocalizationPlugin is found
+        if (localizationPlugin) {
+            // Store the original mergeLocales function
+            const originalMergeLocales = localizationPlugin.mergeLocales;
 
-        // Define your custom hook
-        function myCustomMergeLocalesHook(current, update) {
-          // Modify the mergedLocales data here
-          Object.keys(update).forEach(key => {
-            if (typeof current[key] === 'undefined') {
-              current[key] = [];
-            }
-            if (Array.isArray(current[key]) && Array.isArray(update[key])) {
-              if (update[key].toString().includes("venia-ui")) {
-                delete update[key];
-              }
+            // Define your custom hook
+            function myCustomMergeLocalesHook(current, update) {
+                // Modify the mergedLocales data here
+                Object.keys(update).forEach(key => {
+                  if (typeof current[key] === 'undefined') {
+                      current[key] = [];
+                  }
+                  if (Array.isArray(current[key]) && Array.isArray(update[key])) {
+                    if (update[key].toString().includes("venia-ui")) {
+                      delete update[key];
+                    }
+                  }
+              });
+
+                // Return the modified mergedLocales
+                return originalMergeLocales.call(localizationPlugin, current, update);
             }
-          });
 
-          // Return the modified mergedLocales
-          return originalMergeLocales.call(localizationPlugin, current, update);
+            // Override mergeLocales with your custom hook
+            localizationPlugin.mergeLocales = myCustomMergeLocalesHook;
         }
-
-        // Override mergeLocales with your custom hook
-        localizationPlugin.mergeLocales = myCustomMergeLocalesHook;
-      }
     }
   });
 
@@ -101,55 +96,6 @@ module.exports = targets => {
       path: require.resolve("./components/SellerPage/index.js"),
       authed: false,
     },
-    {
-      exact: true,
-      name: "CollectibleGameSetsPage",
-      pattern: "/games/collectible-game/:urlKey/:productType",
-      path: require.resolve("./components/CollectibleGameSetsPage/index.js"),
-      authed: false,
-    },
-    {
-      exact: true,
-      name: "BrandListPage",
-      pattern: "/brands",
-      path: require.resolve("./components/BrandListPage/index.js"),
-      authed: false,
-    },
-    {
-      exact: true,
-      name: "BrandLandingPage",
-      pattern: "/brand",
-      path: require.resolve("./components/BrandLandingPage/index.js"),
-      authed: false,
-    },
-    {
-      exact: true,
-      name: "MtgSinglesPage",
-      pattern: "/mtg-singles",
-      path: require.resolve("./components/MtgSinglesPage/index.js"),
-      authed: false,
-    },
-    {
-      exact: true,
-      name: "FavoriteSeller",
-      pattern: "/favorite-seller",
-      path: require.resolve("./components/FavoriteSeller/index.js"),
-      authed: true,
-    },
-    {
-      exact: true,
-      name: "Quote List",
-      pattern: "/quotes",
-      path: require.resolve("./components/RFQPage/index.js"),
-      authed: true,
-    },
-    {
-      exact: true,
-      name: "Quote Detail",
-      pattern: "/quotes/:urlKey",
-      path: require.resolve("./components/RFQPage/quoteDetailPage.js"),
-      authed: true,
-    }
   ];
 
   // Apply DefinePlugin using the results of the asynchronous operation
@@ -160,12 +106,6 @@ module.exports = targets => {
     }).apply(compiler);
   });
 
-  targets.of('@magento/pwa-buildpack').webpackCompiler.tap(compiler => {
-    new CopyPlugin({
-      patterns: [{ from: 'node_modules/@riosst100/pwa-marketplace/src/static-files', to: 'static-files' }]
-    }).apply(compiler);
-  });
-
   // Handle the routes directly within the routes tap
   targets.of("@magento/venia-ui").routes.tap(routesArray => {
     routesArray.push(...routes);

package/src/overwrites/venia-ui/lib/components/Adapter/adapter.js

@@ -41,9 +41,6 @@ const Adapter = props => {
     let websiteCodeInUrl = websiteCodes.find((str) => str === match);
 
     const { getWebsiteByUserIp } = useWebsiteByIp(websiteCodeInUrl);
-    // const getWebsiteByUserIp = {
-        // countryCode: 'SG'
-    // }
     
     useEffect(() => {
         if (websiteCodeInUrl) {

package/src/overwrites/venia-ui/lib/components/Header/header.js

@@ -2,9 +2,8 @@ import React, { Fragment, Suspense } from 'react';
 import { shape, string } from 'prop-types';
 import { Link, Route } from 'react-router-dom';
 
-import AccountTrigger from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/accountTrigger';
-import CartTrigger from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/cartTrigger';
-import WishlistTrigger from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/wishlistTrigger';
+import AccountTrigger from '@magento/venia-ui/lib/components/Header/accountTrigger';
+import CartTrigger from '@magento/venia-ui/lib/components/Header/cartTrigger';
 import NavTrigger from '@magento/venia-ui/lib/components/Header/navTrigger';
 import SearchTrigger from '@magento/venia-ui/lib/components/Header/searchTrigger';
 import OnlineIndicator from '@magento/venia-ui/lib/components/Header/onlineIndicator';
@@ -15,8 +14,7 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from '@magento/venia-ui/lib/components/Header/header.module.css';
 import StoreSwitcher from '@magento/venia-ui/lib/components/Header/storeSwitcher';
 import WebsiteSwitcher from '@riosst100/pwa-marketplace/src/components/WebsiteSwitcher/websiteSwitcher';
-// import CurrencySwitcher from '@magento/venia-ui/lib/components/Header/currencySwitcher';
-import CurrencySwitcher from '@riosst100/pwa-marketplace/src/components/CurrencySwitcher';
+import CurrencySwitcher from '@magento/venia-ui/lib/components/Header/currencySwitcher';
 import BecomeSellerLink from '@riosst100/pwa-marketplace/src/components/BecomeSellerLink/becomeSellerLink';
 import MegaMenu from '@magento/venia-ui/lib/components/MegaMenu';
 import PageLoadingIndicator from '@magento/venia-ui/lib/components/PageLoadingIndicator';
@@ -25,9 +23,6 @@ import cn from 'classnames';
 // const SearchBar = React.lazy(() => import('@magento/venia-ui/lib/components/SearchBar'));
 const SearchBar = React.lazy(() => import('@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/SearchBar'));
 
-import { useLogo } from '@riosst100/pwa-marketplace/src/talons/Header/useLogo';
-import Image from '@magento/venia-ui/lib/components/Image';
-
 const Header = props => {
     const {
         handleSearchTriggerClick,
@@ -38,15 +33,6 @@ const Header = props => {
         searchTriggerRef
     } = useHeader();
 
-    const talonPropsLogo = useLogo();
-    const { data } = talonPropsLogo
-    const baseUrl = data?.storeConfig?.base_media_url;
-    const imageSource = data?.storeConfig?.header_logo_src;
-    const LogoImageSource = `${baseUrl}/logo/${imageSource}`;
-    const IMAGE_HEIGHT = data?.storeConfig?.logo_width || 28;
-    const IMAGE_WIDTH = data?.storeConfig?.logo_height || 190;
-    const IMAGE_ALT = data?.storeConfig?.logo_alt || 'TCG Collective';
-
     const classes = useStyle(defaultClasses, props.classes);
     const rootClass = isSearchOpen ? classes.open : classes.closed;
 
@@ -74,8 +60,8 @@ const Header = props => {
     return (
         <Fragment>
             <PageLoadingIndicator absolute />
-            <div className={cn(classes.switchersContainer, '!bg-white border-b border-gray-100')}>
-                <div className={cn(classes.switchers, 'flex flex-row gap-x-[25px] !py-2')} data-cy="Header-switchers">
+            <div className={classes.switchersContainer}>
+                <div className={classes.switchers} data-cy="Header-switchers">
                     <BecomeSellerLink />
                     <WebsiteSwitcher />
                     <StoreSwitcher />
@@ -84,70 +70,46 @@ const Header = props => {
             </div>
             <header className={cn(rootClass, '!flex flex-col !px-0 border-gray-100 ')} data-cy="Header-root">
                 <div className={cn('middle-header border-b border-gray-100')}>
-                    <div className={cn('w-full max-w-[1210px] px-[15px] py-[10px] mx-[auto] flex justify-between items-center')}>
+                    <div className={cn('w-full max-w-[1210px] px-[15px] py-[20px] mx-[auto] flex justify-between items-center')}>
                         <div className='flex'>
                             <NavTrigger />
-
                             <Link
                                 aria-label={title}
                                 to={resourceUrl('/')}
                                 className={''}
                                 data-cy="Header-logoContainer"
                             >
-                                {imageSource ? (
-                                    <Image
-                                        alt={IMAGE_ALT}
-                                        height={IMAGE_HEIGHT}
-                                        src={LogoImageSource}
-                                        width={IMAGE_WIDTH}
-                                        classes={{
-                                            container: 'logo-wrapper relative'
-                                        }}
-                                    />
-                                ) : (
-                                    <>
-                                        <div className='text-[14px]'><b>TCG Collective</b></div>
-                                        <small>Bringing Collectors Together</small>
-                                    </>
-                                )}
-
+                                <div><b>TCG Collective</b></div>
+                                <small>Toys | Card | Games</small>
                             </Link>
                         </div>
-                        <div className='flex flex-auto max-w-[700px]'>
+                        <div className='flex'>
                             <Suspense fallback={searchBarFallback}>
                                 <Route>
                                     <SearchBar isOpen={true} ref={searchRef} />
                                 </Route>
                             </Suspense>
                         </div>
-                        <div className={cn(classes.secondaryActions, 'lg_gap-x-5 pl-5 border-l-[1px] border-gray-100')}>
+                        <div className={classes.secondaryActions}>
                             {/* <SearchTrigger
                                 onClick={handleSearchTriggerClick}
                                 ref={searchTriggerRef}
                             /> */}
-                            <WishlistTrigger />
-                            <CartTrigger />
                             <AccountTrigger />
+                            <CartTrigger />
                         </div>
                     </div>
                 </div>
                 <MegaMenu
                     rootClassName={cn('nav-menu w-full max-w-[1210px] px-[15px] mx-[auto] flex-row gap-x-[40px]')}
-                    megaMenuItemClassname={cn('px-0 py-[10px] leading-[20px]')}
-                    titleClassName={cn('font-normal leading-[20px]')}
+                    megaMenuItemClassname={cn('px-0 py-[15px] leading-[20px]')}
+                    titleClassName={cn('font-medium leading-[20px]')}
                 />
             </header>
             <OnlineIndicator
                 hasBeenOffline={hasBeenOffline}
                 isOnline={isOnline}
             />
-            <style jsx>
-                {`
-                    .logo-wrapper>img:first-child {
-                        height: ${IMAGE_HEIGHT}px;
-                    }
-                `}
-            </style>
         </Fragment>
     );
 };

package/src/overwrites/venia-ui/lib/components/Header/storeSwitcher.js

@@ -5,12 +5,9 @@ import { useStoreSwitcher } from '@magento/peregrine/lib/talons/Header/useStoreS
 import { availableRoutes } from '@magento/venia-ui/lib/components/Routes/routes';
 
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/storeSwitcher.module.css';
+import defaultClasses from '@magento/venia-ui/lib/components/Header/storeSwitcher.module.css';
 import SwitcherItem from '@magento/venia-ui/lib/components/Header/switcherItem';
 import Shimmer from '@magento/venia-ui/lib/components/Header/storeSwitcher.shimmer';
-import cn from 'classnames';
-import { ArrowUp2 } from 'iconsax-react';
-import { darkBlue } from '@riosst100/pwa-marketplace/src/theme/vars';
 
 const StoreSwitcher = props => {
     const {
@@ -32,13 +29,11 @@ const StoreSwitcher = props => {
 
     const groups = [];
 
-    const hasOnlyOneStore = availableStores.size === 1;
-
     storeGroups.forEach((group, key) => {
         const stores = [];
         group.forEach(({ storeName, isCurrent, storeCode, websiteCode }) => {
             let label = `${storeName}`;
-
+            
             stores.push(
                 <li
                     aria-selected={currentStoreName}
@@ -62,7 +57,7 @@ const StoreSwitcher = props => {
         groups.push(
             <ul
                 role="listbox"
-                className={cn(classes.groupList, 'text-base')}
+                className={classes.groupList}
                 key={key}
                 data-cy="StoreSwitcher-group"
             >
@@ -72,33 +67,24 @@ const StoreSwitcher = props => {
     });
 
     return (
-        <div className={cn(classes.root, 'leading-[16px]')} data-cy="StoreSwitcher-root">
+        <div className={classes.root} data-cy="StoreSwitcher-root">
             <button
                 data-cy="StoreSwitcher-triggerButton"
-                className={cn(classes.trigger, 'text-base')}
+                className={classes.trigger}
                 aria-label={currentStoreName || ''}
                 onClick={handleTriggerClick}
                 ref={storeMenuTriggerRef}
+                data-cy="StoreSwitcher-trigger"
                 aria-expanded={storeMenuIsOpen}
             >
-                <span className='flex flex-row gap-[5px] items-center leading-[16px]'>
-                    {currentStoreName || ''}
-                    {!hasOnlyOneStore ? (
-                        <ArrowUp2 size="12" color={darkBlue} className={cn(storeMenuIsOpen ? 'rotate-0 ' : 'rotate-180', 'transition-all stroke-current')} variant="Outline" />
-                    ) : null}
-                </span>
+                {currentStoreName || ''}
             </button>
             <div
                 ref={storeMenuRef}
                 className={menuClassName}
                 data-cy="StoreSwitcher-menu"
             >
-                <div className={classes.groups}>
-                    <span className='flex font-medium px-4 py-1 w-full text-base'>
-                        Language
-                    </span>
-                    {groups}
-                </div>
+                <div className={classes.groups}>{groups}</div>
             </div>
         </div>
     );

package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.js

@@ -2,7 +2,6 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
 import { useMegaMenu } from '@magento/peregrine/lib/talons/MegaMenu/useMegaMenu';
-// import { useMegaMenu } from '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/MegaMenu/useMegaMenu';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 
 import MegaMenuItem from './megaMenuItem';
@@ -52,7 +51,7 @@ const MegaMenu = (props) => {
         return () => {
             window.removeEventListener('resize', handleResize);
         };
-    }, [setMainNavWidth]);
+    });
 
     const items = megaMenuData.children
         ? megaMenuData.children.map(category => {

package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenuItem.js

@@ -61,21 +61,16 @@ const MegaMenuItem = props => {
         ? classes.megaMenuItem_active
         : classes.megaMenuItem;
 
-    const arrow = <ArrowDown2 className='ml-2 stroke-current' size="14" color={textPrimary} variant="Outline" />;
-
     const children = useMemo(() => {
-        return category.children.length || category.name == "Lego" ? (
+        return category.children.length ? (
             <Submenu
                 isFocused={isFocused}
                 subMenuState={subMenuState}
                 items={category.children}
-                parentCategory={category}
-                shopByItems={category.shop_by}
                 mainNavWidth={mainNavWidth}
                 handleCloseSubMenu={handleCloseSubMenu}
                 categoryUrlSuffix={categoryUrlSuffix}
                 onNavigate={onNavigate}
-                arrow={arrow}
             />
         ) : null;
     }, [
@@ -87,9 +82,9 @@ const MegaMenuItem = props => {
         categoryUrlSuffix,
         onNavigate
     ]);
-    
+
     const maybeDownArrowIcon = category.children.length ? (
-        <ArrowDown2 className='ml-2' size={12} color={textPrimary} variant="Outline" />
+        <ArrowDown2 className='ml-2' size="16" color={textPrimary} variant="Outline" />
     ) : null;
 
     const linkAttributes = category.children.length
@@ -125,15 +120,14 @@ const MegaMenuItem = props => {
                 onKeyDown={handleKeyDown}
                 className={cn(
                     isActive ? classes.megaMenuLinkActive : classes.megaMenuLink,
-                    titleClassName,
-                    'flex items-center'
+                    titleClassName
                 )}
                 data-cy="MegaMenu-MegaMenuItem-link"
                 to={categoryUrl}
                 onClick={onNavigate}
             >
                 {category.name}
-                {/* {maybeDownArrowIcon} */}
+                {maybeDownArrowIcon}
             </Link>
             {children}
         </div>

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.js

@@ -6,9 +6,6 @@ import { useSubMenu } from '@magento/peregrine/lib/talons/MegaMenu/useSubMenu';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from './submenu.module.css';
 import SubmenuColumn from './submenuColumn';
-import ShopByColumn from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/shopByColumn';
-import CustomSubmenuColumn from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/customSubmenuColumn';
-import cn from 'classnames';
 
 /**
  * The Submenu component displays submenu in mega menu
@@ -20,15 +17,12 @@ import cn from 'classnames';
 const Submenu = props => {
     const {
         items,
-        shopByItems,
         mainNavWidth,
         isFocused,
         subMenuState,
         handleCloseSubMenu,
         categoryUrlSuffix,
-        parentCategory,
-        onNavigate,
-        arrow
+        onNavigate
     } = props;
     const PADDING_OFFSET = 20;
     const classes = useStyle(defaultClasses, props.classes);
@@ -45,29 +39,6 @@ const Submenu = props => {
         ? classes.submenu_active
         : classes.submenu_inactive;
 
-    // const subMenus = items.map((category, index) => {
-    //     const keyboardProps =
-    //         index === items.length - 1 ? talonProps.keyboardProps : {};
-    //     return (
-    //         <SubmenuColumn
-    //             index={index}
-    //             keyboardProps={keyboardProps}
-    //             key={category.uid}
-    //             category={category}
-    //             categoryUrlSuffix={categoryUrlSuffix}
-    //             onNavigate={onNavigate}
-    //             arrow={arrow}
-    //             handleCloseSubMenu={handleCloseSubMenu}
-    //         />
-    //     );
-    // });
-    // const subMenus = <CustomSubmenuColumn
-    //     categoryUrlSuffix={categoryUrlSuffix}
-    //     onNavigate={onNavigate}
-    //     arrow={arrow}
-    //     handleCloseSubMenu={handleCloseSubMenu}
-    //     customMenuItems={items}
-    // />;
     const subMenus = items.map((category, index) => {
         const keyboardProps =
             index === items.length - 1 ? talonProps.keyboardProps : {};
@@ -79,45 +50,6 @@ const Submenu = props => {
                 category={category}
                 categoryUrlSuffix={categoryUrlSuffix}
                 onNavigate={onNavigate}
-                arrow={arrow}
-                handleCloseSubMenu={handleCloseSubMenu}
-            />
-        );
-    });
-
-    // const shopByItems2 = [
-    //     {
-    //         name: 'Shop By Franchise',
-    //         items: [
-    //             {
-    //                 name: 'Hasbro',
-    //                 url: '/'
-    //             }
-    //         ]
-    //     },
-    //     {
-    //         name: 'Shop By Franchise',
-    //         items: [
-    //             {
-    //                 name: 'Hasbro',
-    //                 url: '/'
-    //             }
-    //         ]
-    //     }
-    // ];
-
-    const shopBy = shopByItems.map((shopBy, index) => {
-        const keyboardProps =
-            index === shopByItems.length - 1 ? talonProps.keyboardProps : {};
-        return (
-            <ShopByColumn
-                index={index}
-                keyboardProps={keyboardProps}
-                key={shopBy.code}
-                category={parentCategory}
-                shopBy={shopBy}
-                categoryUrlSuffix={categoryUrlSuffix}
-                onNavigate={onNavigate}
                 handleCloseSubMenu={handleCloseSubMenu}
             />
         );
@@ -126,23 +58,32 @@ const Submenu = props => {
     return (
         <div className={subMenuClassname}>
             <div
-                className={cn(
-                    classes.submenuContainer,
-                    // 'grid grid-cols-4'
-                )}
+                className={classes.submenuItems}
+                style={{ minWidth: mainNavWidth + PADDING_OFFSET }}
             >
-                <div
-                    className={cn(
-                        classes.submenuItems,
-                        'grid grid-cols-6',
-                    )}
-                >
-                    {subMenus}
-                    {shopBy}
-                </div>
+                {subMenus}
             </div>
         </div>
     );
 };
 
 export default Submenu;
+
+Submenu.propTypes = {
+    items: PropTypes.arrayOf(
+        PropTypes.shape({
+            children: PropTypes.array.isRequired,
+            uid: PropTypes.string.isRequired,
+            include_in_menu: PropTypes.number.isRequired,
+            isActive: PropTypes.bool.isRequired,
+            name: PropTypes.string.isRequired,
+            path: PropTypes.array.isRequired,
+            position: PropTypes.number.isRequired,
+            url_path: PropTypes.string.isRequired
+        })
+    ).isRequired,
+    mainNavWidth: PropTypes.number.isRequired,
+    categoryUrlSuffix: PropTypes.string,
+    onNavigate: PropTypes.func.isRequired,
+    handleCloseSubMenu: PropTypes.func.isRequired
+};

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.module.css

@@ -1,23 +1,16 @@
 .submenu {
     composes: absolute from global;
     composes: bg-white from global;
+    composes: flex-wrap from global;
+    composes: justify-between from global;
     composes: left-0 from global;
     composes: px-3 from global;
-    composes: py-1 from global;
+    composes: py-5 from global;
     composes: right-0 from global;
-    top: 102px;
+    top: 139px;
     box-shadow: 0 3px rgb(var(--venia-global-color-gray-100));
 }
 
-.submenuContainer {
-    composes: w-full from global;
-    composes: max-w-[1210px] from global;
-    composes: mx-[auto] from global;
-    composes: gap-[15px] from global;
-    composes: max-h-[50vh] from global;
-    composes: overflow-y-auto from global;
-}
-
 /* TODO @TW: cannot compose */
 .submenu::before {
     box-shadow: inset 0 2px rgb(var(--venia-global-color-gray-100));
@@ -37,13 +30,14 @@
 
 .submenu_active {
     composes: submenu;
+    composes: flex from global;
 }
 
 .submenuItems {
-    composes: grid from global;
-    composes: grid-cols-6 pb-2 from global;
-    /* composes: justify-between from global; */
-    /* composes: ml-auto from global; */
-    /* composes: mr-auto from global; */
-    /* composes: flex-col from global; */
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: justify-between from global;
+    composes: max-w-site from global;
+    composes: ml-auto from global;
+    composes: mr-auto from global;
 }