@bonlineza/luxity-lib 2.32.1 → 2.32.3

package/LuxityDesktopHeader.js

@@ -112,6 +112,15 @@
       query: "{\n        latest_arrivals: luxity_brands(has_products: true, limit: 1000, page: 1) {data {id name slug}}\n        bags: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: BAGS) {data {id name slug}}\n        shoes: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: SHOES) {data {id name slug}}\n        apparel: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: APPAREL) {data {id name slug}}\n        accessories: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: ACCESSORIES) {data {id name slug}}\n        watches: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: WATCHES) {data {id name slug}}\n        accessories_categories: luxity_accessories_categories_list { id name slug }\n        apparel_styles: luxity_apparel_styles_list { name slug }\n      }  "
     };
   };
+  var searchProducts = function searchProducts(search, limit) {
+    return {
+      query: "\n      query SearchProducts($search: String!, $limit: Int!) {\n        luxity_products_serach_results(search: $search, limit: $limit) {\n          brands {\n            name\n            link\n          }\n          products {\n            name\n            link\n          }\n          luxity_product_ids\n        }\n      }\n    ",
+      variables: {
+        search: search,
+        limit: limit
+      }
+    };
+  };
 
   var Dropdown = function Dropdown(_ref) {
     var title = _ref.title,
@@ -244,6 +253,60 @@
     })) !== null && _categories$filter !== void 0 ? _categories$filter : [];
   };
 
+  var SearchResults = function SearchResults(_ref) {
+    var searchValue = _ref.searchValue,
+        searchLoading = _ref.searchLoading,
+        searchResults = _ref.searchResults,
+        onViewAll = _ref.onViewAll,
+        searchResultsRef = _ref.searchResultsRef,
+        onSearchSubmit = _ref.onSearchSubmit,
+        setSearchValue = _ref.setSearchValue;
+
+    if (searchValue.trim() !== '') {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "z-50 absolute md:top-14 font-body bg-white w-full lg:w-1/2 flex flex-col md:flex-row md:divide-x divide-black lg:mt-1 shadow-md",
+        ref: searchResultsRef
+      }, searchLoading ? /*#__PURE__*/React__default.createElement("div", {
+        className: "w-full py-20 flex items-center justify-center"
+      }, "Searching ...") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, searchResults.brands.length === 0 && searchResults.products.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
+        className: "w-full py-20 flex items-center justify-center"
+      }, "No products found") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+        className: "w-full lg:w-1/3"
+      }, /*#__PURE__*/React__default.createElement("p", {
+        className: "font-bold p-2 px-4"
+      }, "Brands"), searchResults.brands.map(function (brand) {
+        return /*#__PURE__*/React__default.createElement("a", {
+          key: brand.link,
+          href: brand.link,
+          className: ""
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "p-2 px-4 hover:bg-gray-100"
+        }, brand.name));
+      })), /*#__PURE__*/React__default.createElement("div", {
+        className: "w-full lg:w-2/3"
+      }, /*#__PURE__*/React__default.createElement("p", {
+        className: "font-bold p-2 px-4"
+      }, "Products"), searchResults.products.map(function (product) {
+        return /*#__PURE__*/React__default.createElement("a", {
+          key: product.link,
+          href: product.link
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "p-2 px-4 hover:bg-gray-100"
+        }, product.name));
+      }), /*#__PURE__*/React__default.createElement("button", {
+        type: "button",
+        onClick: function onClick() {
+          onViewAll();
+          onSearchSubmit(searchValue);
+          setSearchValue('');
+        },
+        className: "bottom-0 mt-5 py-3 w-full font-body text-center text-white uppercase bg-black hover:bg-gray-950 border border-black transition-all ease-in-out duration-300 cursor-pointer"
+      }, "View all")))));
+    }
+
+    return null;
+  };
+
   var LuxityDesktopHeader = function LuxityDesktopHeader(_ref) {
     var accountIcon = _ref.accountIcon,
         cartIcon = _ref.cartIcon,
@@ -270,7 +333,9 @@
         contactUsLink = _ref.contactUsLink,
         ourStoryLink = _ref.ourStoryLink,
         onLogoClick = _ref.onLogoClick,
-        endpoint = _ref.endpoint;
+        endpoint = _ref.endpoint,
+        onSearchSubmit = _ref.onSearchSubmit,
+        onProductIdsReceived = _ref.onProductIdsReceived;
 
     var _useState = React.useState(''),
         _useState2 = _slicedToArray(_useState, 2),
@@ -301,13 +366,39 @@
         hasError = _useState8[0],
         setHasError = _useState8[1];
 
-    var handleChange = function handleChange(event) {
-      setSearchValue(event.target.value);
-    };
+    var _useState9 = React.useState(true),
+        _useState10 = _slicedToArray(_useState9, 2),
+        searchLoading = _useState10[0],
+        setSearchLoading = _useState10[1];
+
+    var _useState11 = React.useState({
+      brands: [],
+      products: []
+    }),
+        _useState12 = _slicedToArray(_useState11, 2),
+        searchResults = _useState12[0],
+        setSearchResults = _useState12[1];
+
+    var searchResultsRef = React.useRef(null);
+    React.useEffect(function () {
+      var handleClickOutside = function handleClickOutside(event) {
+        if (searchResultsRef.current && !searchResultsRef.current.contains(event.target)) {
+          setSearchValue('');
+        }
+      };
+
+      document.addEventListener('mousedown', handleClickOutside);
+      return function () {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, []);
 
     var handleKeyDown = function handleKeyDown(event) {
       if (event.key === 'Enter') {
-        onSearch(searchValue);
+        onSearchSubmit(searchValue);
+        setSearchValue('');
+      } else if (event.key === 'Escape') {
+        setSearchValue('');
       }
     };
 
@@ -340,6 +431,30 @@
         return setHasError(true);
       });
     }, [endpoint]);
