diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index a9b1066aac2118..ee3b5f4e55ce8c 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -29,6 +29,14 @@ import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
import getProductInfoFromUrl from 'docs/src/modules/utils/getProductInfoFromUrl';
import { DocsProvider } from '@mui/docs/DocsProvider';
import { mapTranslations } from '@mui/docs/i18n';
+import SvgMuiLogomark, {
+ MuiSvgLogoString,
+ MuiSvgWordmarkString,
+} from 'docs/src/icons/SvgMuiLogomark';
+import SvgBaseUiLogo, {
+ BaseSvgLogoString,
+ BaseSvgWordmarkString,
+} from 'docs/src/icons/SvgBaseUiLogo';
import './global.css';
import '../public/static/components-gallery/base-theme.css';
import config from '../config';
@@ -165,6 +173,9 @@ function AppWrapper(props) {
return {
metadata: '',
name: 'Material UI',
+ logo: SvgMuiLogomark,
+ logoSvg: MuiSvgLogoString,
+ wordmarkSvg: MuiSvgWordmarkString,
versions: [
{ text: `v${materialPkgJson.version}`, current: true },
{ text: `v5`, href: `https://mui.com${languagePrefix}/material-ui/getting-started/` },
@@ -184,6 +195,9 @@ function AppWrapper(props) {
return {
metadata: '',
name: 'Joy UI',
+ logo: SvgMuiLogomark,
+ logoSvg: MuiSvgLogoString,
+ wordmarkSvg: MuiSvgWordmarkString,
versions: [{ text: `v${joyPkgJson.version}`, current: true }],
};
}
@@ -192,6 +206,9 @@ function AppWrapper(props) {
return {
metadata: '',
name: 'MUI System',
+ logo: SvgMuiLogomark,
+ logoSvg: MuiSvgLogoString,
+ wordmarkSvg: MuiSvgWordmarkString,
versions: [
{ text: `v${systemPkgJson.version}`, current: true },
{ text: 'v5', href: `https://mui.com${languagePrefix}/system/getting-started/` },
@@ -208,6 +225,9 @@ function AppWrapper(props) {
return {
metadata: '',
name: 'Base UI',
+ logo: SvgBaseUiLogo,
+ logoSvg: BaseSvgLogoString,
+ wordmarkSvg: BaseSvgWordmarkString,
versions: [{ text: `v${basePkgJson.version}`, current: true }],
};
}
@@ -216,6 +236,9 @@ function AppWrapper(props) {
return {
metadata: '',
name: 'MUI Core',
+ logo: SvgMuiLogomark,
+ logoSvg: MuiSvgLogoString,
+ wordmarkSvg: MuiSvgWordmarkString,
versions: [
{ text: `v${materialPkgJson.version}`, current: true },
{
@@ -230,6 +253,9 @@ function AppWrapper(props) {
return {
metadata: '',
name: 'Docs-infra',
+ logo: SvgMuiLogomark,
+ logoSvg: MuiSvgLogoString,
+ wordmarkSvg: MuiSvgWordmarkString,
versions: [
{
text: 'v0.0.0',
@@ -243,6 +269,9 @@ function AppWrapper(props) {
return {
metadata: '',
name: 'Home docs',
+ logo: SvgMuiLogomark,
+ logoSvg: MuiSvgLogoString,
+ wordmarkSvg: MuiSvgWordmarkString,
versions: [
{
text: 'v0.0.0',
diff --git a/docs/src/components/action/MuiLogoMenu.tsx b/docs/src/components/action/LogoWithCopyMenu.tsx
similarity index 50%
rename from docs/src/components/action/MuiLogoMenu.tsx
rename to docs/src/components/action/LogoWithCopyMenu.tsx
index 8c1f0f2a02cace..f5ecf640ef6532 100644
--- a/docs/src/components/action/MuiLogoMenu.tsx
+++ b/docs/src/components/action/LogoWithCopyMenu.tsx
@@ -7,20 +7,29 @@ import Snackbar from '@mui/material/Snackbar';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Slide from '@mui/material/Slide';
-import SvgMuiLogomark from 'docs/src/icons/SvgMuiLogomark';
import TextFieldsRoundedIcon from '@mui/icons-material/TextFieldsRounded';
import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
+import { RootSvgProps } from 'docs/src/icons/RootSvg';
+import SvgMuiLogomark, {
+ MuiSvgLogoString,
+ MuiSvgWordmarkString,
+} from 'docs/src/icons/SvgMuiLogomark';
-const logoSvg = ``;
-
-const logoWordmarkSvg = ``;
-
-interface MuiLogoMenuProps {
+interface LogoWithCopyMenuProps {
+ logo?: React.ComponentType;
+ logoSvgString?: string;
+ wordmarkSvgString?: string;
marginLeft?: boolean;
smallerMargin?: boolean;
}
-export default function MuiLogoMenu({ smallerMargin, marginLeft }: MuiLogoMenuProps) {
+export default function LogoWithCopyMenu({
+ logo: LogoSvg = SvgMuiLogomark,
+ logoSvgString = MuiSvgLogoString,
+ wordmarkSvgString = MuiSvgWordmarkString,
+ smallerMargin,
+ marginLeft,
+}: LogoWithCopyMenuProps) {
const [contextMenu, setContextMenu] = React.useState<{
mouseX: number;
mouseY: number;
@@ -59,13 +68,13 @@ export default function MuiLogoMenu({ smallerMargin, marginLeft }: MuiLogoMenuPr
aria-label="Go to homepage"
onContextMenu={handleContextMenu}
sx={{
- '& > svg': { m: '0 !important' }, // override the 2px margin-left coming from the Link component
+ cursor: 'default',
mr: smallerMargin ? 1 : 1.5,
ml: marginLeft ? 1.5 : undefined,
- cursor: 'default',
+ '& > svg': { m: '0 !important' }, // override the 2px margin-left coming from the Link component
}}
>
-
+
diff --git a/docs/src/icons/SvgBaseUiLogo.tsx b/docs/src/icons/SvgBaseUiLogo.tsx
new file mode 100644
index 00000000000000..18d227b0f342bb
--- /dev/null
+++ b/docs/src/icons/SvgBaseUiLogo.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import RootSvg, { RootSvgProps } from 'docs/src/icons/RootSvg';
+
+export default function SvgBaseUiLogo(props: RootSvgProps) {
+ return (
+
+
+
+ );
+}
+
+export const BaseSvgLogoString = ``;
+
+export const BaseSvgWordmarkString = ``;
diff --git a/docs/src/icons/SvgMuiLogomark.tsx b/docs/src/icons/SvgMuiLogomark.tsx
index 4cca7a7aaae5eb..be8f372c02fd64 100644
--- a/docs/src/icons/SvgMuiLogomark.tsx
+++ b/docs/src/icons/SvgMuiLogomark.tsx
@@ -20,3 +20,7 @@ export default function SvgMuiLogomark(props: RootSvgProps) {
);
}
+
+export const MuiSvgLogoString = ``;
+
+export const MuiSvgWordmarkString = ``;
diff --git a/docs/src/layouts/AppHeader.tsx b/docs/src/layouts/AppHeader.tsx
index 058366525e0f5a..e18685964324e3 100644
--- a/docs/src/layouts/AppHeader.tsx
+++ b/docs/src/layouts/AppHeader.tsx
@@ -7,7 +7,7 @@ import Container from '@mui/material/Container';
import Tooltip from '@mui/material/Tooltip';
import IconButton from '@mui/material/IconButton';
import GitHubIcon from '@mui/icons-material/GitHub';
-import MuiLogoMenu from 'docs/src/components/action/MuiLogoMenu';
+import LogoWithCopyMenu from 'docs/src/components/action/LogoWithCopyMenu';
import HeaderNavBar from 'docs/src/components/header/HeaderNavBar';
import HeaderNavDropdown from 'docs/src/components/header/HeaderNavDropdown';
import ThemeModeToggle from 'docs/src/components/header/ThemeModeToggle';
@@ -50,7 +50,7 @@ export default function AppHeader(props: AppHeaderProps) {
}}
/>
-
+
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
index e10728f8c6db54..04237c22d85ce1 100644
--- a/docs/src/modules/components/AppFrame.js
+++ b/docs/src/modules/components/AppFrame.js
@@ -22,7 +22,7 @@ import MarkdownLinks from 'docs/src/modules/components/MarkdownLinks';
import SkipLink from 'docs/src/modules/components/SkipLink';
import PageContext from 'docs/src/modules/components/PageContext';
import { useTranslate } from '@mui/docs/i18n';
-import MuiLogoMenu from 'docs/src/components/action/MuiLogoMenu';
+import LogoWithCopyMenu from 'docs/src/components/action/LogoWithCopyMenu';
import AppFrameBanner from 'docs/src/components/banner/AppFrameBanner';
const nProgressStart = debounce(() => {
@@ -160,7 +160,7 @@ export default function AppFrame(props) {
const closeDrawer = React.useCallback(() => setMobileOpen(false), []);
const openDrawer = React.useCallback(() => setMobileOpen(true), []);
- const { activePage } = React.useContext(PageContext);
+ const { activePage, productIdentifier } = React.useContext(PageContext);
const disablePermanent = activePage?.disableDrawer === true || disableDrawer === true;
@@ -194,7 +194,12 @@ export default function AppFrame(props) {
-
+
diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index 736ece487b4405..d8dafec11e1900 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -14,7 +14,7 @@ import Box from '@mui/material/Box';
import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
import ArrowDropDownRoundedIcon from '@mui/icons-material/ArrowDropDownRounded';
import DoneRounded from '@mui/icons-material/DoneRounded';
-import MuiLogoMenu from 'docs/src/components/action/MuiLogoMenu';
+import LogoWithCopyMenu from 'docs/src/components/action/LogoWithCopyMenu';
import AppNavDrawerItem from 'docs/src/modules/components/AppNavDrawerItem';
import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
import PageContext from 'docs/src/modules/components/PageContext';
@@ -388,7 +388,12 @@ export default function AppNavDrawer(props) {
return (
-
+