feat: add NFTs tab to navbar (#4408)

add NFT tab to navbar
Co-authored-by: Charlie <charlie@uniswap.org>

src/components/NavBar/MobileSidebar.tsx

 import FeatureFlagModal from 'components/FeatureFlagModal/FeatureFlagModal'
 import { PrivacyPolicyModal } from 'components/PrivacyPolicy'
+import { Phase1Variant, usePhase1Flag } from 'featureFlags/flags/phase1'
 import { Box } from 'nft/components/Box'
 import { Portal } from 'nft/components/common/Portal'
 import { Column, Row } from 'nft/components/Flex'
@@ -134,6 +135,7 @@ export const MobileSideBar = () => {
   const togglePrivacyPolicy = useTogglePrivacyPolicy()
   const openFeatureFlagsModal = useToggleModal(ApplicationModal.FEATURE_FLAGS)
   const { pathname } = useLocation()
+  const phase1Flag = usePhase1Flag()
   const isPoolActive =
     pathname.startsWith('/pool') ||
     pathname.startsWith('/add') ||
@@ -162,6 +164,11 @@ export const MobileSideBar = () => {
                 <NavLinkRow href="/tokens" close={toggleOpen} isActive={pathname.startsWith('/tokens')}>
                   Tokens
                 </NavLinkRow>
+                {phase1Flag === Phase1Variant.Enabled && (
+                  <NavLinkRow href="/nfts" close={toggleOpen} isActive={pathname.startsWith('/nfts')}>
+                    NFTs
+                  </NavLinkRow>
+                )}
                 <NavLinkRow href="/pool" id={'pool-nav-link'} isActive={isPoolActive} close={toggleOpen}>
                   Pool
                 </NavLinkRow>

src/components/NavBar/Navbar.tsx

 import Web3Status from 'components/Web3Status'
+import { Phase1Variant, usePhase1Flag } from 'featureFlags/flags/phase1'
 import { useWindowSize } from 'hooks/useWindowSize'
 import { ReactNode } from 'react'
 import { NavLink, NavLinkProps, useLocation } from 'react-router-dom'
@@ -62,6 +63,7 @@ const MobileNavbar = () => {
 const Navbar = () => {
   const { width: windowWidth } = useWindowSize()
   const { pathname } = useLocation()
+  const phase1Flag = usePhase1Flag()
 
   if (windowWidth && windowWidth < breakpoints.desktopXl) {
     return <MobileNavbar />
@@ -88,6 +90,11 @@ const Navbar = () => {
             <MenuItem href="/tokens" isActive={pathname.startsWith('/explore')}>
               Tokens
             </MenuItem>
+            {phase1Flag === Phase1Variant.Enabled && (
+              <MenuItem href="/nfts" isActive={pathname.startsWith('/nfts')}>
+                NFTs
+              </MenuItem>
+            )}
             <MenuItem href="/pool" id={'pool-nav-link'} isActive={isPoolActive}>
               Pool
             </MenuItem>