From 2c8d46ce9057235914f170ba7eca624802308274 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Sch=C3=BCth?=
 <49448537+ltueth@users.noreply.github.com>
Date: Mon, 13 Jun 2022 21:11:01 +0200
Subject: [PATCH] Fix navigation between cart and menu on mobile (#709)

* Fix navigation between cart and menu on mobile

On mobile when the Sidebar menu is open and you want to switch to cart, it would toggle the sidebar and close it instead of switching view.

* Adds missing openSidebar to useUI hook

* Sets correct Sidebar view when adding a product

If the last selected view on mobile was the menu, it was shown instead of the cart when adding a product.

Co-authored-by: Bel <curciobelen@gmail.com>
---
 site/components/common/UserNav/UserNav.tsx                | 4 ++--
 site/components/product/ProductSidebar/ProductSidebar.tsx | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/site/components/common/UserNav/UserNav.tsx b/site/components/common/UserNav/UserNav.tsx
index 436839588..a01bd2fc0 100644
--- a/site/components/common/UserNav/UserNav.tsx
+++ b/site/components/common/UserNav/UserNav.tsx
@@ -46,7 +46,7 @@ const UserNav: React.FC<{
               variant="naked"
               onClick={() => {
                 setSidebarView('CART_VIEW')
-                toggleSidebar()
+                openSidebar()
               }}
               aria-label={`Cart items: ${itemsCount}`}
             >
@@ -88,8 +88,8 @@ const UserNav: React.FC<{
             aria-label="Menu"
             variant="naked"
             onClick={() => {
+              setSidebarView('MOBILEMENU_VIEW')
               openSidebar()
-              setSidebarView('MOBILE_MENU_VIEW')
             }}
           >
             <Menu />
diff --git a/site/components/product/ProductSidebar/ProductSidebar.tsx b/site/components/product/ProductSidebar/ProductSidebar.tsx
index 250aa41bc..e549ed698 100644
--- a/site/components/product/ProductSidebar/ProductSidebar.tsx
+++ b/site/components/product/ProductSidebar/ProductSidebar.tsx
@@ -17,7 +17,7 @@ interface ProductSidebarProps {
 
 const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
   const addItem = useAddItem()
-  const { openSidebar } = useUI()
+  const { openSidebar, setSidebarView } = useUI()
   const [loading, setLoading] = useState(false)
   const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>({})
 
@@ -33,6 +33,7 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
         productId: String(product.id),
         variantId: String(variant ? variant.id : product.variants[0]?.id),
       })
+      setSidebarView('CART_VIEW')
       openSidebar()
       setLoading(false)
     } catch (err) {