[docs] Link Toolpad core docs to the docs menu

docs/src/components/header/HeaderNavBar.tsx

@@ -304,7 +304,7 @@ export default function HeaderNavBar() {
                         icon={<IconImage name="product-toolpad" />}
                         name="Toolpad"
                         chip={<Chip label="Beta" size="small" color="primary" variant="outlined" />}
-                        description="Self-hosted, low-code internal tool builder."
+                        description="Components and tools for dashboards and internal apps."
                       />
                     </li>
                     <li>

docs/src/components/header/HeaderNavDropdown.tsx

@@ -77,7 +77,7 @@ const PRODUCTS = [
   },
   {
     name: 'Toolpad',
-    description: 'Self-hosted, low-code internal tool builder.',
+    description: 'Components and tools for dashboards and internal apps.',
     href: ROUTES.productToolpad,
     chip: 'Beta',
   },
@@ -111,8 +111,8 @@ const DOCS = [
   },
   {
     name: 'Toolpad',
-    description: 'Self-hosted, low-code internal tool builder.',
-    href: ROUTES.toolpadStudioDocs,
+    description: 'Components and tools for dashboards and internal apps.',
+    href: ROUTES.toolpadCoreDocs,
     chip: 'Beta',
   },
 ];

docs/src/components/home/ProductsSwitcher.tsx

