fix: Can't scroll behind bag (#5299)

* mobile bag scroll behind and snap

* fix laggy animation on profile page when filters are opened

* don't scroll assets behind bag

* refactor duration

* correct placement of isBagExpanded

* simplify conditions

Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/nft/components/profile/view/FilterSidebar.tsx

@@ -9,8 +9,9 @@ import { themeVars } from 'nft/css/sprinkles.css'
 import { useFiltersExpanded, useIsMobile, useWalletCollections } from 'nft/hooks'
 import { WalletCollection } from 'nft/types'
 import { Dispatch, FormEvent, SetStateAction, useCallback, useEffect, useReducer, useState } from 'react'
-import { useSpring } from 'react-spring'
+import { easings, useSpring } from 'react-spring'
 import styled from 'styled-components/macro'
+import { TRANSITION_DURATIONS } from 'theme/styles'
 
 import * as styles from './ProfilePage.css'
 
@@ -22,7 +23,6 @@ const ItemsContainer = styled.div`
 export const FilterSidebar = () => {
   const collectionFilters = useWalletCollections((state) => state.collectionFilters)
   const setCollectionFilters = useWalletCollections((state) => state.setCollectionFilters)
-
   const walletCollections = useWalletCollections((state) => state.walletCollections)
 
   const [isFiltersExpanded, setFiltersExpanded] = useFiltersExpanded()
@@ -30,6 +30,10 @@ export const FilterSidebar = () => {
 
   const { sidebarX } = useSpring({
     sidebarX: isFiltersExpanded ? 0 : -360,
+    config: {
+      duration: TRANSITION_DURATIONS.medium,
+      easing: easings.easeOutSine,
+    },
   })
   return (
     // @ts-ignore

src/nft/components/profile/view/ProfilePage.tsx

@@ -21,7 +21,7 @@ import { WalletCollection } from 'nft/types'
 import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
 import { useQuery } from 'react-query'
-import { useSpring } from 'react-spring'
+import { easings, useSpring } from 'react-spring'
 import styled from 'styled-components/macro'
 import shallow from 'zustand/shallow'
 
@@ -66,6 +66,7 @@ export const ProfilePage = () => {
     shallow
   )
   const sellAssets = useSellAsset((state) => state.sellAssets)
+  const isBagExpanded = useBag((state) => state.bagExpanded)
   const toggleBag = useBag((state) => state.toggleBag)
   const [isFiltersExpanded, setFiltersExpanded] = useFiltersExpanded()
   const isMobile = useIsMobile()
@@ -91,6 +92,10 @@ export const ProfilePage = () => {
 
   const { gridX } = useSpring({
     gridX: isFiltersExpanded ? FILTER_SIDEBAR_WIDTH : -PADDING,
+    config: {
+      duration: 250,
+      easing: easings.easeOutSine,
+    },
   })
 
   return (
@@ -107,6 +112,7 @@ export const ProfilePage = () => {
               <Column width="full">
                 <AnimatedBox
                   flexShrink="0"
+                  position={isMobile && isBagExpanded ? 'fixed' : 'static'}
                   style={{
                     transform: gridX.to(
                       (x) =>

src/nft/pages/collection/index.tsx

@@ -24,6 +24,7 @@ import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { easings, useSpring } from 'react-spring'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
+import { TRANSITION_DURATIONS } from 'theme/styles'
 
 const FILTER_WIDTH = 332
 const BAG_WIDTH = 324
@@ -100,11 +101,11 @@ const Collection = () => {
         ? isBagExpanded
           ? BAG_WIDTH + FILTER_WIDTH
           : FILTER_WIDTH
-        : isBagExpanded
+        : isBagExpanded && !isMobile
         ? BAG_WIDTH
         : 0,
     config: {
-      duration: 250,
+      duration: TRANSITION_DURATIONS.medium,
       easing: easings.easeOutSine,
     },
   })
@@ -188,7 +189,7 @@ const Collection = () => {
 
                 {/* @ts-ignore: https://github.com/microsoft/TypeScript/issues/34933 */}
                 <AnimatedBox
-                  position={isMobile && isFiltersExpanded ? 'fixed' : 'static'}
+                  position={isMobile && (isFiltersExpanded || isBagExpanded) ? 'fixed' : 'static'}
                   style={{
                     transform: gridX.to((x) => `translate(${x as number}px)`),
                     width: gridWidthOffset.to((x) => `calc(100% - ${x as number}px)`),

src/theme/styles.ts

@@ -10,11 +10,17 @@ export const flexRowNoWrap = css`
   flex-flow: row nowrap;
 `
 
+export enum TRANSITION_DURATIONS {
+  slow = 500,
+  medium = 250,
+  fast = 125,
+}
+
 const transitions = {
   duration: {
-    slow: '500ms',
-    medium: '250ms',
-    fast: '125ms',
+    slow: `${TRANSITION_DURATIONS.slow}ms`,
+    medium: `${TRANSITION_DURATIONS.medium}ms`,
+    fast: `${TRANSITION_DURATIONS.fast}ms`,
   },
   timing: {
     ease: 'ease',