fix(sidebar): use placeholders in select menu (#7871)

* 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

* refactor(#7646): update the select component to have a default placeholder of the window title in site

* refactor(#7646): update the title source to that of frontmatter

Author: manishprivet

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 { useClientContext } 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 { frontmatter } = useClientContext();
   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={frontmatter?.title}
       onSelect={push}
       as={Link}
       {...props}

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,6 +26,7 @@ const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
   as,
   showProgressionIcons = false,
   children,
+  placeholder,
 }) => {
   const selectItems = groups.map(({ items, groupName }) => ({
     label: groupName,
@@ -44,6 +46,7 @@ const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
           label={title}
           values={selectItems}
           defaultValue={currentItem?.value}
+          placeholder={placeholder}
           onChange={onSelect}
           className={styles.mobileSelect}
         />