add the Base UI logo with copy functionality

danilo-leal · May 29, 2024 · b6597b1 · b6597b1
1 parent 7b3a164
commit b6597b1
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 21 deletions.
diff --git 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 → ...rc/components/action/LogoWithCopyMenu.tsx b/docs/src/components/action/MuiLogoMenu.tsx → ...rc/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 = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#0073E6" fill-rule="evenodd" d="M24 5.601V1.592a.344.344 0 0 0-.514-.298l-2.64 1.508a.688.688 0 0 0-.346.597v4.009c0 .264.285.43.514.298l2.64-1.508A.688.688 0 0 0 24 5.6ZM.515 1.295l7.643 4.383a.688.688 0 0 0 .684 0l7.643-4.383a.344.344 0 0 1 .515.298v12.03c0 .235-.12.453-.319.58l-4.65 2.953 3.11 1.832c.22.13.495.127.713-.009l4.61-2.878a.344.344 0 0 0 .161-.292v-4.085c0-.254.14-.486.362-.606l2.507-1.346a.344.344 0 0 1 .506.303v7.531c0 .244-.13.47-.34.593l-7.834 4.592a.688.688 0 0 1-.71-.009l-5.953-3.681A.344.344 0 0 1 9 18.808v-3.624c0-.115.057-.222.153-.286l4.04-2.694a.688.688 0 0 0 .307-.572v-4.39a.137.137 0 0 0-.208-.117l-4.44 2.664a.688.688 0 0 1-.705.002L3.645 7.123a.138.138 0 0 0-.208.118v7.933a.344.344 0 0 1-.52.295L.5 14.019C.19 13.833 0 13.497 0 13.135V1.593c0-.264.286-.43.515-.298Z" clip-rule="evenodd"/></svg>`;
-
-const logoWordmarkSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="115" height="37" fill="none"><path fill="#0073E6" d="M11.995 12.023.753 5.441A.5.5 0 0 0 0 5.872v16.779a1.5 1.5 0 0 0 .728 1.286l3.515 2.109a.5.5 0 0 0 .757-.43v-11.27a.2.2 0 0 1 .3-.173l6.7 3.86a1 1 0 0 0 1 0l6.7-3.862a.2.2 0 0 1 .3.173v6.096a1 1 0 0 1-.477.853l-6.284 3.856a.5.5 0 0 0-.239.426v5.637a.5.5 0 0 0 .25.432l8.74 5.06a1 1 0 0 0 1.015-.007l11.51-6.906a1 1 0 0 0 .485-.857v-11.05a.5.5 0 0 0-.757-.43l-3.758 2.255a1 1 0 0 0-.485.857v5.65a.5.5 0 0 1-.243.43l-6.786 4.072a1 1 0 0 1-.962.037L17.5 28.5l7.015-4.209a1 1 0 0 0 .485-.857V5.872a.5.5 0 0 0-.753-.431l-11.242 6.582a1 1 0 0 1-1.01 0Z"/><path fill="#0073E6" d="M35 5.883v5.55a1 1 0 0 1-.486.858l-3.757 2.255a.5.5 0 0 1-.757-.43v-5.55a1 1 0 0 1 .485-.857l3.758-2.255a.5.5 0 0 1 .757.43Z"/><path fill="#090B0B" d="M50.38 28V9.8h4.498l7.566 10.504-3.328-.026L66.708 9.8h4.446V28h-4.966v-5.018c0-1.49.035-2.86.104-4.108.07-1.265.208-2.54.416-3.822l.52 1.612-5.642 7.28H59.87l-5.616-7.358.572-1.534a34.34 34.34 0 0 1 .416 3.744c.07 1.248.104 2.643.104 4.186V28H50.38Zm34.881.156c-1.768 0-3.336-.347-4.706-1.04-1.352-.693-2.409-1.655-3.172-2.886-.745-1.23-1.118-2.626-1.118-4.186V9.8h5.2v10.088c0 .763.165 1.43.494 2.002a3.43 3.43 0 0 0 1.352 1.326c.572.312 1.222.468 1.95.468.763 0 1.44-.156 2.028-.468a3.347 3.347 0 0 0 1.404-1.326c.347-.572.52-1.24.52-2.002V9.8h5.044v10.244c0 1.56-.38 2.955-1.144 4.186-.745 1.23-1.794 2.193-3.146 2.886-1.334.693-2.903 1.04-4.706 1.04ZM99.672 28v-4.316h4.186v-9.568h-4.186V9.8h13.494v4.316h-4.16v9.568h4.16V28H99.672Z"/></svg>`;
-
-interface MuiLogoMenuProps {
+interface LogoWithCopyMenuProps {
+  logo?: React.ComponentType<RootSvgProps>;
+  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
         }}
       >
-        <SvgMuiLogomark height={28} width={28} />
+        <LogoSvg height={28} width={28} />
       </Box>
       <Menu
         open={contextMenu !== null}
@@ -76,6 +85,7 @@ export default function MuiLogoMenu({ smallerMargin, marginLeft }: MuiLogoMenuPr
         }
         sx={(theme) => ({
           '& .MuiMenuItem-root': {
+            gap: 1,
             '& * path, .MuiSvgIcon-root': {
               fill: (theme.vars || theme).palette.text.tertiary,
               color: (theme.vars || theme).palette.text.tertiary,
@@ -89,12 +99,12 @@ export default function MuiLogoMenu({ smallerMargin, marginLeft }: MuiLogoMenuPr
           },
         })}
       >
-        <MenuItem onClick={() => handleCopy(logoSvg)}>
-          <SvgMuiLogomark height={16} width={18} sx={{ mr: 1 }} />
+        <MenuItem onClick={() => handleCopy(logoSvgString)}>
+          <LogoSvg height={16} width={18} />
           Copy logo as SVG
         </MenuItem>
-        <MenuItem onClick={() => handleCopy(logoWordmarkSvg)}>
-          <TextFieldsRoundedIcon sx={{ fontSize: '18px', mr: 1 }} />
+        <MenuItem onClick={() => handleCopy(wordmarkSvgString)}>
+          <TextFieldsRoundedIcon sx={{ fontSize: '18px' }} />
           Copy wordmark as SVG
         </MenuItem>
       </Menu>

diff --git a/docs/src/icons/SvgBaseUiLogo.tsx 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 (
+    <RootSvg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        fill="#007FFF"
+        d="M2 0a9 9 0 0 1 9 9v3H2V0Zm10 24c5.523 0 10-4.477 10-10H2c0 5.523 4.477 10 10 10Zm9.315-15.444A9 9 0 0 1 22 12h-9V3a9 9 0 0 1 8.315 5.556Z"
+      />
+    </RootSvg>
+  );
+}
+
+export const BaseSvgLogoString = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C6.97056 0 11 4.02944 11 9V12H2V0ZM12 24C17.5228 24 22 19.5228 22 14H2C2 19.5228 6.47715 24 12 24ZM21.3149 8.55585C21.7672 9.64778 22 10.8181 22 12H13V3C14.1819 3 15.3522 3.23279 16.4442 3.68508C17.5361 4.13738 18.5282 4.80031 19.364 5.63604C20.1997 6.47177 20.8626 7.46392 21.3149 8.55585Z" fill="#0073E6"/>
+</svg>`;
+
+export const BaseSvgWordmarkString = `<svg xmlns="http://www.w3.org/2000/svg" width="113" height="24" fill="none"><path fill="#0073E6" d="M12 24c5.523 0 10-4.477 10-10H2c0 5.523 4.477 10 10 10ZM2 0a9 9 0 0 1 9 9v3H2V0ZM22 12a9 9 0 0 0-9-9v9h9Z"/><path fill="#090B0B" fill-rule="evenodd" d="M40.112 2.34h-6.144V19.5h6.6c1.888 0 3.336-.4 4.344-1.2 1.024-.8 1.536-2 1.536-3.6v-.096c0-1.152-.28-2.048-.84-2.688-.56-.656-1.424-1.112-2.592-1.368.976-.304 1.672-.768 2.088-1.392.416-.64.624-1.392.624-2.256v-.096c0-1.568-.496-2.704-1.488-3.408-.976-.704-2.352-1.056-4.128-1.056Zm2.424 14.184c-.496.464-1.28.696-2.352.696h-3.096v-5.496h2.88c1.184 0 2.032.224 2.544.672.528.432.792 1.096.792 1.992v.096c0 .896-.256 1.576-.768 2.04Zm-.552-7.56c-.448.4-1.2.6-2.256.6h-2.64V4.62h2.592c1.024 0 1.776.184 2.256.552.48.368.72.96.72 1.776v.096c0 .88-.224 1.52-.672 1.92ZM53.442 19.74a5.397 5.397 0 0 1-2.088-.408 4.95 4.95 0 0 1-1.728-1.2c-.496-.544-.888-1.208-1.176-1.992-.288-.784-.432-1.688-.432-2.712v-.192c0-1.008.144-1.912.432-2.712.304-.816.704-1.504 1.2-2.064a5.26 5.26 0 0 1 1.776-1.32 5.123 5.123 0 0 1 2.136-.456c.96 0 1.752.208 2.376.624.624.4 1.12.912 1.488 1.536V6.948h2.904V19.5h-2.904v-2.064c-.176.304-.4.6-.672.888a4.689 4.689 0 0 1-.936.72 5.51 5.51 0 0 1-1.128.504 4.07 4.07 0 0 1-1.248.192Zm.696-2.304c.464 0 .904-.08 1.32-.24a3.034 3.034 0 0 0 1.08-.768c.304-.352.544-.784.72-1.296.176-.528.264-1.144.264-1.848v-.192c0-1.408-.296-2.448-.888-3.12-.592-.672-1.376-1.008-2.352-1.008-1.008 0-1.808.36-2.4 1.08-.592.72-.888 1.76-.888 3.12v.192c0 1.376.304 2.4.912 3.072.608.672 1.352 1.008 2.232 1.008Zm9.743 1.248c.912.704 2.184 1.056 3.816 1.056 1.616 0 2.856-.344 3.72-1.032.864-.704 1.296-1.696 1.296-2.976 0-.672-.112-1.224-.336-1.656a2.608 2.608 0 0 0-.912-1.08c-.4-.288-.896-.512-1.488-.672a13.956 13.956 0 0 0-1.968-.432c-.496-.08-.912-.168-1.248-.264a4.166 4.166 0 0 1-.816-.312 1.153 1.153 0 0 1-.408-.432 1.435 1.435 0 0 1-.12-.6c0-.448.176-.808.528-1.08.352-.272.84-.408 1.464-.408.672 0 1.176.136 1.512.408.352.272.592.696.72 1.272h2.688c-.08-.704-.264-1.296-.552-1.776a3.274 3.274 0 0 0-1.056-1.176 4.166 4.166 0 0 0-1.512-.648 8.065 8.065 0 0 0-1.8-.192 6.26 6.26 0 0 0-1.728.24c-.56.16-1.064.4-1.512.72a3.563 3.563 0 0 0-1.056 1.176c-.272.464-.408 1.008-.408 1.632 0 .592.08 1.096.24 1.512.16.416.416.776.768 1.08.368.304.84.552 1.416.744.576.192 1.28.352 2.112.48.928.16 1.608.36 2.04.6.432.24.648.616.648 1.128 0 .528-.184.928-.552 1.2-.352.272-.92.408-1.704.408-.864 0-1.48-.176-1.848-.528-.352-.352-.568-.848-.648-1.488H62.44c.064 1.344.544 2.376 1.44 3.096Zm13.945.624c.784.288 1.64.432 2.568.432 1.616 0 2.928-.344 3.936-1.032 1.008-.704 1.616-1.72 1.824-3.048h-2.808c-.112.608-.4 1.08-.864 1.416-.464.336-1.136.504-2.016.504-1.088 0-1.928-.32-2.52-.96-.576-.64-.888-1.56-.936-2.76h9.192v-.84c0-1.12-.168-2.08-.504-2.88-.32-.8-.752-1.456-1.296-1.968a5.072 5.072 0 0 0-1.896-1.128 6.87 6.87 0 0 0-2.232-.36c-.896 0-1.728.16-2.496.48a5.686 5.686 0 0 0-1.968 1.32c-.56.56-1 1.24-1.32 2.04-.304.784-.456 1.664-.456 2.64v.192c0 .992.152 1.88.456 2.664.32.784.76 1.456 1.32 2.016a6.258 6.258 0 0 0 2.016 1.272ZM82.41 9.54c.528.496.832 1.288.912 2.376h-6.264c.144-.976.496-1.736 1.056-2.28.56-.56 1.28-.84 2.16-.84.912 0 1.624.248 2.136.744Zm26.518 9.96V2.34h3.216V19.5h-3.216Zm-17.104-6.528c0 4.416 2.448 6.768 6.744 6.768 4.536 0 6.96-2.472 6.96-6.96V2.34h-3.216v10.176c0 3.552-1.248 4.656-3.72 4.656-2.544 0-3.552-1.296-3.552-4.44V2.34h-3.216v10.632Z" clip-rule="evenodd"/></svg>`;
diff --git a/docs/src/icons/SvgMuiLogomark.tsx b/docs/src/icons/SvgMuiLogomark.tsx
@@ -20,3 +20,7 @@ export default function SvgMuiLogomark(props: RootSvgProps) {
     </RootSvg>
   );
 }