+
+    var handleChange = function handleChange(event) {
+      var value = event.target.value;
+      setSearchValue(value);
+      onSearch(value);
+
+      if (value.trim() !== '') {
+        setSearchLoading(true);
+        axios.post(endpoint, searchProducts(value, 6)).then(function (response) {
+          setSearchResults(response.data.data.luxity_products_serach_results);
+          var ids = response.data.data.luxity_products_serach_results.luxity_product_ids;
+          onProductIdsReceived(ids);
+          setSearchLoading(false);
+        }).catch(function () {
+          setSearchLoading(false);
+        });
+      } else {
+        setSearchResults({
+          brands: [],
+          products: []
+        });
+      }
+    };
+
     return /*#__PURE__*/React__default.createElement("div", {
       className: "navbar"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -370,7 +485,18 @@
       value: searchValue,
       onChange: handleChange,
       onKeyDown: handleKeyDown
-    })), /*#__PURE__*/React__default.createElement("nav", {
+    })), /*#__PURE__*/React__default.createElement(SearchResults, {
+      searchValue: searchValue,
+      searchLoading: searchLoading,
+      searchResults: searchResults,
+      onViewAll: function onViewAll() {
+        onSearchSubmit(searchValue);
+        setSearchValue('');
+      },
+      searchResultsRef: searchResultsRef,
+      onSearchSubmit: onSearchSubmit,
+      setSearchValue: setSearchValue
+    }), /*#__PURE__*/React__default.createElement("nav", {
       className: "navbar__nav-links navbar__nav-links--wrap"
     }, /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"

package/LuxityMobileHeader.js

@@ -210,6 +210,15 @@
       query: "{\n        latest_arrivals: luxity_brands(has_products: true, limit: 1000, page: 1) {data {id name slug}}\n        bags: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: BAGS) {data {id name slug}}\n        shoes: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: SHOES) {data {id name slug}}\n        apparel: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: APPAREL) {data {id name slug}}\n        accessories: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: ACCESSORIES) {data {id name slug}}\n        watches: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: WATCHES) {data {id name slug}}\n        accessories_categories: luxity_accessories_categories_list { id name slug }\n        apparel_styles: luxity_apparel_styles_list { name slug }\n      }  "
     };
   };
+  var searchProducts = function searchProducts(search, limit) {
+    return {
+      query: "\n      query SearchProducts($search: String!, $limit: Int!) {\n        luxity_products_serach_results(search: $search, limit: $limit) {\n          brands {\n            name\n            link\n          }\n          products {\n            name\n            link\n          }\n          luxity_product_ids\n        }\n      }\n    ",
+      variables: {
+        search: search,
+        limit: limit
+      }
+    };
+  };
 
   var removeCategoryByName = function removeCategoryByName(categories, name) {
     var _categories$filter;
@@ -287,6 +296,14 @@
       setDisplayedSubMenu('');
     };
 
+    var onCloseSideNav = function onCloseSideNav(e) {
+      onMenuClick();
+
+      if (e.key === 'Enter') {
+        e.preventDefault();
+      }
+    };
+
     React.useMemo(function () {
       setLoading(true);
       axios.post("".concat(endpoint), getBrands()).then(function (_ref2) {
@@ -311,7 +328,11 @@
     return /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav"
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__overlay ".concat(showSideNav ? 'side-nav__overlay--visible' : 'side-nav__overlay--hidden', " ")
+      role: "button",
+      tabIndex: 0,
+      className: "side-nav__overlay ".concat(showSideNav ? 'side-nav__overlay--visible' : 'side-nav__overlay--hidden', " "),
+      onClick: onCloseSideNav,
+      onKeyDown: onCloseSideNav
     }), /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__content ".concat(subMenuOpen ? 'side-nav__content--hidden' : '', " ").concat(showSideNav ? 'side-nav__content--open' : 'side-nav__content--closed')
     }, /*#__PURE__*/React__default.createElement("button", {
@@ -535,6 +556,60 @@
     })));
   };
 
