docs: fix mobile with and add beta tag on mobile

packages/docs/src/components/layout/Header.tsx

@@ -123,6 +123,7 @@ const Header = ({ mode, docsGroups, searchablePages, toggleColorMode }: HeaderPr
           links: group.links.map(link => ({
             title: link.title,
             url: `/docs/${link.slug}`,
+            beta: link.beta,
           })),
         })),
       },

packages/docs/src/components/layout/mobile-drawer/MobileNavLink.tsx

@@ -4,6 +4,8 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useMemo } from 'react';
 
+import BetaImage from '../../docs/BetaImage';
+
 import type { MouseEvent } from 'react';
 import type { MenuLink } from '../../../interface';
 
@@ -13,7 +15,7 @@ interface MobileNavLinkProps {
 }
 
 const MobileNavLink = ({ link, onClick }: MobileNavLinkProps) => {
-  const { title, url } = link;
+  const { title, url, beta = false } = link;
   const { asPath } = useRouter();
 
   const selected = useMemo(() => {
@@ -25,11 +27,21 @@ const MobileNavLink = ({ link, onClick }: MobileNavLinkProps) => {
       component={Link}
       href={url}
       target={url.startsWith('http') ? '_blank' : undefined}
-      sx={{ paddingLeft: '24px', paddingTop: '4px', paddingBottom: '4px' }}
+      sx={{ paddingLeft: '24px', paddingTop: '4px', paddingBottom: '4px', width: '100%' }}
       onClick={onClick}
       selected={selected}
     >
-      <ListItemText primary={title} />
+      <ListItemText
+        primary={
+          <>
+            {title}
+            {beta ? <BetaImage /> : null}
+          </>
+        }
+        primaryTypographyProps={{
+          sx: { display: 'flex', alignItems: 'center', gap: '8px' },
+        }}
+      />
     </ListItemButton>
   );
 };

packages/docs/src/interface.ts

@@ -131,6 +131,7 @@ export interface CommunityData {
 export interface MenuLink {
   readonly title: string;
   readonly url: string;
+  readonly beta?: boolean;
 }
 
 export interface MenuLinkSubGroup {