+
+export const MuiSvgLogoString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#0073E6" fill-rule="evenodd" d="M24 5.601V1.592a.344.344 0 0 0-.514-.298l-2.64 1.508a.688.688 0 0 0-.346.597v4.009c0 .264.285.43.514.298l2.64-1.508A.688.688 0 0 0 24 5.6ZM.515 1.295l7.643 4.383a.688.688 0 0 0 .684 0l7.643-4.383a.344.344 0 0 1 .515.298v12.03c0 .235-.12.453-.319.58l-4.65 2.953 3.11 1.832c.22.13.495.127.713-.009l4.61-2.878a.344.344 0 0 0 .161-.292v-4.085c0-.254.14-.486.362-.606l2.507-1.346a.344.344 0 0 1 .506.303v7.531c0 .244-.13.47-.34.593l-7.834 4.592a.688.688 0 0 1-.71-.009l-5.953-3.681A.344.344 0 0 1 9 18.808v-3.624c0-.115.057-.222.153-.286l4.04-2.694a.688.688 0 0 0 .307-.572v-4.39a.137.137 0 0 0-.208-.117l-4.44 2.664a.688.688 0 0 1-.705.002L3.645 7.123a.138.138 0 0 0-.208.118v7.933a.344.344 0 0 1-.52.295L.5 14.019C.19 13.833 0 13.497 0 13.135V1.593c0-.264.286-.43.515-.298Z" clip-rule="evenodd"/></svg>`;
+
+export const MuiSvgWordmarkString = `<svg xmlns="http://www.w3.org/2000/svg" width="115" height="37" fill="none"><path fill="#0073E6" d="M11.995 12.023.753 5.441A.5.5 0 0 0 0 5.872v16.779a1.5 1.5 0 0 0 .728 1.286l3.515 2.109a.5.5 0 0 0 .757-.43v-11.27a.2.2 0 0 1 .3-.173l6.7 3.86a1 1 0 0 0 1 0l6.7-3.862a.2.2 0 0 1 .3.173v6.096a1 1 0 0 1-.477.853l-6.284 3.856a.5.5 0 0 0-.239.426v5.637a.5.5 0 0 0 .25.432l8.74 5.06a1 1 0 0 0 1.015-.007l11.51-6.906a1 1 0 0 0 .485-.857v-11.05a.5.5 0 0 0-.757-.43l-3.758 2.255a1 1 0 0 0-.485.857v5.65a.5.5 0 0 1-.243.43l-6.786 4.072a1 1 0 0 1-.962.037L17.5 28.5l7.015-4.209a1 1 0 0 0 .485-.857V5.872a.5.5 0 0 0-.753-.431l-11.242 6.582a1 1 0 0 1-1.01 0Z"/><path fill="#0073E6" d="M35 5.883v5.55a1 1 0 0 1-.486.858l-3.757 2.255a.5.5 0 0 1-.757-.43v-5.55a1 1 0 0 1 .485-.857l3.758-2.255a.5.5 0 0 1 .757.43Z"/><path fill="#090B0B" d="M50.38 28V9.8h4.498l7.566 10.504-3.328-.026L66.708 9.8h4.446V28h-4.966v-5.018c0-1.49.035-2.86.104-4.108.07-1.265.208-2.54.416-3.822l.52 1.612-5.642 7.28H59.87l-5.616-7.358.572-1.534a34.34 34.34 0 0 1 .416 3.744c.07 1.248.104 2.643.104 4.186V28H50.38Zm34.881.156c-1.768 0-3.336-.347-4.706-1.04-1.352-.693-2.409-1.655-3.172-2.886-.745-1.23-1.118-2.626-1.118-4.186V9.8h5.2v10.088c0 .763.165 1.43.494 2.002a3.43 3.43 0 0 0 1.352 1.326c.572.312 1.222.468 1.95.468.763 0 1.44-.156 2.028-.468a3.347 3.347 0 0 0 1.404-1.326c.347-.572.52-1.24.52-2.002V9.8h5.044v10.244c0 1.56-.38 2.955-1.144 4.186-.745 1.23-1.794 2.193-3.146 2.886-1.334.693-2.903 1.04-4.706 1.04ZM99.672 28v-4.316h4.186v-9.568h-4.186V9.8h13.494v4.316h-4.16v9.568h4.16V28H99.672Z"/></svg>`;
diff --git 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) {
         }}
       />
       <Container sx={{ display: 'flex', alignItems: 'center', minHeight: HEIGHT }}>
-        <MuiLogoMenu />
+        <LogoWithCopyMenu />
         <Box sx={{ display: { xs: 'none', md: 'initial' } }}>
           <HeaderNavBar />
         </Box>

diff --git 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) {
             <SvgHamburgerMenu />
           </NavIconButton>
           <Box sx={{ display: { md: 'flex', lg: 'none' } }}>
-            <MuiLogoMenu marginLeft />
+            <LogoWithCopyMenu
+              logo={productIdentifier.logo}
+              logoSvgString={productIdentifier.logoSvg}
+              wordmarkSvgString={productIdentifier.wordmarkSvg}
+              smallerMargin
+            />
           </Box>
           <Stack direction="row" spacing={1} useFlexGap sx={{ ml: 'auto' }}>
             <BannerComponent />

diff --git 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 (
       <React.Fragment>
         <ToolbarDiv>
-          <MuiLogoMenu smallerMargin />
+          <LogoWithCopyMenu
+            logo={productIdentifier.logo}
+            logoSvgString={productIdentifier.logoSvg}
+            wordmarkSvgString={productIdentifier.wordmarkSvg}
+            smallerMargin
+          />
           <ProductIdentifier
             name={productIdentifier.name}
             metadata={productIdentifier.metadata}