chore: improve active page path logic and change import approach of ToolHeader

src/components/ToolHeader/ToolHeader.tsx

@@ -98,6 +98,9 @@ const ToolHeader: FC<TToolHeader> = ({
   const [token, setToken] = useState<string | null>(null);
   const [usernameIsTakenError, setUsernameIsTakenError] = useState('');
   const [changedTitle, setChangedTitle] = useState(false);
+  const [activePage, setActivePage] = useState<
+    'uxcore' | 'uxcg' | 'uxcp' | 'uxcat'
+  >('uxcore');
 
   const {
     ourProjects,
@@ -140,15 +143,14 @@ const ToolHeader: FC<TToolHeader> = ({
 
   const title = changedTitle ? userInfo?.title : userInfo?.user?.title;
 
-  const activePage = pathname.includes('/uxcore')
-    ? 'uxcore'
-    : pathname.includes('/uxcg')
-      ? 'uxcg'
-      : pathname.includes('/uxcp')
-        ? 'uxcp'
-        : pathname.includes('/uxcat') || pathname.includes('/user')
-          ? 'uxcat'
-          : 'uxcore';
+  const getActiveFromPath = (pathname: string) => {
+    if (pathname.includes('/uxcore')) return 'uxcore';
+    if (pathname.includes('/uxcg')) return 'uxcg';
+    if (pathname.includes('/uxcp')) return 'uxcp';
+    if (pathname.includes('/uxcat') || pathname.includes('/user'))
+      return 'uxcat';
+    return null;
+  };
 
   const openPodcastHandler = useCallback(() => {
     setOpenPodcast(prev => !prev);
@@ -233,6 +235,11 @@ const ToolHeader: FC<TToolHeader> = ({
     }
   }, [title, locale, userInfo]);
 
+  useEffect(() => {
+    const next = getActiveFromPath(pathname);
+    if (next) setActivePage(next);
+  }, [pathname]);
+
   return (
     <header className={cn(styles.ToolHeader, { [styles.Hidden]: hidden })}>
       <div className={styles.mobile}>

src/layouts/Layout.tsx

@@ -1,11 +1,11 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { usePathname } from 'next/navigation';
-import dynamic from 'next/dynamic';
 
 import { GlobalContext } from '@components/Context/GlobalContext';
 import SavedPersonas from '@components/_uxcp/SavedPersonas';
 import UXCorePopup from '@components/UXCorePopup';
+import ToolHeader from '@components/ToolHeader';
 import decisionTable from '@data/decisionTable';
 
 import { getPersonaList } from '@api/personas';
@@ -14,10 +14,6 @@ import { TRouter } from '@local-types/global';
 
 import useUCoreMobile from '@hooks/uxcoreMobile';
 
-const ToolHeader = dynamic(() => import('@components/ToolHeader'), {
-  ssr: false,
-});
-
 export default function Layout({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   const { locale } = router as TRouter;