Add Dashboard nav item; simplify NavHeader

packages/web/src/components/nav/desktop/LeftNav.tsx

@@ -22,6 +22,7 @@ import {
   MessagesNavItem,
   WalletNavItem,
   RewardsNavItem,
+  DashboardNavItem,
   UploadNavItem,
   DevToolsNavItem,
   PlaylistsNavItem,
@@ -120,6 +121,7 @@ export const LeftNav = (props: OwnProps) => {
               <WalletNavItem />
               <ArtistCoinsNavItem />
               <RewardsNavItem />
+              <DashboardNavItem />
               <UploadNavItem />
               <DevToolsNavItem />
               <Box mv='s'>

packages/web/src/components/nav/desktop/NavHeader.tsx

@@ -9,7 +9,6 @@ import { route } from '@audius/common/utils'
 import {
   Flex,
   IconAudiusLogoHorizontalNew,
-  IconDashboard,
   IconSettings
 } from '@audius/harmony'
 import { Link } from 'react-router'
@@ -19,11 +18,10 @@ import { RestrictionType, useRequiresAccountFn } from 'hooks/useRequiresAccount'
 import { NavHeaderButton } from './NavHeaderButton'
 import { NotificationsButton } from './NotificationsButton'
 
-const { HOME_PAGE, SETTINGS_PAGE, DASHBOARD_PAGE } = route
+const { HOME_PAGE, SETTINGS_PAGE } = route
 
 const messages = {
   homeLink: 'Go to Home',
-  dashboardLabel: 'Go to Dashboard',
   settingsLabel: 'Go to Settings'
 }
 
@@ -72,10 +70,6 @@ const RestrictedLink = ({
 }
 
 export const NavHeader = () => {
-  const { data: trackCount } = useCurrentAccountUser({
-    select: (user) => user?.track_count
-  })
-
   return (
     <Flex
       alignItems='center'
@@ -90,15 +84,6 @@ export const NavHeader = () => {
         <IconAudiusLogoHorizontalNew color='subdued' size='m' width='auto' />
       </Link>
       <Flex justifyContent='center' alignItems='center'>
-        {trackCount ? (
-          <RestrictedLink to={DASHBOARD_PAGE} restriction='account'>
-            <NavHeaderButton
-              icon={IconDashboard}
-              aria-label={messages.dashboardLabel}
-              isActive={location.pathname === DASHBOARD_PAGE}
-            />
-          </RestrictedLink>
-        ) : null}
         <RestrictedLink to={SETTINGS_PAGE} restriction='account'>
           <NavHeaderButton
             icon={IconSettings}

packages/web/src/components/nav/desktop/nav-items/DashboardNavItem.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { useCurrentAccountUser, useHasAccount } from '@audius/common/api'
+import { route } from '@audius/common/utils'
+import { IconDashboard } from '@audius/harmony'
+
+import { LeftNavLink } from '../LeftNavLink'
+
+const { DASHBOARD_PAGE } = route
+
+export const DashboardNavItem = () => {
+  const hasAccount = useHasAccount()
+  const { data: trackCount } = useCurrentAccountUser({
+    select: (user) => user?.track_count
+  })
+
+  return trackCount ? (
+    <LeftNavLink
+      leftIcon={IconDashboard}
+      to={DASHBOARD_PAGE}
+      disabled={!hasAccount}
+      restriction='account'
+    >
+      Dashboard
+    </LeftNavLink>
+  ) : null
+}

packages/web/src/components/nav/desktop/nav-items/index.ts

@@ -5,6 +5,7 @@ export { LibraryNavItem } from './LibraryNavItem'
 export { MessagesNavItem } from './MessagesNavItem'
 export { WalletNavItem } from './WalletNavItem'
 export { RewardsNavItem } from './RewardsNavItem'
+export { DashboardNavItem } from './DashboardNavItem'
 export { UploadNavItem } from './UploadNavItem'
 export { DevToolsNavItem } from './DevToolsNavItem'
 export { PlaylistsNavItem } from './PlaylistsNavItem'