+  var SearchResults = function SearchResults(_ref) {
+    var searchValue = _ref.searchValue,
+        searchLoading = _ref.searchLoading,
+        searchResults = _ref.searchResults,
+        onViewAll = _ref.onViewAll,
+        searchResultsRef = _ref.searchResultsRef,
+        onSearchSubmit = _ref.onSearchSubmit,
+        setSearchValue = _ref.setSearchValue;
+
+    if (searchValue.trim() !== '') {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "z-50 absolute md:top-14 font-body bg-white w-full lg:w-1/2 flex flex-col md:flex-row md:divide-x divide-black lg:mt-1 shadow-md",
+        ref: searchResultsRef
+      }, searchLoading ? /*#__PURE__*/React__default.createElement("div", {
+        className: "w-full py-20 flex items-center justify-center"
+      }, "Searching ...") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, searchResults.brands.length === 0 && searchResults.products.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
+        className: "w-full py-20 flex items-center justify-center"
+      }, "No products found") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+        className: "w-full lg:w-1/3"
+      }, /*#__PURE__*/React__default.createElement("p", {
+        className: "font-bold p-2 px-4"
+      }, "Brands"), searchResults.brands.map(function (brand) {
+        return /*#__PURE__*/React__default.createElement("a", {
+          key: brand.link,
+          href: brand.link,
+          className: ""
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "p-2 px-4 hover:bg-gray-100"
+        }, brand.name));
+      })), /*#__PURE__*/React__default.createElement("div", {
+        className: "w-full lg:w-2/3"
+      }, /*#__PURE__*/React__default.createElement("p", {
+        className: "font-bold p-2 px-4"
+      }, "Products"), searchResults.products.map(function (product) {
+        return /*#__PURE__*/React__default.createElement("a", {
+          key: product.link,
+          href: product.link
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "p-2 px-4 hover:bg-gray-100"
+        }, product.name));
+      }), /*#__PURE__*/React__default.createElement("button", {
+        type: "button",
+        onClick: function onClick() {
+          onViewAll();
+          onSearchSubmit(searchValue);
+          setSearchValue('');
+        },
+        className: "bottom-0 mt-5 py-3 w-full font-body text-center text-white uppercase bg-black hover:bg-gray-950 border border-black transition-all ease-in-out duration-300 cursor-pointer"
+      }, "View all")))));
+    }
+
+    return null;
+  };
+
   var LuxityMobileHeader = function LuxityMobileHeader(_ref) {
     var logoSrc = _ref.logoSrc,
         menuIcon = _ref.menuIcon,
@@ -555,7 +630,9 @@
         blogLink = _ref.blogLink,
         onSellToUsClick = _ref.onSellToUsClick,
         onLogoClick = _ref.onLogoClick,
-        endpoint = _ref.endpoint;
+        endpoint = _ref.endpoint,
+        onSearchSubmit = _ref.onSearchSubmit,
+        onProductIdsReceived = _ref.onProductIdsReceived;
 
     var _useState = React.useState(''),
         _useState2 = _slicedToArray(_useState, 2),
@@ -572,13 +649,48 @@
         showSideNav = _useState6[0],
         setShowSideNav = _useState6[1];
 
+    var _useState7 = React.useState(true),
+        _useState8 = _slicedToArray(_useState7, 2),
+        searchLoading = _useState8[0],
+        setSearchLoading = _useState8[1];
+
+    var _useState9 = React.useState({
+      brands: [],
+      products: []
+    }),
+        _useState10 = _slicedToArray(_useState9, 2),
+        searchResults = _useState10[0],
+        setSearchResults = _useState10[1];
+
     var handleChange = function handleChange(event) {
-      setSearchValue(event.target.value);
+      var value = event.target.value;
+      setSearchValue(value);
+      onSearch(value);
+
+      if (value.trim() !== '') {
+        setSearchLoading(true);
+        axios.post(endpoint, searchProducts(value, 6)).then(function (response) {
+          setSearchResults(response.data.data.luxity_products_serach_results);
+          var ids = response.data.data.luxity_products_serach_results.luxity_product_ids;
+          onProductIdsReceived(ids);
+          setSearchLoading(false);
+        }).catch(function () {
+          setSearchLoading(false);
+        });
+      } else {
+        setSearchResults({
+          brands: [],
+          products: []
+        });
+      }
     };
 
     var handleKeyDown = function handleKeyDown(event) {
       if (event.key === 'Enter') {
-        onSearch(searchValue);
+        onSearchSubmit(searchValue);
+        setSearchValue('');
+      } else if (event.key === 'Escape') {
+        setSearchValue('');
       }
     };
 
@@ -586,6 +698,7 @@
       setShowSearchbar(function (prev) {
         return !prev;
       });
+      setSearchValue('');
     };
 
     var onMenuClick = function onMenuClick() {
@@ -594,6 +707,16 @@
       });
     };
 
+    var handleSellToUsClick = function handleSellToUsClick() {
+      onSellToUsClick();
+      setShowSideNav(false);
+    };
+
+    var handleCartClick = function handleCartClick() {
+      onCartClick();
+      setShowSideNav(false);
+    };
+
     return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
       className: "navbar navbar__mobile-wrapper"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -654,18 +777,28 @@
       src: closeIcon,
       alt: "close-icon",
       className: "navbar__input-close-icon"
