From 0afde48135667baf14afb99c4ea255575d7ab661 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Wed, 1 Oct 2025 15:24:33 +0700
Subject: [PATCH] chore(FE-40): set correct page title

---
 src/components/MainDrawer.tsx | 48 ++++++++++++++++++++++++++---------
 1 file changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/components/MainDrawer.tsx b/src/components/MainDrawer.tsx
index 4a21b7df..5851ee2b 100644
--- a/src/components/MainDrawer.tsx
+++ b/src/components/MainDrawer.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { usePathname } from 'next/navigation';
 
 import Image from 'next/image';
@@ -29,15 +29,11 @@ const isPathActive = (pathname: string, link?: string) => {
   const splittedPathname = pathname.split('/');
   const splittedLink = link.split('/');
 
-  return splittedPathname.every((pathnameChunk, idx) => {
-    return pathnameChunk === splittedLink[idx];
+  const isActiveLinkValid = splittedLink.every((linkChunk, idx) => {
+    return linkChunk === splittedPathname[idx];
   });
-};
 
-const isCollapseActive = (pathname: string, link?: string) => {
-  if (!link) return false;
-
-  return pathname === link || pathname.startsWith(link);
+  return pathname.startsWith(link) && isActiveLinkValid;
 };
 
 const CollapseMenu = ({
@@ -48,7 +44,7 @@ const CollapseMenu = ({
   depth = 0,
 }: CollapseMenuProps) => {
   const pathname = usePathname();
-  const isActive = isCollapseActive(pathname, link);
+  const isActive = isPathActive(pathname, link);
   const [open, setOpen] = useState(isActive);
 
   const menuCollapseTitle = (
@@ -184,9 +180,37 @@ const MainDrawer = ({
   const { mainDrawerOpen, setMainDrawerOpen } = useUiStore();
   const pathname = usePathname();
 
-  const pageTitle = MAIN_DRAWER_LINKS.find((item) =>
-    pathname.startsWith(item.link)
-  )?.title;
+  const getPageTitle = useCallback(() => {
+    let title = '';
+
+    const activeMenu = MAIN_DRAWER_LINKS.find((item) =>
+      isPathActive(pathname, item.link)
+    );
+
+    const traverseMenuTitle = (menu: typeof activeMenu) => {
+      const hasSubmenu = menu?.submenu && menu?.submenu.length > 0;
+
+      if (!title) {
+        title += menu?.title;
+      } else {
+        title += ' - ' + menu?.title;
+      }
+
+      if (!hasSubmenu) return;
+
+      const activeSubmenu = menu.submenu.find((item) =>
+        isPathActive(pathname, item.link)
+      );
+
+      traverseMenuTitle(activeSubmenu);
+    };
+
+    traverseMenuTitle(activeMenu);
+
+    return title;
+  }, [pathname]);
+
+  const pageTitle = getPageTitle();
 
   const toggleSidebar = () => {
     setMainDrawerOpen(!mainDrawerOpen);