feat(project): add custom menu label to sidebar (#637)

* feat(project): add custom menu label to sidebar

* refactor(home): add translated title to aria-label

Author: royschut

packages/ui-react/src/containers/ShelfList/ShelfList.tsx

@@ -87,7 +87,7 @@ const ShelfList = ({ rows }: Props) => {
               key={`${index}_${playlist.id}`}
               className={classNames(styles.shelfContainer, { [styles.featured]: isFeatured })}
               data-testid={testId(`shelf-${isFeatured ? 'featured' : type === 'playlist' ? slugify(translatedTitle) : type}`)}
-              aria-label={title || playlist?.title}
+              aria-label={translatedTitle}
             >
               <Fade duration={250} delay={index * 33} open>
                 <ShelfComponent

packages/ui-react/src/containers/SidebarContainer/SidebarContainer.tsx

@@ -49,7 +49,8 @@ const SidebarUserActions = ({
 };
 
 const SidebarContainer = () => {
-  const { t } = useTranslation('common');
+  const { t, i18n } = useTranslation('common');
+  const language = i18n.language;
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -82,9 +83,9 @@ const SidebarContainer = () => {
         <li>
           <MenuButton label={t('home')} to="/" />
         </li>
-        {menu.map(({ contentId, type, label }) => (
+        {menu.map(({ contentId, type, label, custom }) => (
           <li key={contentId}>
-            <MenuButton label={label} to={determinePath({ type, contentId })} />
+            <MenuButton label={custom?.[`label-${language}`] || label} to={determinePath({ type, contentId })} />
           </li>
         ))}
       </ul>