-    })))), /*#__PURE__*/React__default.createElement(LuxitySideNav, {
+    })))), /*#__PURE__*/React__default.createElement(SearchResults, {
+      searchValue: searchValue,
+      searchLoading: searchLoading,
+      searchResults: searchResults,
+      onViewAll: function onViewAll() {
+        onSearchSubmit(searchValue);
+        setSearchValue('');
+      },
+      onSearchSubmit: onSearchSubmit,
+      setSearchValue: setSearchValue
+    }), /*#__PURE__*/React__default.createElement(LuxitySideNav, {
       accordionIcon: accordionIcon,
       logoSrc: logoSrc,
       closeIcon: closeIcon,
       backIcon: backIcon,
       productUrl: productsUrl,
       onAccountClick: onAccountClick,
-      onCartClick: onCartClick,
+      onCartClick: handleCartClick,
       contactUsLink: contactUsLink,
       ourStoryLink: ourStoryLink,
       blogLink: blogLink,
-      onSellToUsClick: onSellToUsClick,
+      onSellToUsClick: handleSellToUsClick,
       stores: stores,
       categoryElements: categoryElements,
       showSideNav: showSideNav,

package/LuxitySideNav.js

@@ -287,6 +287,14 @@
       setDisplayedSubMenu('');
     };
 
+    var onCloseSideNav = function onCloseSideNav(e) {
+      onMenuClick();
+
+      if (e.key === 'Enter') {
+        e.preventDefault();
+      }
+    };
+
     React.useMemo(function () {
       setLoading(true);
       axios.post("".concat(endpoint), getBrands()).then(function (_ref2) {
@@ -311,7 +319,11 @@
     return /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav"
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__overlay ".concat(showSideNav ? 'side-nav__overlay--visible' : 'side-nav__overlay--hidden', " ")
+      role: "button",
+      tabIndex: 0,
+      className: "side-nav__overlay ".concat(showSideNav ? 'side-nav__overlay--visible' : 'side-nav__overlay--hidden', " "),
+      onClick: onCloseSideNav,
+      onKeyDown: onCloseSideNav
     }), /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__content ".concat(subMenuOpen ? 'side-nav__content--hidden' : '', " ").concat(showSideNav ? 'side-nav__content--open' : 'side-nav__content--closed')
     }, /*#__PURE__*/React__default.createElement("button", {

package/build/bundle.css

@@ -1 +1 @@
-.footer__newsletter-section{align-items:center;background-color:#000;color:#fff;display:flex;justify-content:space-between;padding:2.265rem 0}@media only screen and (max-width:879px){.footer__newsletter-section{flex-direction:column}}.footer__newsletter-wrapper{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__newsletter-wrapper{flex-direction:column}.footer__link-container{flex-basis:50%}}.footer__newsletter-icon{height:30px;position:absolute;right:0;top:0;width:32px}.footer__newsletter-form{flex-basis:50%;max-width:250px;position:relative}@media only screen and (max-width:879px){.footer__newsletter-form{display:block;margin-top:20px;max-width:100%;width:100%}}.footer__newsletter-title{font-family:Martel Sans,sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;margin-bottom:1.125rem;text-transform:uppercase}.footer__newsletter-text{font-size:14px}.footer__form-input{background-color:#000;border:none;border-bottom:1px solid #fff;color:#fff;height:30px;outline:none;width:100%}.footer__form-input::-moz-placeholder{color:#fff;font-weight:400}.footer__form-input::placeholder{color:#fff;font-weight:400}.footer__form-errors{color:#fff;margin-top:5px}.footer__main-section{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:50px;margin-top:80px}.footer__link-title{font-family:El Messiri;font-size:16px;font-weight:700;margin-bottom:20px;text-transform:uppercase}@media only screen and (max-width:879px){.footer__link-title{margin-bottom:10px}}.footer__link-child{margin-top:25px}.footer__links{display:flex;flex-direction:column}.footer__link{color:#939393;cursor:pointer;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__link:hover{color:#000;text-decoration:underline}@media only screen and (max-width:879px){.footer__link{margin-bottom:10px}}.footer__link-wrapper{align-items:center;display:flex;gap:5px}.footer__link-icon{height:13px;margin-bottom:18px}.footer__text{color:#939393;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__store-hours{margin-top:35px}.footer__copyrights-section{border-top:1px solid;display:flex;justify-content:space-between;padding-bottom:20px;padding-top:20px}.footer__logo{height:30px;width:135px}.footer__payment-icons{align-items:center;display:flex}.footer__wrapper{margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__wrapper{padding:32px 0 0 24px}}.footer__wrapper--desktop{display:block}@media only screen and (max-width:879px){.footer__wrapper--desktop{display:none}}.footer__wrapper--mobile{display:none}@media only screen and (max-width:879px){.footer__wrapper--mobile{display:block;padding-top:30px}}.footer__copyright{font-size:10px;line-height:22px}.footer__copyright--mobile{display:none}@media only screen and (max-width:879px){.footer__copyright--mobile{display:block;padding:30px 10px 30px 0;text-align:center}}.footer__section-row{display:flex;gap:50%}@media only screen and (max-width:879px){.footer__section-row{gap:unset}}.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}.navbar__link-item--desktop{align-items:center;display:flex;height:35px;margin:auto 0;padding-top:5px}.navbar__mobile-wrapper{align-items:center;display:flex;flex-direction:column;padding-bottom:20px;padding-left:32px;padding-right:32px}.navbar__container{display:flex;margin:0 auto;max-width:1280px;padding-left:12px;padding-right:12px;width:100%}.navbar__body{flex-basis:60%}.navbar__wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.navbar__product-search-wrapper{align-items:center;display:flex;padding:0 20%;width:100%}.navbar__input-close-icon{height:auto;margin-bottom:10px;margin-left:10px;width:20px}.navbar__menu-icon{width:30px}.navbar__product-search{align-items:center;display:flex;max-width:545px;width:100%}.navbar__logo-wrapper{margin-right:18px;width:200px}.navbar__logo{width:200px}@media only screen and (max-width:879px){.navbar__logo{margin-top:5px;width:125px}}.navbar__form-input{align-items:center;background:transparent;border:none;display:flex;font-size:13px;outline:none;padding:8px;width:100%}.navbar__product-search{border:1px solid #dfdede;margin-bottom:10px}.navbar__section{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between;width:100%}.navbar__link{display:inline-block;font-family:Martel Sans;font-size:14px;font-weight:700;margin-right:10px;overflow:hidden;text-transform:uppercase;transition:.3s ease-in-out}.navbar__link:after{background-color:#000;content:"";display:block;height:2px;transition:width .25s ease-out;width:0}.navbar__link:hover:after{width:100%}.navbar__link:hover .navbar__dropdown{animation:fadeInDropdown .3s ease-in-out;display:block}.navbar__dropdown{background-color:#fff;box-shadow:5px 5px 5px #dfdede;display:none;left:0;position:absolute;width:100%;z-index:999}@keyframes fadeInDropdown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.navbar__company-link{font-size:13px;font-weight:400;list-style:none;margin-left:18px;text-decoration:none}.navbar__company-block{align-items:center;background-color:#000;color:#fff;display:flex;font-weight:700;height:33px;justify-content:center;margin-right:0;padding:0 18px;text-transform:uppercase}.navbar__input-search-icon{height:auto;margin-left:1.125rem;margin-right:.375rem;width:15px}.navbar__nav-links{align-items:center;display:flex}.navbar__nav-links--wrap{flex-wrap:wrap}.navbar__icons{align-items:center;display:flex;height:40px;justify-content:flex-end;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__icons{display:block;height:20px;margin-bottom:0}}.navbar__icon{cursor:pointer;height:auto;margin-right:18px;width:20px}@media only screen and (max-width:879px){.navbar__icon{margin-right:0}}.navbar__cart-icon{position:relative}.navbar__cart-count{align-items:center;background-color:#000;border-radius:50%;bottom:50%;color:#fff;display:flex;font-size:13px;height:20px;justify-content:center;left:100%;position:absolute;width:20px}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;justify-content:space-between;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{font-size:14px;font-weight:700;line-height:20px;text-transform:uppercase}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.stores-dropdown{align-items:flex-start;display:flex;font-family:Martel Sans;gap:20px;margin-left:auto;margin-right:auto;max-width:1280px;overflow-x:auto;padding:20px 15px}.stores-dropdown__image{height:200px;-o-object-fit:cover;object-fit:cover;width:100%}.stores-dropdown__store-details{flex-basis:20%}.stores-dropdown__title{font-family:El Messiri}.stores-dropdown__main-title,.stores-dropdown__title{font-size:16px;font-weight:400;letter-spacing:3px;margin-top:20px}.stores-dropdown__main-title{font-weight:700;margin-bottom:10px}.stores-dropdown__open-days{font-size:12px;font-weight:700;line-height:20px}.stores-dropdown__open-hours{font-size:12px;font-weight:400;line-height:20px}.stores-dropdown__queries-title{font-family:El Messiri;font-size:16px;font-weight:400;letter-spacing:3px}.stores-dropdown__contact-details{font-size:16px;font-weight:700}.stores-dropdown__view-more{cursor:pointer;font-size:14px;font-weight:400;margin-top:10px;text-transform:capitalize}.dropdown{display:flex;justify-content:space-between;margin-left:auto;margin-right:auto;max-width:1280px;min-height:500px;overflow-x:auto;padding:20px 0}.dropdown__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center;min-height:300px}.dropdown__column{flex:1;padding-left:12px}.dropdown__column:nth-child(2){flex:2}.dropdown__title{font-family:El Messiri;font-size:16px;font-weight:700;letter-spacing:3px;line-height:1;margin-bottom:20px;text-transform:uppercase}.dropdown__elements{display:flex}.dropdown__elements--column{flex-direction:column}.dropdown__elements--row{flex-flow:row wrap;justify-content:flex-start}.dropdown__element{flex-basis:33.33%;font-family:Martel Sans;font-size:14px;font-weight:400;margin-bottom:10px;text-transform:capitalize}.cover-spinner{align-items:center;background-color:hsla(0,0%,100%,.7);display:flex;height:100%;justify-content:center;min-height:400px;position:relative;top:50%;width:100%;z-index:9999}.cover-spinner:after{animation:spin 1.5s linear infinite;border:4px dotted #000;border-radius:50%;border-top-color:transparent;content:"";display:block;height:40px;position:absolute;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}.navbar__link-item--desktop{align-items:center;display:flex;height:35px;margin:auto 0;padding-top:5px}.navbar__mobile-wrapper{align-items:center;display:flex;flex-direction:column;padding-bottom:20px;padding-left:32px;padding-right:32px}.navbar__container{display:flex;margin:0 auto;max-width:1280px;padding-left:12px;padding-right:12px;width:100%}.navbar__body{flex-basis:60%}.navbar__wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.navbar__product-search-wrapper{align-items:center;display:flex;justify-content:center;padding:0 20%;width:100%}@media only screen and (max-width:879px){.navbar__product-search-wrapper{padding:0}}.navbar__input-close-icon{height:auto;margin-bottom:10px;margin-left:10px;width:20px}@media only screen and (max-width:879px){.navbar__input-close-icon{margin-bottom:0;margin-left:0;width:15px}}.navbar__menu-icon{width:30px}.navbar__product-search{align-items:center;display:flex;max-width:545px;width:100%}.navbar__logo-wrapper{margin-right:18px;width:200px}.navbar__logo{width:200px}@media only screen and (max-width:879px){.navbar__logo{margin-left:10px;margin-top:5px;width:125px}}.navbar__form-input{align-items:center;background:transparent;border:none;display:flex;font-size:13px;outline:none;padding:8px;width:100%}.navbar__product-search{border:1px solid #dfdede;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__product-search{border:none;border-bottom:1px solid #dfdede;margin-bottom:0;margin-right:10px;margin-top:10px}}.navbar__section{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between;width:100%}.navbar__link{display:inline-block;font-family:Martel Sans;font-size:14px;font-weight:700;margin-right:10px;overflow:hidden;text-transform:uppercase;transition:.3s ease-in-out}.navbar__link:after{background-color:#000;content:"";display:block;height:2px;transition:width .25s ease-out;width:0}.navbar__link:hover:after{width:100%}.navbar__link:hover .navbar__dropdown{animation:fadeInDropdown .3s ease-in-out;display:block}.navbar__dropdown{background-color:#fff;box-shadow:5px 5px 5px #dfdede;display:none;left:0;position:absolute;width:100%;z-index:999}@keyframes fadeInDropdown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.navbar__company-link{font-size:13px;font-weight:400;list-style:none;margin-left:18px;text-decoration:none}.navbar__company-block{align-items:center;background-color:#000;color:#fff;display:flex;font-weight:700;height:33px;justify-content:center;margin-right:0;padding:0 18px;text-transform:uppercase}.navbar__input-search-icon{height:auto;margin-left:1.125rem;margin-right:.375rem;width:15px}.navbar__nav-links{align-items:center;display:flex}.navbar__nav-links--wrap{flex-wrap:wrap}.navbar__icons{align-items:center;display:flex;height:40px;justify-content:flex-end;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__icons{display:block;height:20px;margin-bottom:0}}.navbar__icon{cursor:pointer;height:auto;margin-right:18px;width:20px}@media only screen and (max-width:879px){.navbar__icon{margin-right:0}}.navbar__cart-icon{position:relative}.navbar__cart-count{align-items:center;background-color:#000;border-radius:50%;bottom:50%;color:#fff;display:flex;font-size:13px;height:20px;justify-content:center;left:100%;position:absolute;width:20px}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;justify-content:space-between;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{font-size:14px;font-weight:700;line-height:20px;text-transform:uppercase}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.footer__newsletter-section{align-items:center;background-color:#000;color:#fff;display:flex;justify-content:space-between;padding:2.265rem 0}@media only screen and (max-width:879px){.footer__newsletter-section{flex-direction:column}}.footer__newsletter-wrapper{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__newsletter-wrapper{flex-direction:column}.footer__link-container{flex-basis:50%}}.footer__newsletter-icon{height:30px;position:absolute;right:0;top:0;width:32px}.footer__newsletter-form{flex-basis:50%;max-width:250px;position:relative}@media only screen and (max-width:879px){.footer__newsletter-form{display:block;margin-top:20px;max-width:100%;width:100%}}.footer__newsletter-title{font-family:Martel Sans,sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;margin-bottom:1.125rem;text-transform:uppercase}.footer__newsletter-text{font-size:14px}.footer__form-input{background-color:#000;border:none;border-bottom:1px solid #fff;color:#fff;height:30px;outline:none;width:100%}.footer__form-input::-moz-placeholder{color:#fff;font-weight:400}.footer__form-input::placeholder{color:#fff;font-weight:400}.footer__form-errors{color:#fff;margin-top:5px}.footer__main-section{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:50px;margin-top:80px}.footer__link-title{font-family:El Messiri;font-size:16px;font-weight:700;margin-bottom:20px;text-transform:uppercase}@media only screen and (max-width:879px){.footer__link-title{margin-bottom:10px}}.footer__link-child{margin-top:25px}.footer__links{display:flex;flex-direction:column}.footer__link{color:#939393;cursor:pointer;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__link:hover{color:#000;text-decoration:underline}@media only screen and (max-width:879px){.footer__link{margin-bottom:10px}}.footer__link-wrapper{align-items:center;display:flex;gap:5px}.footer__link-icon{height:13px;margin-bottom:18px}.footer__text{color:#939393;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__store-hours{margin-top:35px}.footer__copyrights-section{border-top:1px solid;display:flex;justify-content:space-between;padding-bottom:20px;padding-top:20px}.footer__logo{height:30px;width:135px}.footer__payment-icons{align-items:center;display:flex}.footer__wrapper{margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__wrapper{padding:32px 0 0 24px}}.footer__wrapper--desktop{display:block}@media only screen and (max-width:879px){.footer__wrapper--desktop{display:none}}.footer__wrapper--mobile{display:none}@media only screen and (max-width:879px){.footer__wrapper--mobile{display:block;padding-top:30px}}.footer__copyright{font-size:10px;line-height:22px}.footer__copyright--mobile{display:none}@media only screen and (max-width:879px){.footer__copyright--mobile{display:block;padding:30px 10px 30px 0;text-align:center}}.footer__section-row{display:flex;gap:50%}@media only screen and (max-width:879px){.footer__section-row{gap:unset}}.stores-dropdown{align-items:flex-start;display:flex;font-family:Martel Sans;gap:20px;margin-left:auto;margin-right:auto;max-width:1280px;overflow-x:auto;padding:20px 15px}.stores-dropdown__image{height:200px;-o-object-fit:cover;object-fit:cover;width:100%}.stores-dropdown__store-details{flex-basis:20%}.stores-dropdown__title{font-family:El Messiri}.stores-dropdown__main-title,.stores-dropdown__title{font-size:16px;font-weight:400;letter-spacing:3px;margin-top:20px}.stores-dropdown__main-title{font-weight:700;margin-bottom:10px}.stores-dropdown__open-days{font-size:12px;font-weight:700;line-height:20px}.stores-dropdown__open-hours{font-size:12px;font-weight:400;line-height:20px}.stores-dropdown__queries-title{font-family:El Messiri;font-size:16px;font-weight:400;letter-spacing:3px}.stores-dropdown__contact-details{font-size:16px;font-weight:700}.stores-dropdown__view-more{cursor:pointer;font-size:14px;font-weight:400;margin-top:10px;text-transform:capitalize}.dropdown{display:flex;justify-content:space-between;margin-left:auto;margin-right:auto;max-width:1280px;min-height:500px;overflow-x:auto;padding:20px 0}.dropdown__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center;min-height:300px}.dropdown__column{flex:1;padding-left:12px}.dropdown__column:nth-child(2){flex:2}.dropdown__title{font-family:El Messiri;font-size:16px;font-weight:700;letter-spacing:3px;line-height:1;margin-bottom:20px;text-transform:uppercase}.dropdown__elements{display:flex}.dropdown__elements--column{flex-direction:column}.dropdown__elements--row{flex-flow:row wrap;justify-content:flex-start}.dropdown__element{flex-basis:33.33%;font-family:Martel Sans;font-size:14px;font-weight:400;margin-bottom:10px;text-transform:capitalize}.cover-spinner{align-items:center;background-color:hsla(0,0%,100%,.7);display:flex;height:100%;justify-content:center;min-height:400px;position:relative;top:50%;width:100%;z-index:9999}.cover-spinner:after{animation:spin 1.5s linear infinite;border:4px dotted #000;border-radius:50%;border-top-color:transparent;content:"";display:block;height:40px;position:absolute;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}

package/build/bundle.js

@@ -14405,6 +14405,15 @@
       query: "{\n        latest_arrivals: luxity_brands(has_products: true, limit: 1000, page: 1) {data {id name slug}}\n        bags: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: BAGS) {data {id name slug}}\n        shoes: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: SHOES) {data {id name slug}}\n        apparel: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: APPAREL) {data {id name slug}}\n        accessories: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: ACCESSORIES) {data {id name slug}}\n        watches: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: WATCHES) {data {id name slug}}\n        accessories_categories: luxity_accessories_categories_list { id name slug }\n        apparel_styles: luxity_apparel_styles_list { name slug }\n      }  "
     };
   };
+  var searchProducts = function searchProducts(search, limit) {
+    return {
+      query: "\n      query SearchProducts($search: String!, $limit: Int!) {\n        luxity_products_serach_results(search: $search, limit: $limit) {\n          brands {\n            name\n            link\n          }\n          products {\n            name\n            link\n          }\n          luxity_product_ids\n        }\n      }\n    ",
+      variables: {
+        search: search,
+        limit: limit
+      }
+    };
+  };
 
   var Dropdown$1 = function Dropdown(_ref) {
     var title = _ref.title,
@@ -14537,6 +14546,60 @@
     })) !== null && _categories$filter !== void 0 ? _categories$filter : [];
   };
 
