diff --git a/src/components/Common/index.tsx b/src/components/Common/index.tsx new file mode 100644 index 0000000000..4131266b64 --- /dev/null +++ b/src/components/Common/index.tsx @@ -0,0 +1,31 @@ +import { css } from 'styled-components/macro' + +export const ScrollBarStyles = css<{ $isHorizontalScroll?: boolean }>` + // Firefox scrollbar styling + scrollbar-width: thin; + scrollbar-color: ${({ theme }) => `${theme.backgroundOutline} transparent`}; + height: 100%; + + // safari and chrome scrollbar styling + ::-webkit-scrollbar { + background: transparent; + + // Set height for horizontal scrolls + ${({ $isHorizontalScroll }) => { + return $isHorizontalScroll + ? css` + height: 4px; + overflow-x: scroll; + ` + : css` + width: 4px; + overflow-y: scroll; + ` + }} + } + + ::-webkit-scrollbar-thumb { + background: ${({ theme }) => theme.backgroundOutline}; + border-radius: 8px; + } +` diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx index b746db5994..25defd6383 100644 --- a/src/components/NavBar/index.tsx +++ b/src/components/NavBar/index.tsx @@ -7,7 +7,8 @@ import { useIsNftPage } from 'hooks/useIsNftPage' import { Box } from 'nft/components/Box' import { Row } from 'nft/components/Flex' import { UniIcon } from 'nft/components/icons' -import { ReactNode } from 'react' +import { useIsMobile } from 'nft/hooks' +import { ReactNode, useMemo } from 'react' import { NavLink, NavLinkProps, useLocation } from 'react-router-dom' import { ChainSelector } from './ChainSelector' @@ -71,9 +72,30 @@ const PageTabs = () => { ) } +const useShouldHideNavbar = () => { + const { pathname } = useLocation() + const isMobile = useIsMobile() + + const shouldHideNavbar = useMemo(() => { + const paths = ['/nfts/profile'] + if (!isMobile) return false + + for (const path of paths) { + if (pathname.includes(path)) return true + } + + return false + }, [isMobile, pathname]) + + return shouldHideNavbar +} + const Navbar = () => { + const shouldHideNavbar = useShouldHideNavbar() const isNftPage = useIsNftPage() + if (shouldHideNavbar) return null + return ( <>