i18n tooltip

apps/app/public/static/locales/en_US/translation.json

@@ -30,7 +30,7 @@
   "Tags": "Tags",
   "Close": "Close",
   "Shortcuts": "Shortcuts",
-  "CustomSidebar": "Custom Sidebar",
+  "Custom Sidebar": "Custom Sidebar",
   "eg": "e.g.",
   "add": "Add",
   "Undo": "Undo",

apps/app/public/static/locales/fr_FR/translation.json

@@ -30,7 +30,7 @@
   "Tags": "Étiquettes",
   "Close": "Fermer",
   "Shortcuts": "Raccourcis",
-  "CustomSidebar": "Navigation latérale",
+  "Custom Sidebar": "Navigation latérale",
   "eg": "e.g.",
   "add": "Ajouter",
   "Undo": "Annuler",

apps/app/public/static/locales/ja_JP/translation.json

@@ -30,7 +30,7 @@
   "Tags": "タグ",
   "Close": "閉じる",
   "Shortcuts": "ショートカット",
-  "CustomSidebar": "カスタムサイドバー",
+  "Custom Sidebar": "カスタムサイドバー",
   "eg": "例:",
   "add": "追加",
   "Undo": "元に戻す",

apps/app/public/static/locales/zh_CN/translation.json

@@ -30,7 +30,7 @@
   "Tags": "标签",
   "Close": "Close",
   "Shortcuts": "快捷方式",
-  "CustomSidebar": "Custom Sidebar",
+  "Custom Sidebar": "Custom Sidebar",
   "eg": "e.g.",
   "add": "添加",
   "Undo": "撤销",

apps/app/src/client/components/Sidebar/Custom/CustomSidebar.tsx

@@ -21,7 +21,7 @@ export const CustomSidebar = (): JSX.Element => {
     <div className="pt-4 pb-3 px-3">
       <div className="grw-sidebar-content-header d-flex">
         <h3 className="fs-6 fw-bold mb-0">
-          {t('CustomSidebar')}
+          {t('Custom Sidebar')}
           { !isLoading && <Link href="/Sidebar#edit" className="h6 ms-2"><span className="material-symbols-outlined">edit</span></Link> }
         </h3>
         { !isLoading && <SidebarHeaderReloadButton onClick={() => mutate()} /> }

apps/app/src/client/components/Sidebar/SidebarNav/PrimaryItem.tsx

@@ -1,11 +1,11 @@
 import { useCallback } from 'react';
 
+import { useTranslation } from 'next-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
 
 import type { SidebarContentsType } from '~/interfaces/ui';
 import { SidebarMode } from '~/interfaces/ui';
-import { useCollapsedContentsOpened, useCurrentSidebarContents } from '~/stores/ui';
-
+import { useCollapsedContentsOpened, useCurrentSidebarContents, useIsMobile } from '~/stores/ui';
 
 const useIndicator = (sidebarMode: SidebarMode, isSelected: boolean): string => {
   const { data: isCollapsedContentsOpened } = useCollapsedContentsOpened();
@@ -36,6 +36,8 @@ export const PrimaryItem = (props: PrimaryItemProps): JSX.Element => {
   const { data: currentContents, mutateAndSave: mutateContents } = useCurrentSidebarContents();
 
   const indicatorClass = useIndicator(sidebarMode, contents === currentContents);
+  const { data: isMobile } = useIsMobile();
+  const { t } = useTranslation();
 
   const selectThisItem = useCallback(() => {
     mutateContents(contents, false);
@@ -81,14 +83,18 @@ export const PrimaryItem = (props: PrimaryItemProps): JSX.Element => {
           <span className="material-symbols-outlined">{iconName}</span>
         </div>
       </button>
-      <UncontrolledTooltip
-        autohide
-        placement="right"
-        target={labelForTestId}
-        fade={false}
-      >
-        {label}
-      </UncontrolledTooltip>
+      {
+        isMobile === false ? (
+          <UncontrolledTooltip
+            autohide
+            placement="right"
+            target={labelForTestId}
+            fade={false}
+          >
+            {t(label)}
+          </UncontrolledTooltip>
+        ) : <></>
+      }
     </>
   );
 };