diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx
index f18ec124562123..8dc1328eee840b 100644
--- a/docs/src/components/header/HeaderNavBar.tsx
+++ b/docs/src/components/header/HeaderNavBar.tsx
@@ -268,11 +268,7 @@ export default function HeaderNavBar() {
role="menuitem"
href={ROUTES.productAdvanced}
icon={}
- name={
-
- MUI X
-
- }
+ name="MUI X"
description="Advanced and powerful components for complex use cases."
onKeyDown={handleKeyDown}
/>
diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx
index e77d72a61b5b7d..068c817551484b 100644
--- a/docs/src/components/header/HeaderNavDropdown.tsx
+++ b/docs/src/components/header/HeaderNavDropdown.tsx
@@ -11,11 +11,6 @@ import Link from 'docs/src/modules/components/Link';
import ROUTES from 'docs/src/route';
import FEATURE_TOGGLE from 'docs/src/featureToggle';
-const shouldShowJoy =
- process.env.NODE_ENV === 'development' ||
- process.env.PULL_REQUEST ||
- FEATURE_TOGGLE.enable_joy_scope;
-
const Anchor = styled('a')<{ component?: React.ElementType; noLinkStyle?: boolean }>(
({ theme }) => ({
...theme.typography.body2,
@@ -77,15 +72,11 @@ const DOCS = [
description: "React components that implement Google's Material Design.",
href: ROUTES.materialDocs,
},
- ...(shouldShowJoy
- ? [
- {
- name: 'Joy UI',
- description: 'React components for building your design system.',
- href: ROUTES.joyDocs,
- },
- ]
- : []),
+ {
+ name: 'Joy UI',
+ description: 'React components for building your design system.',
+ href: ROUTES.joyDocs,
+ },
{
name: 'MUI Base',
description: 'Unstyled React components and low-level hooks.',
diff --git a/docs/src/featureToggle.js b/docs/src/featureToggle.js
index 4c577afc1432d1..1209940de2a4a5 100644
--- a/docs/src/featureToggle.js
+++ b/docs/src/featureToggle.js
@@ -1,13 +1,13 @@
// need to use commonjs export so that docs/packages/markdown can use
module.exports = {
- nav_products: true,
enable_website_banner: false,
enable_toc_banner: true,
enable_docsnav_banner: false,
- // TODO: cleanup once migration is done
- enable_product_scope: true, // related to new structure change
- enable_redirects: true, // related to new structure change
- enable_mui_base_scope: true, // will be enabled after the migration
- enable_system_scope: true, // will be enabled after the migration
- enable_joy_scope: true,
+
+ // TODO: to remove
+ nav_products: true,
+ enable_product_scope: true,
+ enable_redirects: true,
+ enable_mui_base_scope: true,
+ enable_system_scope: true,
};
diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index eabd9e00ccf322..9be4ea59a93e03 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -25,10 +25,10 @@ import DoneRounded from '@mui/icons-material/DoneRounded';
import FEATURE_TOGGLE from 'docs/src/featureToggle';
import { isNewLocation } from 'docs/src/modules/utils/replaceUrl';
import MuiProductSelector from 'docs/src/modules/components/MuiProductSelector';
-import materialPkgJson from '../../../../packages/mui-material/package.json';
-import joyPkgJson from '../../../../packages/mui-joy/package.json';
-import basePkgJson from '../../../../packages/mui-base/package.json';
-import systemPkgJson from '../../../../packages/mui-system/package.json';
+import materialPkgJson from 'packages/mui-material/package.json';
+import joyPkgJson from 'packages/mui-joy/package.json';
+import basePkgJson from 'packages/mui-base/package.json';
+import systemPkgJson from 'packages/mui-system/package.json';
const savedScrollTop = {};
diff --git a/docs/src/modules/components/MuiProductSelector.tsx b/docs/src/modules/components/MuiProductSelector.tsx
index ddea2cd24f6a70..77627755bcdba5 100644
--- a/docs/src/modules/components/MuiProductSelector.tsx
+++ b/docs/src/modules/components/MuiProductSelector.tsx
@@ -5,16 +5,10 @@ import Chip from '@mui/material/Chip';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import IconImage from 'docs/src/components/icon/IconImage';
-import FEATURE_TOGGLE from 'docs/src/featureToggle';
import ROUTES from 'docs/src/route';
import Link from 'docs/src/modules/components/Link';
import useRouterExtra from 'docs/src/modules/utils/useRouterExtra';
-const shouldShowJoy =
- process.env.NODE_ENV === 'development' ||
- process.env.PULL_REQUEST ||
- FEATURE_TOGGLE.enable_joy_scope;
-
function ProductSubMenu({
icon,
name,
@@ -62,8 +56,31 @@ function ProductSubMenu({
);
}
+const products = [
+ {
+ name: 'Material UI',
+ href: ROUTES.materialDocs,
+ slug: 'material-ui',
+ },
+ {
+ name: 'Joy UI',
+ href: ROUTES.joyDocs,
+ slug: 'joy-ui',
+ },
+ {
+ name: 'MUI Base',
+ href: ROUTES.baseDocs,
+ slug: 'base',
+ },
+ {
+ name: 'MUI System',
+ href: ROUTES.systemDocs,
+ slug: 'system',
+ },
+];
+
export default function MuiProductSelector() {
- const { product } = useRouterExtra();
+ const routerExtra = useRouterExtra();
return (
@@ -108,44 +125,18 @@ export default function MuiProductSelector() {
},
}}
>
- Material UI }
- clickable
- size="small"
- />
- {shouldShowJoy && (
+ {products.map((product) => (
Joy UI }
+ href={product.href}
+ label={product.name}
clickable
size="small"
/>
- )}
- MUI Base }
- clickable
- size="small"
- />
- MUI System }
- clickable
- size="small"
- />
+ ))}