Fix: Capitalize YouTube correctly in sidebar (#2445)

components/SideNavbar/SideNavbarCategory.tsx

@@ -1,56 +1,65 @@
-import { FC, useState, useEffect, MutableRefObject } from 'react'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
+import { FC, useState, useEffect, MutableRefObject } from 'react';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
 
-import { SideNavbarElement } from './SideNavbarElement'
+import { SideNavbarElement } from './SideNavbarElement';
 
-import useOnClickOutside from 'hooks/useOnClickOutside'
-import type { ISidebar } from '../../types'
+import useOnClickOutside from 'hooks/useOnClickOutside';
+import type { ISidebar } from '../../types';
 
-import { Icons } from 'components/icons'
+import { Icons } from 'components/icons';
 
 const categoriesToUppercase = ['ai'];
+const exceptions: Record<string, string> = {
+  youtube: 'YouTube',
+};
+
+const capitalizeCategory = (category: string) => {
+  const lowerCaseCategory = category.toLowerCase();
+
+  if (exceptions[lowerCaseCategory]) {
+    return exceptions[lowerCaseCategory];
+  }
 
-const capitalizeCategory =(category: string) =>{
   return category
     .split('-')
-    .map(word => categoriesToUppercase.includes(word.toLowerCase())
-    ? word.toUpperCase()
-    : word.charAt(0).toUpperCase() + word.slice(1)
-  )
-  .join(' ');
-
-}
+    .map(word =>
+      categoriesToUppercase.includes(word.toLowerCase())
+        ? word.toUpperCase()
+        : word.charAt(0).toUpperCase() + word.slice(1)
+    )
+    .join(' ');
+};
 
 export const SideNavbarCategory: FC<{
-  categoryData: ISidebar
-  expand: boolean
-  listRef: MutableRefObject<HTMLUListElement | null>
+  categoryData: ISidebar;
+  expand: boolean;
+  listRef: MutableRefObject<HTMLUListElement | null>;
 }> = ({ categoryData, expand, listRef }) => {
-  const [isOpen, setIsOpen] = useState(expand)
-  const router = useRouter()
-  const { category, subcategory } = categoryData
+  const [isOpen, setIsOpen] = useState(expand);
+  const router = useRouter();
+  const { category, subcategory } = categoryData;
   const sortedSubcategoryList = subcategory
     .sort((a, b) => (a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1))
     .map((subcategoryData, i) => (
       <li className="-ml-0.5" key={i}>
         <SideNavbarElement category={category} subcat={subcategoryData} />
       </li>
-    ))
+    ));
 
   useEffect(() => {
-    setIsOpen(expand)
-  }, [expand])
+    setIsOpen(expand);
+  }, [expand]);
 
   const handleToggle = () => {
-    setIsOpen(!isOpen)
-  }
+    setIsOpen(!isOpen);
+  };
 
   const handleClickOutside = async () => {
-    setIsOpen(false)
-    router.replace('/')
-  }
-  useOnClickOutside(listRef, handleClickOutside)
+    setIsOpen(false);
+    router.replace('/');
+  };
+  useOnClickOutside(listRef, handleClickOutside);
 
   return (
     <li className="w-full transition-all ease-in-out text-primary dark:text-theme-primary dark:bg-opacity-5 hover:text-theme-secondary dark:hover:text-theme-primary rounded-md focus-visible:outline-none focus-visible:ring focus-visible:ring-theme-primary">
@@ -81,5 +90,5 @@ export const SideNavbarCategory: FC<{
         <ul className="">{sortedSubcategoryList}</ul>
       </div>
     </li>
-  )
-}
+  );
+};