From 927d6b3e61ffa005f99ad49f37971c9038caf38c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Manish=20Kumar=20=E2=9B=84?= <manishprivet@protonmail.com>
Date: Wed, 18 Jun 2025 00:41:21 +0900
Subject: [PATCH 1/3] fix(#7646): add default value if current page is missing
 in sidebar

sometimes current page can be missing from navigation data if the entry is not present in the navigation.json file. In those cases it shows an empty select box on smaller screens. This PR chooses the first item in the navigation tree if the current page is missing from there
---
 packages/ui-components/Containers/Sidebar/index.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/ui-components/Containers/Sidebar/index.tsx b/packages/ui-components/Containers/Sidebar/index.tsx
index 68b2404eb958c..c7769acef0294 100644
--- a/packages/ui-components/Containers/Sidebar/index.tsx
+++ b/packages/ui-components/Containers/Sidebar/index.tsx
@@ -31,9 +31,10 @@ const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
     items: items.map(({ label, link }) => ({ value: link, label })),
   }));
 
-  const currentItem = selectItems
-    .flatMap(item => item.items)
-    .find(item => pathname === item.value);
+  const currentItem =
+    selectItems
+      .flatMap(item => item.items)
+      .find(item => pathname === item.value) || selectItems[0]?.items[0];
 
   return (
     <aside className={styles.wrapper}>

From aa5f1c60d061dfd07fcb571a78840d174f82a996 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Manish=20Kumar=20=E2=9B=84?= <manishprivet@protonmail.com>
Date: Wed, 18 Jun 2025 02:15:03 +0900
Subject: [PATCH 2/3] refactor(#7646): update the select component to have a
 default placeholder of the window title in site

---
 apps/site/components/withSidebar.tsx              |  3 +++
 apps/site/hooks/react-client/index.ts             |  1 +
 apps/site/hooks/react-client/useDocumentTitle.ts  | 15 +++++++++++++++
 .../ui-components/Containers/Sidebar/index.tsx    | 10 ++++++----
 4 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 apps/site/hooks/react-client/useDocumentTitle.ts

diff --git a/apps/site/components/withSidebar.tsx b/apps/site/components/withSidebar.tsx
index a1a2258f978ef..56334d57c5410 100644
--- a/apps/site/components/withSidebar.tsx
+++ b/apps/site/components/withSidebar.tsx
@@ -7,6 +7,7 @@ import type { RichTranslationValues } from 'next-intl';
 import type { FC } from 'react';
 
 import Link from '#site/components/Link';
+import { useDocumentTitle } from '#site/hooks';
 import { useSiteNavigation } from '#site/hooks/server';
 import { useRouter } from '#site/navigation.mjs';
 import type { NavigationKeys } from '#site/types';
@@ -23,6 +24,7 @@ const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {
   const locale = useLocale();
   const t = useTranslations();
   const { push } = useRouter();
+  const pageTitle = useDocumentTitle();
   const sideNavigation = getSideNavigation(navKeys, context);
 
   const mappedSidebarItems =
@@ -40,6 +42,7 @@ const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {
       groups={mappedSidebarItems}
       pathname={pathname.replace(`/${locale}`, '')}
       title={t('components.common.sidebar.title')}
+      placeholder={pageTitle}
       onSelect={push}
       as={Link}
       {...props}
diff --git a/apps/site/hooks/react-client/index.ts b/apps/site/hooks/react-client/index.ts
index 33a9392db1a58..180cf774906f7 100644
--- a/apps/site/hooks/react-client/index.ts
+++ b/apps/site/hooks/react-client/index.ts
@@ -4,3 +4,4 @@ export { default as useMediaQuery } from './useMediaQuery';
 export { default as useNotification } from './useNotification';
 export { default as useClientContext } from './useClientContext';
 export { default as useNavigationState } from './useNavigationState';
+export { default as useDocumentTitle } from './useDocumentTitle';
diff --git a/apps/site/hooks/react-client/useDocumentTitle.ts b/apps/site/hooks/react-client/useDocumentTitle.ts
new file mode 100644
index 0000000000000..913e491e86d9c
--- /dev/null
+++ b/apps/site/hooks/react-client/useDocumentTitle.ts
@@ -0,0 +1,15 @@
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+const useDocumentTitle = (): string => {
+  const pathname = usePathname();
+  const [title, setTitle] = useState<string>(window.document.title);
+
+  useEffect(() => {
+    setTitle(window.document.title);
+  }, [pathname]);
+
+  return title;
+};
+
+export default useDocumentTitle;
diff --git a/packages/ui-components/Containers/Sidebar/index.tsx b/packages/ui-components/Containers/Sidebar/index.tsx
index c7769acef0294..71bc26115c6e2 100644
--- a/packages/ui-components/Containers/Sidebar/index.tsx
+++ b/packages/ui-components/Containers/Sidebar/index.tsx
@@ -15,6 +15,7 @@ type SidebarProps = {
   onSelect: (value: string) => void;
   as?: LinkLike;
   showProgressionIcons?: boolean;
+  placeholder?: string;
 };
 
 const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
@@ -25,16 +26,16 @@ const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
   as,
   showProgressionIcons = false,
   children,
+  placeholder,
 }) => {
   const selectItems = groups.map(({ items, groupName }) => ({
     label: groupName,
     items: items.map(({ label, link }) => ({ value: link, label })),
   }));
 
-  const currentItem =
-    selectItems
-      .flatMap(item => item.items)
-      .find(item => pathname === item.value) || selectItems[0]?.items[0];
+  const currentItem = selectItems
+    .flatMap(item => item.items)
+    .find(item => pathname === item.value);
 
   return (
     <aside className={styles.wrapper}>
@@ -45,6 +46,7 @@ const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
           label={title}
           values={selectItems}
           defaultValue={currentItem?.value}
+          placeholder={placeholder}
           onChange={onSelect}
           className={styles.mobileSelect}
         />

From 4827696f6f066d27cc515ea880c490e52d06b6db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Manish=20Kumar=20=E2=9B=84?= <manishprivet@protonmail.com>
Date: Wed, 18 Jun 2025 02:22:03 +0900
Subject: [PATCH 3/3] refactor(#7646): update the title source to that of
 frontmatter

---
 apps/site/components/withSidebar.tsx             |  6 +++---
 apps/site/hooks/react-client/index.ts            |  1 -
 apps/site/hooks/react-client/useDocumentTitle.ts | 15 ---------------
 3 files changed, 3 insertions(+), 19 deletions(-)
 delete mode 100644 apps/site/hooks/react-client/useDocumentTitle.ts

diff --git a/apps/site/components/withSidebar.tsx b/apps/site/components/withSidebar.tsx
index 56334d57c5410..5320e424a7b19 100644
--- a/apps/site/components/withSidebar.tsx
+++ b/apps/site/components/withSidebar.tsx
@@ -7,7 +7,7 @@ import type { RichTranslationValues } from 'next-intl';
 import type { FC } from 'react';
 
 import Link from '#site/components/Link';
-import { useDocumentTitle } from '#site/hooks';
+import { useClientContext } from '#site/hooks';
 import { useSiteNavigation } from '#site/hooks/server';
 import { useRouter } from '#site/navigation.mjs';
 import type { NavigationKeys } from '#site/types';
@@ -24,7 +24,7 @@ const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {
   const locale = useLocale();
   const t = useTranslations();
   const { push } = useRouter();
-  const pageTitle = useDocumentTitle();
+  const { frontmatter } = useClientContext();
   const sideNavigation = getSideNavigation(navKeys, context);
 
   const mappedSidebarItems =
@@ -42,7 +42,7 @@ const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {
       groups={mappedSidebarItems}
       pathname={pathname.replace(`/${locale}`, '')}
       title={t('components.common.sidebar.title')}
-      placeholder={pageTitle}
+      placeholder={frontmatter?.title}
       onSelect={push}
       as={Link}
       {...props}
diff --git a/apps/site/hooks/react-client/index.ts b/apps/site/hooks/react-client/index.ts
index 180cf774906f7..33a9392db1a58 100644
--- a/apps/site/hooks/react-client/index.ts
+++ b/apps/site/hooks/react-client/index.ts
@@ -4,4 +4,3 @@ export { default as useMediaQuery } from './useMediaQuery';
 export { default as useNotification } from './useNotification';
 export { default as useClientContext } from './useClientContext';
 export { default as useNavigationState } from './useNavigationState';
-export { default as useDocumentTitle } from './useDocumentTitle';
diff --git a/apps/site/hooks/react-client/useDocumentTitle.ts b/apps/site/hooks/react-client/useDocumentTitle.ts
deleted file mode 100644
index 913e491e86d9c..0000000000000
--- a/apps/site/hooks/react-client/useDocumentTitle.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { usePathname } from 'next/navigation';
-import { useEffect, useState } from 'react';
-
-const useDocumentTitle = (): string => {
-  const pathname = usePathname();
-  const [title, setTitle] = useState<string>(window.document.title);
-
-  useEffect(() => {
-    setTitle(window.document.title);
-  }, [pathname]);
-
-  return title;
-};
-
-export default useDocumentTitle;