+  var SearchResults = function SearchResults(_ref) {
+    var searchValue = _ref.searchValue,
+        searchLoading = _ref.searchLoading,
+        searchResults = _ref.searchResults,
+        onViewAll = _ref.onViewAll,
+        searchResultsRef = _ref.searchResultsRef,
+        onSearchSubmit = _ref.onSearchSubmit,
+        setSearchValue = _ref.setSearchValue;
+
+    if (searchValue.trim() !== '') {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "z-50 absolute md:top-14 font-body bg-white w-full lg:w-1/2 flex flex-col md:flex-row md:divide-x divide-black lg:mt-1 shadow-md",
+        ref: searchResultsRef
+      }, searchLoading ? /*#__PURE__*/React__default.createElement("div", {
+        className: "w-full py-20 flex items-center justify-center"
+      }, "Searching ...") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, searchResults.brands.length === 0 && searchResults.products.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
+        className: "w-full py-20 flex items-center justify-center"
+      }, "No products found") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+        className: "w-full lg:w-1/3"
+      }, /*#__PURE__*/React__default.createElement("p", {
+        className: "font-bold p-2 px-4"
+      }, "Brands"), searchResults.brands.map(function (brand) {
+        return /*#__PURE__*/React__default.createElement("a", {
+          key: brand.link,
+          href: brand.link,
+          className: ""
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "p-2 px-4 hover:bg-gray-100"
+        }, brand.name));
+      })), /*#__PURE__*/React__default.createElement("div", {
+        className: "w-full lg:w-2/3"
+      }, /*#__PURE__*/React__default.createElement("p", {
+        className: "font-bold p-2 px-4"
+      }, "Products"), searchResults.products.map(function (product) {
+        return /*#__PURE__*/React__default.createElement("a", {
+          key: product.link,
+          href: product.link
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "p-2 px-4 hover:bg-gray-100"
+        }, product.name));
+      }), /*#__PURE__*/React__default.createElement("button", {
+        type: "button",
+        onClick: function onClick() {
+          onViewAll();
+          onSearchSubmit(searchValue);
+          setSearchValue('');
+        },
+        className: "bottom-0 mt-5 py-3 w-full font-body text-center text-white uppercase bg-black hover:bg-gray-950 border border-black transition-all ease-in-out duration-300 cursor-pointer"
+      }, "View all")))));
+    }
+
+    return null;
+  };
+
   var LuxityDesktopHeader = function LuxityDesktopHeader(_ref) {
     var accountIcon = _ref.accountIcon,
         cartIcon = _ref.cartIcon,
@@ -14563,7 +14626,9 @@
         contactUsLink = _ref.contactUsLink,
         ourStoryLink = _ref.ourStoryLink,
         onLogoClick = _ref.onLogoClick,
-        endpoint = _ref.endpoint;
+        endpoint = _ref.endpoint,
+        onSearchSubmit = _ref.onSearchSubmit,
+        onProductIdsReceived = _ref.onProductIdsReceived;
 
     var _useState = React.useState(''),
         _useState2 = _slicedToArray(_useState, 2),
@@ -14594,13 +14659,39 @@
         hasError = _useState8[0],
         setHasError = _useState8[1];
 
-    var handleChange = function handleChange(event) {
-      setSearchValue(event.target.value);
-    };
+    var _useState9 = React.useState(true),
+        _useState10 = _slicedToArray(_useState9, 2),
+        searchLoading = _useState10[0],
+        setSearchLoading = _useState10[1];
+
+    var _useState11 = React.useState({
+      brands: [],
+      products: []
+    }),
+        _useState12 = _slicedToArray(_useState11, 2),
+        searchResults = _useState12[0],
+        setSearchResults = _useState12[1];
+
+    var searchResultsRef = React.useRef(null);
+    React.useEffect(function () {
+      var handleClickOutside = function handleClickOutside(event) {
+        if (searchResultsRef.current && !searchResultsRef.current.contains(event.target)) {
+          setSearchValue('');
+        }
+      };
+
+      document.addEventListener('mousedown', handleClickOutside);
+      return function () {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, []);
 
     var handleKeyDown = function handleKeyDown(event) {
       if (event.key === 'Enter') {
-        onSearch(searchValue);
+        onSearchSubmit(searchValue);
+        setSearchValue('');
+      } else if (event.key === 'Escape') {
+        setSearchValue('');
       }
     };
 
@@ -14633,6 +14724,30 @@
         return setHasError(true);
       });
     }, [endpoint]);
