diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index a99cc43..95cc87a 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -1,6 +1,7 @@
import {
useCallback,
useEffect,
+ useMemo,
} from 'react';
import {
useLocation,
@@ -107,8 +108,8 @@ const TopBar = ({ tuneId }: { tuneId: string | null }) => {
return () => document.removeEventListener('keydown', handleGlobalKeyboard);
});
- const tabs = (
-
+ const tabs = useMemo(() => (
+
{
- );
+ ), [buildTuneUrl, lg, navigate, pathname, rootPathMatch?.pathname, tabMatch?.pathname, tuneRootMatch?.pathname, tuneTuneMatch?.pathnameBase]);
const rightMenuColProps = tuneId ? {
- span: 10,
+ span: 8,
md: 8,
sm: 8,
} : {
@@ -160,6 +161,20 @@ const TopBar = ({ tuneId }: { tuneId: string | null }) => {
sm: 8,
};
+ const downloadButton = useMemo(() => {
+ const list = [];
+
+ if (lg) {
+ list.push('Download');
+ }
+
+ if (sm) {
+ list.push();
+ }
+
+ return list.length ? list : null;
+ }, [lg, sm]);
+
return (
@@ -217,8 +232,7 @@ const TopBar = ({ tuneId }: { tuneId: string | null }) => {
trigger={['click']}
>
}>
- {lg && 'Download'}
- {sm && }
+ {downloadButton}