replace hook with function

ui/snippets/navigation/NavLink.tsx

@@ -13,8 +13,8 @@ import IconSvg from 'ui/shared/IconSvg';
 import LightningLabel, { LIGHTNING_LABEL_CLASS_NAME } from './LightningLabel';
 import NavLinkIcon from './NavLinkIcon';
 import useColors from './useColors';
-import useHighlightedRoute from './useHighlightedRoute';
 import useNavLinkStyleProps from './useNavLinkStyleProps';
+import { checkRouteHighlight } from './utils';
 
 type Props = {
   item: NavItem;
@@ -36,7 +36,7 @@ const NavLink = ({ item, isCollapsed, px, className, onClick, disableActiveState
   const isXLScreen = useBreakpointValue({ base: false, xl: true });
   const href = isInternalLink ? route(item.nextRoute) : item.url;
 
-  const isHighlighted = useHighlightedRoute(item);
+  const isHighlighted = checkRouteHighlight(item);
 
   const content = (
     <Link

ui/snippets/navigation/NavLinkGroupDesktop.tsx

@@ -18,8 +18,8 @@ import IconSvg from 'ui/shared/IconSvg';
 import LightningLabel from './LightningLabel';
 import NavLink from './NavLink';
 import NavLinkIcon from './NavLinkIcon';
-import useHighlightedRoute from './useHighlightedRoute';
 import useNavLinkStyleProps from './useNavLinkStyleProps';
+import { checkRouteHighlight } from './utils';
 
 type Props = {
   item: NavGroupItem;
@@ -31,7 +31,7 @@ const NavLinkGroupDesktop = ({ item, isCollapsed }: Props) => {
 
   const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive: item.isActive });
 
-  const isHighlighted = useHighlightedRoute(item.subItems);
+  const isHighlighted = checkRouteHighlight(item.subItems);
 
   return (
     <Box as="li" listStyleType="none" w="100%">

ui/snippets/navigation/NavLinkGroupMobile.tsx

@@ -12,8 +12,8 @@ import IconSvg from 'ui/shared/IconSvg';
 
 import LightningLabel from './LightningLabel';
 import NavLinkIcon from './NavLinkIcon';
-import useHighlightedRoute from './useHighlightedRoute';
 import useNavLinkStyleProps from './useNavLinkStyleProps';
+import { checkRouteHighlight } from './utils';
 
 type Props = {
   item: NavGroupItem;
@@ -24,7 +24,7 @@ type Props = {
 const NavLinkGroup = ({ item, onClick, isExpanded }: Props) => {
   const styleProps = useNavLinkStyleProps({ isActive: item.isActive, isExpanded });
 
-  const isHighlighted = useHighlightedRoute(item.subItems);
+  const isHighlighted = checkRouteHighlight(item.subItems);
 
   return (
     <Box as="li" listStyleType="none" w="100%" onClick={ onClick }>

ui/snippets/navigation/useHighlightedRoute.ts

-import type { NavItem } from 'types/client/navigation-items';
-
-import config from 'configs/app';
-import { isInternalItem } from 'lib/hooks/useNavItems';
-
-export default function useHighlightedRoute(item: NavItem | Array<NavItem> | Array<Array<NavItem>>) {
-
-  function checkForLightningLabel(item: NavItem | Array<NavItem> | Array<Array<NavItem>>): boolean {
-    if (Array.isArray(item)) {
-      return item.some((subItem) => checkForLightningLabel(subItem));
-    }
-    return isInternalItem(item) && (config.UI.sidebar.highlightedRoutes.includes(item.nextRoute.pathname));
-  }
-
-  return checkForLightningLabel(item);
-}

ui/snippets/navigation/utils.ts

+import type { NavItem } from 'types/client/navigation-items';
+
+import config from 'configs/app';
+import { isInternalItem } from 'lib/hooks/useNavItems';
+
+export function checkRouteHighlight(item: NavItem | Array<NavItem> | Array<Array<NavItem>>): boolean {
+  if (Array.isArray(item)) {
+    return item.some((subItem) => checkRouteHighlight(subItem));
+  }
+  return isInternalItem(item) && (config.UI.sidebar.highlightedRoutes.includes(item.nextRoute.pathname));
+}