+
+    var handleChange = function handleChange(event) {
+      var value = event.target.value;
+      setSearchValue(value);
+      onSearch(value);
+
+      if (value.trim() !== '') {
+        setSearchLoading(true);
+        axios.post(endpoint, searchProducts(value, 6)).then(function (response) {
+          setSearchResults(response.data.data.luxity_products_serach_results);
+          var ids = response.data.data.luxity_products_serach_results.luxity_product_ids;
+          onProductIdsReceived(ids);
+          setSearchLoading(false);
+        }).catch(function () {
+          setSearchLoading(false);
+        });
+      } else {
+        setSearchResults({
+          brands: [],
+          products: []
+        });
+      }
+    };
+
     return /*#__PURE__*/React__default.createElement("div", {
       className: "navbar"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -14663,7 +14778,18 @@
       value: searchValue,
       onChange: handleChange,
       onKeyDown: handleKeyDown
-    })), /*#__PURE__*/React__default.createElement("nav", {
+    })), /*#__PURE__*/React__default.createElement(SearchResults, {
+      searchValue: searchValue,
+      searchLoading: searchLoading,
+      searchResults: searchResults,
+      onViewAll: function onViewAll() {
+        onSearchSubmit(searchValue);
+        setSearchValue('');
+      },
+      searchResultsRef: searchResultsRef,
+      onSearchSubmit: onSearchSubmit,
+      setSearchValue: setSearchValue
+    }), /*#__PURE__*/React__default.createElement("nav", {
       className: "navbar__nav-links navbar__nav-links--wrap"
     }, /*#__PURE__*/React__default.createElement("li", {
       className: "navbar__link"
@@ -14996,6 +15122,14 @@
       setDisplayedSubMenu('');
     };
 
+    var onCloseSideNav = function onCloseSideNav(e) {
+      onMenuClick();
+
+      if (e.key === 'Enter') {
+        e.preventDefault();
+      }
+    };
+
     React.useMemo(function () {
       setLoading(true);
       axios.post("".concat(endpoint), getBrands()).then(function (_ref2) {
@@ -15020,7 +15154,11 @@
     return /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav"
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__overlay ".concat(showSideNav ? 'side-nav__overlay--visible' : 'side-nav__overlay--hidden', " ")
+      role: "button",
+      tabIndex: 0,
+      className: "side-nav__overlay ".concat(showSideNav ? 'side-nav__overlay--visible' : 'side-nav__overlay--hidden', " "),
+      onClick: onCloseSideNav,
+      onKeyDown: onCloseSideNav
     }), /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__content ".concat(subMenuOpen ? 'side-nav__content--hidden' : '', " ").concat(showSideNav ? 'side-nav__content--open' : 'side-nav__content--closed')
     }, /*#__PURE__*/React__default.createElement("button", {
@@ -15264,7 +15402,9 @@
         blogLink = _ref.blogLink,
         onSellToUsClick = _ref.onSellToUsClick,
         onLogoClick = _ref.onLogoClick,
-        endpoint = _ref.endpoint;
+        endpoint = _ref.endpoint,
+        onSearchSubmit = _ref.onSearchSubmit,
+        onProductIdsReceived = _ref.onProductIdsReceived;
 
     var _useState = React.useState(''),
         _useState2 = _slicedToArray(_useState, 2),
@@ -15281,13 +15421,48 @@
         showSideNav = _useState6[0],
         setShowSideNav = _useState6[1];
 
+    var _useState7 = React.useState(true),
+        _useState8 = _slicedToArray(_useState7, 2),
+        searchLoading = _useState8[0],
+        setSearchLoading = _useState8[1];
+
+    var _useState9 = React.useState({
+      brands: [],
+      products: []
+    }),
+        _useState10 = _slicedToArray(_useState9, 2),
+        searchResults = _useState10[0],
+        setSearchResults = _useState10[1];
+
     var handleChange = function handleChange(event) {
-      setSearchValue(event.target.value);
+      var value = event.target.value;
+      setSearchValue(value);
+      onSearch(value);
+
+      if (value.trim() !== '') {
+        setSearchLoading(true);
+        axios.post(endpoint, searchProducts(value, 6)).then(function (response) {
+          setSearchResults(response.data.data.luxity_products_serach_results);
+          var ids = response.data.data.luxity_products_serach_results.luxity_product_ids;
+          onProductIdsReceived(ids);
+          setSearchLoading(false);
+        }).catch(function () {
+          setSearchLoading(false);
+        });
+      } else {
+        setSearchResults({
+          brands: [],
+          products: []
+        });
+      }
     };
 
     var handleKeyDown = function handleKeyDown(event) {
       if (event.key === 'Enter') {
-        onSearch(searchValue);
+        onSearchSubmit(searchValue);
+        setSearchValue('');
+      } else if (event.key === 'Escape') {
+        setSearchValue('');
       }
     };
 
@@ -15295,6 +15470,7 @@
       setShowSearchbar(function (prev) {
         return !prev;
       });
+      setSearchValue('');
     };
 
     var onMenuClick = function onMenuClick() {
@@ -15303,6 +15479,16 @@
       });
     };
 
+    var handleSellToUsClick = function handleSellToUsClick() {
+      onSellToUsClick();
+      setShowSideNav(false);
+    };
+
+    var handleCartClick = function handleCartClick() {
+      onCartClick();
+      setShowSideNav(false);
+    };
+
     return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
       className: "navbar navbar__mobile-wrapper"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -15363,18 +15549,28 @@
       src: closeIcon,
       alt: "close-icon",
       className: "navbar__input-close-icon"
-    })))), /*#__PURE__*/React__default.createElement(LuxitySideNav, {
+    })))), /*#__PURE__*/React__default.createElement(SearchResults, {
+      searchValue: searchValue,
+      searchLoading: searchLoading,
+      searchResults: searchResults,
+      onViewAll: function onViewAll() {
+        onSearchSubmit(searchValue);
+        setSearchValue('');
+      },
+      onSearchSubmit: onSearchSubmit,
+      setSearchValue: setSearchValue
+    }), /*#__PURE__*/React__default.createElement(LuxitySideNav, {
       accordionIcon: accordionIcon,
       logoSrc: logoSrc,
       closeIcon: closeIcon,
       backIcon: backIcon,
       productUrl: productsUrl,
       onAccountClick: onAccountClick,
-      onCartClick: onCartClick,
+      onCartClick: handleCartClick,
       contactUsLink: contactUsLink,
       ourStoryLink: ourStoryLink,
       blogLink: blogLink,
-      onSellToUsClick: onSellToUsClick,
+      onSellToUsClick: handleSellToUsClick,
       stores: stores,
       categoryElements: categoryElements,
       showSideNav: showSideNav,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonlineza/luxity-lib",
-  "version": "2.32.1",
+  "version": "2.32.3",
   "scripts": {
     "start": "start-storybook -p 9001 -c .storybook -s ./public",
     "clean": "rimraf ./build/*.*",
@@ -125,6 +125,7 @@
     "rollup-plugin-sass": "^1.12.21",
     "style-loader": "^0.23.1",
     "styled-components": "^5.1.1",
+    "tailwindcss": "^3.4.1",
     "typescript": "^3.9.7",
     "webpack": "^4.44.1"
   },

package/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './src/components/**/*.{js,jsx,ts,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};