fix: Improve search experience (#18)

* fix: Improve search experience * Search on icon click * Add margin top to header when items in bag * Use cn
mirumee · Sep 27, 2024 · 7924db7 · 7924db7
1 parent ca27f5b
commit 7924db7
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 9 deletions.
diff --git a/apps/storefront/src/components/header/mobile-search.tsx b/apps/storefront/src/components/header/mobile-search.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Search } from "lucide-react";
-import { useParams, usePathname } from "next/navigation";
+import { usePathname } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 
@@ -14,12 +14,11 @@ export const MobileSearch = () => {
   const t = useTranslations("search");
 
   const pathname = usePathname();
-  const params = useParams();
   const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
     setIsOpen(false);
-  }, [pathname, params]);
+  }, [pathname]);
 
   return (
     <>
@@ -38,7 +37,7 @@ export const MobileSearch = () => {
         aria-label={t("search-label")}
         modal={true}
       >
-        <SheetContent side="top">
+        <SheetContent side="top" closeClassName="right-2 top-2">
           <SearchForm />
         </SheetContent>
       </Sheet>

diff --git a/apps/storefront/src/components/header/mobile-side-menu.tsx b/apps/storefront/src/components/header/mobile-side-menu.tsx
@@ -13,6 +13,7 @@ import { Sheet, SheetContent } from "@nimara/ui/components/sheet";
 
 import { MobileNavigation } from "@/components/mobile-navigation";
 import { paths } from "@/lib/paths";
+import { cn } from "@/lib/utils";
 import { useCurrentRegion } from "@/regions/client";
 
 import { LocaleSwitch } from "../locale-switch";
@@ -57,7 +58,14 @@ export const MobileSideMenu = ({
         <SheetContent side="left" className="w-screen sm:w-1/2">
           <div className="relative flex h-full flex-col justify-between gap-4 overflow-auto">
             <div className="flex h-full flex-col">
-              <div className="flex w-full items-center justify-between gap-4 pb-4 sm:hidden">
+              <div
+                className={cn(
+                  "flex w-full items-center justify-between gap-4 pb-4 sm:hidden",
+                  {
+                    "mt-2": checkoutLinesCount,
+                  },
+                )}
+              >
                 <Logo />
                 <div className="flex justify-end gap-1 align-middle">
                   <MobileSearch />

diff --git a/apps/storefront/src/components/header/search-form.tsx b/apps/storefront/src/components/header/search-form.tsx
@@ -127,6 +127,14 @@ export const SearchForm = () => {
     }
   };
 
+  const handleSearchIconClick = () => {
+    if (isNoOptionHighlighted || isLastOptionHighlighted) {
+      router.push(paths.search.asPath({ query: { q: inputValue } }));
+
+      return;
+    }
+  };
+
   useClickAnyWhere(() =>
     setSearchState((prevState) => ({ ...prevState, showOptions: false })),
   );
@@ -173,7 +181,8 @@ export const SearchForm = () => {
               size="icon"
               type="submit"
               variant="outline"
-              onClick={() => resetSearchState()}
+              className="cursor-pointer"
+              onClick={handleSearchIconClick}
             >
               {isLoading ? (
                 <Spinner size={16} />

diff --git a/packages/ui/src/components/sheet.tsx b/packages/ui/src/components/sheet.tsx
@@ -54,12 +54,14 @@ const sheetVariants = cva(
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+    VariantProps<typeof sheetVariants> {
+  closeClassName?: string;
+}
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
+>(({ side = "right", className, closeClassName, children, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
     <SheetPrimitive.Content
@@ -68,7 +70,12 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      <SheetPrimitive.Close
+        className={cn(
+          "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none",
+          closeClassName,
+        )}
+      >
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>