@@ -90,7 +90,7 @@ export default function ProductsSwitcher(props: {
     />,
     <ProductItem
       name="Toolpad Studio"
-      description="A self-hosted, low-code internal tool builder."
+      description="Self-hosted, low-code internal tool builder."
       icon={<IconImage name="product-toolpad" />}
       chip={
         <Chip

docs/src/icons/SvgToolpadStudioLogo.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import RootSvg, { RootSvgProps } from 'docs/src/icons/RootSvg';
+
+export default function SvgToolpadStudioLogo(props: RootSvgProps) {
+  return (
+    <RootSvg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 37 36"
+      fill="none"
+      {...props}
+    >
+      <g mask="url(#a)">
+        <path d="M22.74 27.73v-7.6l6.64-3.79v7.6l-6.64 3.79Z" fill="#007FFF" />
+        <path d="M16.1 23.93v-7.59l6.64 3.8v7.59l-6.65-3.8Z" fill="#39F" />
+        <path d="m16.1 16.34 6.64-3.8 6.64 3.8-6.64 3.8-6.65-3.8Z" fill="#A5D8FF" />
+      </g>
+      <mask
+        id="b"
+        style={{
+          maskType: 'alpha',
+        }}
+        maskUnits="userSpaceOnUse"
+        x="8"
+        y="17"
+        width="14"
+        height="15"
+      >
+        <path
+          d="M8.5 22.3c0-1.05.56-2 1.46-2.53l3.75-2.14c.89-.5 1.98-.5 2.87 0l3.75 2.14a2.9 2.9 0 0 1 1.46 2.52v4.23c0 1.04-.56 2-1.46 2.52l-3.75 2.14c-.89.5-1.98.5-2.87 0l-3.75-2.14a2.9 2.9 0 0 1-1.46-2.52v-4.23Z"
+          fill="#D7DCE1"
+        />
+      </mask>
+      <g mask="url(#b)">
+        <path d="M15.14 32v-7.6l6.65-3.8v7.6L15.14 32Z" fill="#007FFF" />
+        <path d="M8.5 28.2v-7.6l6.64 3.8V32L8.5 28.2Z" fill="#39F" />
+        <path d="m8.5 20.6 6.64-3.79 6.65 3.8-6.65 3.8-6.64-3.8Z" fill="#A5D8FF" />
+      </g>
+      <mask
+        id="c"
+        style={{
+          maskType: 'alpha',
+        }}
+        maskUnits="userSpaceOnUse"
+        x="8"
+        y="4"
+        width="22"
+        height="20"
+      >
+        <path
+          d="M24.17 4.82a2.9 2.9 0 0 0-2.87 0L9.97 11.22a2.9 2.9 0 0 0-1.47 2.53v4.22c0 1.04.56 2 1.46 2.52l3.75 2.14c.89.5 1.98.5 2.87 0l11.33-6.42a2.9 2.9 0 0 0 1.47-2.52V9.48c0-1.04-.56-2-1.46-2.52l-3.75-2.14Z"
+          fill="#D7DCE1"
+        />
+      </mask>
+      <g mask="url(#c)">
+        <path d="M15.14 23.46v-7.6L29.38 7.8v7.59l-14.24 8.07Z" fill="#007FFF" />
+        <path d="M8.5 19.66v-7.6l6.64 3.8v7.6l-6.64-3.8Z" fill="#39F" />
+        <path d="M8.5 12.07 22.74 4l6.64 3.8-14.24 8.06-6.64-3.8Z" fill="#A5D8FF" />
+      </g>
+    </RootSvg>
+  );
+}
+
+export const toolpadSvgLogoString = `<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="18.5" cy="18" r="16" fill="#EAEEF3"/><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="16" y="12" width="14" height="16"><path d="M24.18 13.37a2.9 2.9 0 0 0-2.88 0l-3.75 2.13a2.9 2.9 0 0 0-1.46 2.52v4.23c0 1.04.56 2 1.46 2.52l3.75 2.14c.89.5 1.98.5 2.88 0l3.74-2.14a2.9 2.9 0 0 0 1.46-2.52v-4.23c0-1.04-.56-2-1.46-2.52l-3.74-2.13Z" fill="#D7DCE1"/></mask><g mask="url(#a)"><path d="M22.74 27.73v-7.6l6.64-3.79v7.6l-6.64 3.79Z" fill="#007FFF"/><path d="M16.1 23.93v-7.59l6.64 3.8v7.59l-6.65-3.8Z" fill="#39F"/><path d="m16.1 16.34 6.64-3.8 6.64 3.8-6.64 3.8-6.65-3.8Z" fill="#A5D8FF"/></g><mask id="b" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="8" y="17" width="14" height="15"><path d="M8.5 22.3c0-1.05.56-2 1.46-2.53l3.75-2.14c.89-.5 1.98-.5 2.87 0l3.75 2.14a2.9 2.9 0 0 1 1.46 2.52v4.23c0 1.04-.56 2-1.46 2.52l-3.75 2.14c-.89.5-1.98.5-2.87 0l-3.75-2.14a2.9 2.9 0 0 1-1.46-2.52v-4.23Z" fill="#D7DCE1"/></mask><g mask="url(#b)"><path d="M15.14 32v-7.6l6.65-3.8v7.6L15.14 32Z" fill="#007FFF"/><path d="M8.5 28.2v-7.6l6.64 3.8V32L8.5 28.2Z" fill="#39F"/><path d="m8.5 20.6 6.64-3.79 6.65 3.8-6.65 3.8-6.64-3.8Z" fill="#A5D8FF"/></g><mask id="c" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="8" y="4" width="22" height="20"><path d="M24.17 4.82a2.9 2.9 0 0 0-2.87 0L9.97 11.22a2.9 2.9 0 0 0-1.47 2.53v4.22c0 1.04.56 2 1.46 2.52l3.75 2.14c.89.5 1.98.5 2.87 0l11.33-6.42a2.9 2.9 0 0 0 1.47-2.52V9.48c0-1.04-.56-2-1.46-2.52l-3.75-2.14Z" fill="#D7DCE1"/></mask><g mask="url(#c)"><path d="M15.14 23.46v-7.6L29.38 7.8v7.59l-14.24 8.07Z" fill="#007FFF"/><path d="M8.5 19.66v-7.6l6.64 3.8v7.6l-6.64-3.8Z" fill="#39F"/><path d="M8.5 12.07 22.74 4l6.64 3.8-14.24 8.06-6.64-3.8Z" fill="#A5D8FF"/></g></svg>`;

docs/src/modules/components/MuiProductSelector.tsx

@@ -11,13 +11,14 @@ import ROUTES from 'docs/src/route';
 import PageContext from 'docs/src/modules/components/PageContext';
 import SvgMuiLogomark from 'docs/src/icons/SvgMuiLogomark';
 import SvgBaseUiLogo from 'docs/src/icons/SvgBaseUiLogo';
-import SvgToolpadLogo from 'docs/src/icons/SvgToolpadLogo';
+import SvgToolpadCoreLogo from 'docs/src/icons/SvgToolpadCoreLogo';
 import BackupTableRoundedIcon from '@mui/icons-material/BackupTableRounded';
 import CalendarMonthRoundedIcon from '@mui/icons-material/CalendarMonthRounded';
 import AccountTreeRoundedIcon from '@mui/icons-material/AccountTreeRounded';
 import BarChartRoundedIcon from '@mui/icons-material/BarChartRounded';
 import StyleRoundedIcon from '@mui/icons-material/StyleRounded';
 import WebRoundedIcon from '@mui/icons-material/WebRounded';
+import BrushIcon from '@mui/icons-material/Brush';
 
 const iconStyles = (theme: Theme) => ({
   fontSize: '.875rem',
@@ -33,7 +34,7 @@ const logoColor = (theme: Theme) => ({
 });
 
 const NavLabel = styled(Typography)(({ theme }) => ({
-  padding: theme.spacing(0.5, 1, 1, 1),
+  padding: theme.spacing(0.5, 1, 0.5, 1),
   fontSize: theme.typography.pxToRem(11),
   fontWeight: theme.typography.fontWeightSemiBold,
   textTransform: 'uppercase',
@@ -192,6 +193,23 @@ const advancedProducts = [
   },
 ];
 
+const toolpadProducts = [
+  {
+    id: 'toolpad-core',
+    name: 'Toolpad Core',
+    description: 'Components for building dashboards.',
+    icon: <SvgToolpadCoreLogo width={14} height={14} sx={logoColor} />,
+    href: ROUTES.toolpadCoreDocs,
+  },
+  {
+    id: 'toolpad-studio',
+    name: 'Toolpad Studio',
+    description: 'Self-hosted, low-code internal tool builder.',
+    icon: <BrushIcon sx={iconStyles} />,
+    href: ROUTES.toolpadStudioDocs,
+  },
+];
+
 const MuiProductSelector = React.forwardRef(function MuiProductSelector(
   props: MenuListProps<'div'>,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
@@ -263,14 +281,18 @@ const MuiProductSelector = React.forwardRef(function MuiProductSelector(
           },
         }}
       />
-      <ProductItem
+      <Box
         key="Toolpad"
-        name="Toolpad"
-        href={ROUTES.toolpadStudioDocs}
-        icon={<SvgToolpadLogo width={14} height={14} sx={logoColor} />}
-        description="Self-hosted, low-code internal tool builder."
-        active={pageContext.productId === 'toolpad-core'}
-        chip={
+        role="none"
+        sx={{
+          gridColumn: {
+            xs: '1 / span 1',
+            sm: '1 / span 2',
+          },
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: '1px' }}>
+          <NavLabel> Toolpad </NavLabel>
           <Chip
             label="Beta"
             size="small"
@@ -287,14 +309,18 @@ const MuiProductSelector = React.forwardRef(function MuiProductSelector(
               },
             }}
           />
-        }
-        sx={{
-          gridColumn: {
-            xs: '1 / span 1',
-            sm: '1 / span 2',
-          },
-        }}
-      />
+        </Box>
+      </Box>
+      {toolpadProducts.map((product) => (
+        <ProductItem
+          key={product.name}
+          name={product.name}
+          description={product.description}
+          icon={product.icon}
+          href={product.href}
+          active={pageContext.productId === product.id}
+        />
+      ))}
     </MenuList>
   );
 });

docs/src/route.ts

@@ -52,6 +52,7 @@ const ROUTES = {
   // Toolpad pages
   toolpadLandingPage: '/toolpad/',
   toolpadStudioDocs: '/toolpad/studio/getting-started/',
+  toolpadCoreDocs: '/toolpad/core/introduction/',
   toolpadWhy: '/toolpad/studio/getting-started/why-toolpad/',
   // External pages
   rssFeed: '/feed/blog/rss.xml',