[docs-infra] Remove sidenav icons

oliviertassinari · Jul 26, 2023 · 6a11ea1 · 6a11ea1
1 parent bcb6835
commit 6a11ea1
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 33 deletions.
diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts
@@ -1,12 +1,10 @@
 import type { MuiPage } from 'docs/src/MuiPage';
-import standardNavIcons from 'docs/src/modules/components/AppNavIcons';
 import pagesApi from 'docs/data/base/pagesApi';
 
 const pages: readonly MuiPage[] = [
   {
     pathname: '/base-ui/getting-started-group',
     title: 'Getting started',
-    icon: standardNavIcons.DescriptionIcon,
     children: [
       { pathname: '/base-ui/getting-started', title: 'Overview' },
       { pathname: '/base-ui/getting-started/quickstart', title: 'Quickstart' },
@@ -17,7 +15,6 @@ const pages: readonly MuiPage[] = [
   {
     pathname: '/base-ui/react-',
     title: 'Components',
-    icon: standardNavIcons.ToggleOnIcon,
     children: [
       { pathname: '/base-ui/all-components', title: 'All components' },
       {
@@ -93,13 +90,11 @@ const pages: readonly MuiPage[] = [
   {
     title: 'APIs',
     pathname: '/base-ui/api',
-    icon: standardNavIcons.CodeIcon,
     children: pagesApi,
   },
   {
     pathname: '/base-ui/guides',
     title: 'How-to guides',
-    icon: standardNavIcons.VisibilityIcon,
     children: [
       {
         pathname: '/base-ui/guides/working-with-tailwind-css',

diff --git a/docs/data/docs-infra/pages.ts b/docs/data/docs-infra/pages.ts
@@ -1,16 +1,13 @@
 import type { MuiPage } from 'docs/src/MuiPage';
-import standardNavIcons from 'docs/src/modules/components/AppNavIcons';
 
 const pages: readonly MuiPage[] = [
   {
     pathname: '/experiments/docs/writing',
     title: 'Writing',
-    icon: standardNavIcons.DescriptionIcon,
     children: [{ pathname: '/experiments/docs/headers' }],
   },
   {
     pathname: '/experiments/docs/components',
-    icon: standardNavIcons.DescriptionIcon,
     children: [
       { pathname: '/experiments/docs/callouts' },
       { pathname: '/experiments/docs/demos' },
@@ -20,7 +17,6 @@ const pages: readonly MuiPage[] = [
   {
     pathname: '/experiments/docs/main-parent',
     title: 'Main parent',
-    icon: standardNavIcons.DescriptionIcon,
     children: [
       {
         pathname: '/experiments/docs/first-level-child-1',
@@ -55,7 +51,6 @@ const pages: readonly MuiPage[] = [
   },
   {
     pathname: '/x/react-data-grid-group',
-    icon: standardNavIcons.DescriptionIcon,
     title: 'Data Grid',
     children: [
       { pathname: '/x/react-data-grid', title: 'Overview' },
@@ -169,7 +164,6 @@ const pages: readonly MuiPage[] = [
   {
     pathname: '/x/migration-group',
     title: 'Migration',
-    icon: standardNavIcons.DescriptionIcon,
     children: [
       {
         pathname: '/x/migration-v6',

diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts
@@ -1,12 +1,10 @@
 import type { MuiPage } from 'docs/src/MuiPage';
-import standardNavIcons from 'docs/src/modules/components/AppNavIcons';
 import pagesApi from 'docs/data/joy/pagesApi';
 
 const pages: readonly MuiPage[] = [
   {
     pathname: '/joy-ui/getting-started-group',
     title: 'Getting started',
-    icon: standardNavIcons.DescriptionIcon,
     children: [
       { pathname: '/joy-ui/getting-started', title: 'Overview' },
       { pathname: '/joy-ui/getting-started/installation' },
@@ -28,7 +26,6 @@ const pages: readonly MuiPage[] = [
   {
     pathname: '/joy-ui/react-',
     title: 'Components',
-    icon: standardNavIcons.ToggleOnIcon,
     children: [
       {
         pathname: '/joy-ui/components/inputs',
@@ -114,12 +111,10 @@ const pages: readonly MuiPage[] = [
   {
     title: 'APIs',
     pathname: '/joy-ui/api',
-    icon: standardNavIcons.CodeIcon,
     children: pagesApi,
   },
   {
     pathname: '/joy-ui/customization',
-    icon: standardNavIcons.CreateIcon,
     children: [
       { pathname: '/joy-ui/customization/approaches' },
       { pathname: '/joy-ui/customization/dark-mode' },
@@ -147,7 +142,6 @@ const pages: readonly MuiPage[] = [
   {
     pathname: '/joy-ui/guides',
     title: 'How-to guides',
-    icon: standardNavIcons.VisibilityIcon,
     children: [
       {
         pathname: '/joy-ui/guides/overriding-component-structure',

diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts
@@ -6,7 +6,6 @@ const pages: MuiPage[] = [
   {
     pathname: '/material-ui/getting-started-group',
     title: 'Getting started',
-    icon: standardNavIcons.DescriptionIcon,
     children: [
       { pathname: '/material-ui/getting-started', title: 'Overview' },
       { pathname: '/material-ui/getting-started/installation' },
@@ -24,7 +23,6 @@ const pages: MuiPage[] = [
   {
     pathname: '/material-ui/react-',
     title: 'Components',
-    icon: standardNavIcons.ToggleOnIcon,
     children: [
       {
         pathname: '/material-ui/components/inputs',
@@ -153,12 +151,10 @@ const pages: MuiPage[] = [
   {
     title: 'Component API',
     pathname: '/material-ui/api',
-    icon: standardNavIcons.CodeIcon,
     children: pagesApi,
   },
   {
     pathname: '/material-ui/customization',
-    icon: standardNavIcons.CreateIcon,
     children: [
       {
         pathname: '/material-ui/customization/theme',
@@ -184,7 +180,6 @@ const pages: MuiPage[] = [
   {
     pathname: '/material-ui/guides',
     title: 'How-to guides',
-    icon: standardNavIcons.VisibilityIcon,
     children: [
       { pathname: '/material-ui/guides/api', title: 'API design approach' },
       { pathname: '/material-ui/guides/understand-mui-packages', title: 'Understand MUI packages' },
@@ -214,7 +209,6 @@ const pages: MuiPage[] = [
   {
     pathname: '/material-ui/experimental-api',
     title: 'Experimental APIs',
-    icon: standardNavIcons.ExperimentIcon,
     children: [
       {
         pathname: '/material-ui/experimental-api/classname-generator',
@@ -237,7 +231,6 @@ const pages: MuiPage[] = [
   },
   {
     pathname: '/material-ui/discover-more',
-    icon: standardNavIcons.AddIcon,
     children: [
       { pathname: '/material-ui/discover-more/showcase' },
       { pathname: '/material-ui/discover-more/related-projects' },
@@ -251,7 +244,6 @@ const pages: MuiPage[] = [
   {
     pathname: '/material-ui/migration',
     title: 'Migration',
-    icon: standardNavIcons.BookIcon,
     children: [
       {
         pathname: '/material-ui/migration/migration-grid-v2',

diff --git a/docs/data/system/pages.ts b/docs/data/system/pages.ts
@@ -6,7 +6,6 @@ const pages: readonly MuiPage[] = [
   {
     pathname: '/system/getting-started-group',
     title: 'Getting started',
-    icon: standardNavIcons.DescriptionIcon,
     children: [
       { pathname: '/system/getting-started', title: 'Overview' },
       { pathname: '/system/getting-started/installation' },
@@ -17,7 +16,6 @@ const pages: readonly MuiPage[] = [
   },
   {
     pathname: '/style-utilities',
-    icon: standardNavIcons.BuildIcon,
     children: [
       { pathname: '/system/properties' },
       { pathname: '/system/borders' },
@@ -37,7 +35,6 @@ const pages: readonly MuiPage[] = [
   {
     pathname: '/system/react-',
     title: 'Components',
-    icon: standardNavIcons.ToggleOnIcon,
     children: [
       { pathname: '/system/react-box', title: 'Box' },
       { pathname: '/system/react-container', title: 'Container' },
@@ -48,13 +45,11 @@ const pages: readonly MuiPage[] = [
   {
     title: 'APIs',
     pathname: '/system/api',
-    icon: standardNavIcons.CodeIcon,
     children: pagesApi,
   },
   {
     pathname: '/system/experimental-api',
     title: 'Experimental APIs',
-    icon: standardNavIcons.ExperimentIcon,
     children: [
       {
         pathname: '/system/experimental-api/configure-the-sx-prop',
@@ -70,7 +65,6 @@ const pages: readonly MuiPage[] = [
     pathname: '/system/styles',
     title: 'Styles',
     legacy: true,
-    icon: standardNavIcons.StyleIcon,
     children: [
       { pathname: '/system/styles/basics' },
       { pathname: '/system/styles/advanced' },

diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
@@ -172,6 +172,7 @@ PersistScroll.propTypes = {
 const ToolbarDiv = styled('div')(({ theme }) => ({
   padding: theme.spacing(1.6, 2),
   paddingRight: 0,
+  flexShrink: 0,
   height: 'var(--MuiDocs-header-height)',
   boxSizing: 'border-box', // TODO have CssBaseline in the Next.js layout
   display: 'flex',

diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded';
 import { alpha, styled } from '@mui/material/styles';
 import Collapse from '@mui/material/Collapse';
+import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import { shouldHandleLinkClick } from 'docs/src/modules/components/MarkdownLinks';
 import Link from 'docs/src/modules/components/Link';
@@ -45,7 +46,7 @@ const Item = styled(
       }),
       fontSize: theme.typography.pxToRem(14),
       textDecoration: 'none',
-      paddingLeft: 16 + (depth + 1) * 10 - (expandable ? 21 : 0),
+      paddingLeft: 10 + (depth + 1) * 13 - (expandable ? 21 : 0),
       '&:before': {
         content: '""',
         display: 'block',
@@ -92,7 +93,7 @@ const Item = styled(
         },
       }),
       ...(hasIcon && {
-        paddingLeft: 2,
+        paddingLeft: 0,
       }),
       '&.app-drawer-active': {
         // To match browserUrlPreviewMarge
@@ -287,6 +288,21 @@ export default function AppNavDrawerItem(props) {
   };
 
   const hasIcon = icon && (typeof icon !== 'string' || !!standardNavIcons[icon]);
+  const IconComponent = typeof icon === 'string' ? standardNavIcons[icon] : icon;
+  const iconElement = hasIcon ? (
+    <Box
+      component="span"
+      sx={{
+        '& svg': { fontSize: (theme) => theme.typography.pxToRem(16.5) },
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+        marginRight: '6px',
+      }}
+    >
+      <IconComponent fontSize="small" color="primary" />
+    </Box>
+  ) : null;
 
   return (
     <StyledLi {...other} depth={depth}>
@@ -304,6 +320,7 @@ export default function AppNavDrawerItem(props) {
         onClick={handleClick}
         {...linkProps}
       >
+        {iconElement}
         {expandable && <ItemButtonIcon className="ItemButtonIcon" open={open} />}
         {title}
         {plan === 'pro' && <span className="plan-pro" title="Pro plan" />}