feat: add custom buttons to the navigation bar

conversionxl · Mar 5, 2024 · 30e8bdc · 30e8bdc
1 parent 6a291a7
commit 30e8bdc
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 1 deletion.
diff --git a/packages/ui-react/src/components/Header/Header.tsx b/packages/ui-react/src/components/Header/Header.tsx
@@ -58,6 +58,15 @@ type Props = {
     selectProfile: ({ avatarUrl, id }: { avatarUrl: string; id: string }) => void;
     isSelectingProfile: boolean;
   };
+
+  rightSideItems?: CustomMenuItem[];
+};
+
+type CustomMenuItem = {
+  label: string;
+  url: string;
+  position?: 'before' | 'right' | 'after';
+  key: string;
 };
 
 const Header: React.FC<Props> = ({
@@ -87,6 +96,7 @@ const Header: React.FC<Props> = ({
   onLanguageClick,
   favoritesEnabled,
   profilesData: { currentProfile, profiles, profilesEnabled, selectProfile, isSelectingProfile } = {},
+  rightSideItems,
 }) => {
   const { t } = useTranslation('menu');
   const [logoLoaded, setLogoLoaded] = useState(false);
@@ -211,6 +221,11 @@ const Header: React.FC<Props> = ({
           </div>
         )}
         <nav className={styles.nav}>{logoLoaded || !logoSrc ? children : null}</nav>
+        <div className={styles.customActions}>
+          {rightSideItems?.map((item) => (
+            <Button key={item.key} label={item.label} to={item.url} variant="text" />
+          ))}
+        </div>
         <div className={styles.actions}>
           {renderSearch()}
           {renderLanguageDropdown()}

diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -39,7 +39,24 @@ const Layout = () => {
   );
   const isLoggedIn = !!useAccountStore(({ user }) => user);
   const favoritesEnabled = !!config.features?.favoritesList;
-  const { menu, assets, siteName, description, features, styling } = config;
+  const { menu, assets, siteName, description, features, styling, custom } = config;
+
+  const customItems = useMemo(() => {
+    if (!custom) return [];
+
+    return Object.keys(custom)
+      .filter((key) => key.startsWith('navItem'))
+      .map((key) => {
+        const item = JSON.parse(custom[key] as string);
+        item.key = Math.random().toString();
+        return item;
+      });
+  }, [custom]);
+
+  const beforeItems = customItems.filter((item) => item.position === 'before');
+  const rightItems = customItems.filter((item) => item.position === 'right');
+  const afterItems = customItems.filter((item) => !['before', 'right'].includes(item.position));
+
   const metaDescription = description || t('default_description');
   const { footerText: configFooterText } = styling || {};
   const footerText = configFooterText || unicodeToChar(env.APP_FOOTER_TEXT);
@@ -190,11 +207,18 @@ const Layout = () => {
             selectProfile: ({ avatarUrl, id }) => selectProfile.mutate({ id, avatarUrl }),
             isSelectingProfile: selectProfile.isLoading,
           }}
+          rightSideItems={rightItems}
         >
           <Button activeClassname={styles.headerButton} label={t('home')} to="/" variant="text" />
+          {beforeItems.map((item) => (
+            <Button key={item.key} label={item.label} to={item.url} variant="text" />
+          ))}
           {menu.map((item) => (
             <Button activeClassname={styles.headerButton} key={item.contentId} label={item.label} to={playlistURL(item.contentId)} variant="text" />
           ))}
+          {afterItems.map((item) => (
+            <Button key={item.key} label={item.label} to={item.url} variant="text" />
+          ))}
         </Header>
         <main id="content" className={styles.main} tabIndex={-1}>
           <Outlet />
@@ -211,10 +235,19 @@ const Layout = () => {
       </div>
       <Sidebar isOpen={sideBarOpen} onClose={() => setSideBarOpen(false)}>
         <MenuButton label={t('home')} to="/" tabIndex={sideBarOpen ? 0 : -1} />
+        {beforeItems.map((item) => (
+          <MenuButton key={item.key} label={item.label} to={item.url} tabIndex={sideBarOpen ? 0 : -1} />
+        ))}
         {menu.map((item) => (
           <MenuButton key={item.contentId} label={item.label} to={playlistURL(item.contentId)} tabIndex={sideBarOpen ? 0 : -1} />
         ))}
+        {afterItems.map((item) => (
+          <Button key={item.key} label={item.label} to={item.url} variant="text" />
+        ))}
         <hr className={styles.divider} />
+        {rightItems.map((item) => (
+          <MenuButton key={item.key} label={item.label} to={item.url} tabIndex={sideBarOpen ? 0 : -1} />
+        ))}
         {renderUserActions(sideBarOpen)}
       </Sidebar>
     </div>