Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs-infra] Remove icons and tweak the design of the side nav #37860

Merged
merged 6 commits into from
Jul 12, 2023
Merged

[docs-infra] Remove icons and tweak the design of the side nav #37860

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7838706
play with different styles
danilo-leal Jun 27, 2023
bc86a94
more playing with styles
danilo-leal Jun 27, 2023
2273bc8
change circle to squircle
danilo-leal Jul 7, 2023
ffa2b4b
color customizations
danilo-leal Jul 7, 2023
433cfeb
fix lint by removing unused code
danilo-leal Jul 10, 2023
90da3ff
fix lint again
danilo-leal Jul 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 64 additions & 27 deletions docs/src/modules/components/AppNavDrawerItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@danilo-leal Nice, I love the new side nav design! 🎉
I tried it out in MUI X - where we have a more nested structure: https://deploy-preview-9716--material-ui-x.netlify.app/x/react-data-grid/

Here are a few things I have noticed so far:

  1. Pages on the same level are not visually aligned. It looks like "Columns" and "Rows" are children of the "Layout" page, even though they are siblings:
  1. No vertical separator on the second level of nesting.
    Do you think it would look better if there were separators on each nesting level?

Let me know what you think 🙂
Looking forward to bringing the new design to MUI X docs!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It sounds like we should add this navigation case in https://master--material-ui.netlify.app/experiments/docs/installation/, so that when we make changes, we can also cover nested navigation.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cherniavskii sweet, I'm glad you enjoyed it, and thanks for calling attention to this ⎯ @oliviertassinari had already signaled it! Is there a way I can play with this to try to tackle these issues? I don't know how I'd change something on this repo and have an effect on the X docs 🤔 Having a mocked scenario on the experiments folder would 100% help, I think!

Either way, apologies for not having consulted y'all before merging that PR, that's my bad 😞

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can add use cases from MUI X to https://master--material-ui.netlify.app/experiments/docs/installation/ 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cherniavskii that'd be perfect! Let me know when these are up so I can promptly work on the design!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@danilo-leal Here you go: #38047

import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded';
import { alpha, styled } from '@mui/material/styles';
import Collapse from '@mui/material/Collapse';
Expand Down Expand Up @@ -30,28 +29,66 @@ const Item = styled(
return [
{
...theme.typography.body2,
position: 'relative',
display: 'flex',
alignItems: 'center',
borderRadius: 5,
borderRadius: 6,
outline: 0,
width: '100%',
paddingTop: 5,
paddingBottom: 5,
padding: 6,
justifyContent: 'flex-start',
fontWeight: theme.typography.fontWeightMedium,
fontWeight:
depth === 0 ? theme.typography.fontWeightSemiBold : theme.typography.fontWeightMedium,
transition: theme.transitions.create(['color', 'background-color'], {
duration: theme.transitions.duration.shortest,
}),
fontSize: theme.typography.pxToRem(14),
textDecoration: 'none',
paddingLeft: 31 + (depth > 1 ? (depth - 1) * 10 : 0),
'&:before': {
content: '""',
display: 'block',
position: 'absolute',
zIndex: 1,
left: 11.5,
height: '100%',
width: 1,
opacity: depth === 0 ? 0 : 1,
background: (theme.vars || theme).palette.grey[100],
},
...color,
...(subheader && {
marginTop: theme.spacing(1),
textTransform: 'uppercase',
letterSpacing: '.08rem',
fontWeight: theme.typography.fontWeightBold,
fontSize: theme.typography.pxToRem(11),
'&:before': {
content: '""',
display: 'block',
position: 'absolute',
zIndex: 1,
left: 11.5,
height: '55%',
top: 16,
width: 1,
opacity: depth === 0 ? 0 : 1,
background: (theme.vars || theme).palette.grey[100],
},
'&:after': {
content: '""',
display: 'block',
position: 'absolute',
zIndex: 5,
left: 8,
height: 8,
width: 8,
borderRadius: 2,
opacity: depth === 0 ? 0 : 1,
background: alpha(theme.palette.grey[50], 0.5),
border: '1px solid',
borderColor: (theme.vars || theme).palette.grey[200],
},
}),
...(hasIcon && {
paddingLeft: 2,
Expand Down Expand Up @@ -82,6 +119,9 @@ const Item = styled(
theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
),
},
'&:before': {
background: (theme.vars || theme).palette.primary[400],
},
},
'& .MuiChip-root': {
marginTop: '2px',
Expand All @@ -100,11 +140,10 @@ const Item = styled(
backgroundColor: (theme.vars || theme).palette.action.focus,
},
[theme.breakpoints.up('md')]: {
paddingTop: 3,
paddingBottom: 3,
paddingTop: 4,
paddingBottom: 4,
},
'& .ItemButtonIcon': {
marginLeft: 'auto !important',
marginRight: '5px',
color: (theme.vars || theme).palette.primary.main,
},
Expand All @@ -117,10 +156,25 @@ const Item = styled(
},
theme.applyDarkStyles({
...color,
'&:before': {
background: alpha(theme.palette.primaryDark[700], 0.6),
},
'&.app-drawer-active': {
color: (theme.vars || theme).palette.primary[300],
backgroundColor: (theme.vars || theme).palette.primaryDark[700],
'&:before': {
background: (theme.vars || theme).palette.primary[600],
},
},
...(subheader && {
'&:before': {
background: alpha(theme.palette.primaryDark[700], 0.6),
},
'&:after': {
background: alpha(theme.palette.primaryDark[700], 0.6),
borderColor: alpha(theme.palette.primaryDark[600], 0.5),
},
}),
...(!subheader && {
'&:hover': {
color: '#fff',
Expand All @@ -145,7 +199,7 @@ const ItemButtonIcon = styled(KeyboardArrowRightRoundedIcon, {
const StyledLi = styled('li', { shouldForwardProp: (prop) => prop !== 'depth' })(
({ theme, depth }) => ({
display: 'block',
padding: depth === 0 ? theme.spacing(1, '10px', 0, '10px') : '2px 0',
padding: depth === 0 ? theme.spacing(1, '10px', 0, '10px') : 0,
}),
);

Expand Down Expand Up @@ -228,22 +282,6 @@ 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: 1.5,
py: '2px',
}}
>
<IconComponent fontSize="small" color="primary" />
</Box>
) : null;

return (
<StyledLi {...other} depth={depth}>
Expand All @@ -260,14 +298,13 @@ export default function AppNavDrawerItem(props) {
onClick={handleClick}
{...linkProps}
>
{iconElement}
{expandable && !subheader && <ItemButtonIcon className="ItemButtonIcon" open={open} />}
{title}
{plan === 'pro' && <span className="plan-pro" title="Pro plan" />}
{plan === 'premium' && <span className="plan-premium" title="Premium plan" />}
{legacy && <Chip label="Legacy" sx={sxChip('warning')} />}
{newFeature && <Chip label="New" sx={sxChip('success')} />}
{comingSoon && <Chip label="Coming soon" sx={sxChip('grey')} />}
{expandable && !subheader && <ItemButtonIcon className="ItemButtonIcon" open={open} />}
</Item>
{expandable ? (
<Collapse in={open} timeout="auto" unmountOnExit>
Expand Down