diff --git a/components/SideNavbar/SideNavbarCategory.tsx b/components/SideNavbar/SideNavbarCategory.tsx index 2012f12ee..605b50126 100644 --- a/components/SideNavbar/SideNavbarCategory.tsx +++ b/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 = { + 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 + categoryData: ISidebar; + expand: boolean; + listRef: MutableRefObject; }> = ({ 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) => (
  • - )) + )); 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 (
  • @@ -81,5 +90,5 @@ export const SideNavbarCategory: FC<{
      {sortedSubcategoryList}
  • - ) -} + ); +};