Skip to content

[docs] Enable the i18n help messages #14356

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

Merged
merged 2 commits into from
Feb 1, 2019
Merged

[docs] Enable the i18n help messages #14356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cbd585a
[docs] Enable the i18n help messages
oliviertassinari Jan 30, 2019
02c2f93
keep improving
oliviertassinari Jan 31, 2019
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
2 changes: 1 addition & 1 deletion .size-limit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,6 @@ module.exports = [
name: 'The docs home page',
webpack: false,
path: `.next/static/${buildId}/pages/index.js`,
limit: '6 KB',
limit: '7 KB',
},
];
15 changes: 9 additions & 6 deletions BACKERS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,18 @@ via [Patreon](https://www.patreon.com/oliviertassinari)

via [OpenCollective](https://opencollective.com/material-ui)

<p style="display: flex; justify-content: center;">
<a href="https://www.call-em-all.com" rel="noopener" target="_blank" style="margin-right: 8px;">
<p style="display: flex; justify-content: center; flex-wrap: wrap;">
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener" target="_blank" style="margin-right: 16px;">
<img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="callemall" title="The easy way to message your group">
</a>
<a href="https://localizejs.com" rel="noopener" target="_blank" style="margin-right: 8px;">
<img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2F629dea80-f1ae-11e8-b356-a5942970e22b.png&height=70" alt="localize" title="Application translation & localization platform">
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="localize" href="https://localizejs.com" rel="noopener" target="_blank" style="margin-right: 16px;">
<img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2F629dea80-f1ae-11e8-b356-a5942970e22b.png&height=65" alt="localize" title="Application translation & localization platform">
</a>
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="yakaz" href="https://yakaz.com" rel="noopener" target="_blank" style="margin-right: 16px;">
<img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Fb47b9630-1586-11e9-a4d4-47c0a7133bdc.png&height=80" alt="yakaz" title="Search classified ads">
</a>
<a href="https://yakaz.com" rel="noopener" target="_blank" style="margin-right: 8px;">
<img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Fb47b9630-1586-11e9-a4d4-47c0a7133bdc.png&height=70" alt="localize" title="Search classified ads">
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="zinggrid" href="https://www.zinggrid.com/" rel="noopener" target="_blank" style="margin-right: 16px;">
<img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2F453226e0-258a-11e9-ac89-996ff9caccb7.png&height=45" alt="zinggrid" title="Makes powerful grids easy">
</a>
</p>

Expand Down
15 changes: 9 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,15 +78,18 @@ via [Patreon](https://www.patreon.com/oliviertassinari)

via [OpenCollective](https://opencollective.com/material-ui)

<p style="display: flex; justify-content: center;">
<a href="https://www.call-em-all.com" rel="noopener" target="_blank" style="margin-right: 8px;">
<p style="display: flex; justify-content: center; flex-wrap: wrap;">
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener" target="_blank" style="margin-right: 16px;">
<img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="callemall" title="The easy way to message your group">
</a>
<a href="https://localizejs.com" rel="noopener" target="_blank" style="margin-right: 8px;">
<img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2F629dea80-f1ae-11e8-b356-a5942970e22b.png&height=70" alt="localize" title="Application translation & localization platform">
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="localize" href="https://localizejs.com" rel="noopener" target="_blank" style="margin-right: 16px;">
<img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2F629dea80-f1ae-11e8-b356-a5942970e22b.png&height=65" alt="localize" title="Application translation & localization platform">
</a>
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="yakaz" href="https://yakaz.com" rel="noopener" target="_blank" style="margin-right: 16px;">
<img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Fb47b9630-1586-11e9-a4d4-47c0a7133bdc.png&height=80" alt="yakaz" title="Search classified ads">
</a>
<a href="https://yakaz.com" rel="noopener" target="_blank" style="margin-right: 8px;">
<img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Fb47b9630-1586-11e9-a4d4-47c0a7133bdc.png&height=70" alt="localize" title="Search classified ads">
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="zinggrid" href="https://www.zinggrid.com/" rel="noopener" target="_blank" style="margin-right: 16px;">
<img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2F453226e0-258a-11e9-ac89-996ff9caccb7.png&height=45" alt="zinggrid" title="Makes powerful grids easy">
</a>
</p>

Expand Down
35 changes: 35 additions & 0 deletions docs/notifications.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,40 @@
{
"id": 27,
"text": "You can <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://twitter.com/MaterialUI\">follow us on Twitter</a> to receive exclusive tips and updates about Material-UI and the React ecosystem."
},
{
"id": 34,
"text": "Lets translate! <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://translate.material-ui.com/\">Ajude a comunidade a traduzir a documentação para o Português</a>. 🇧🇷",
"userLanguage": "pt"
},
{
"id": 35,
"text": "Let's translate! <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://translate.material-ui.com/\">帮助 Material-UI 将文档翻译成中文</a>. 🇨🇳",
"userLanguage": "zh"
},
{
"id": 36,
"text": "Let's translate! <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://translate.material-ui.com/\">Помогите сообществу перевести документацию на русский язык</a>. 🇷🇺",
"userLanguage": "ru"
},
{
"id": 37,
"text": "Let's translate! <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://translate.material-ui.com/\">Aidez la communauté à traduire la documentation en français</a>. 🇫🇷",
"userLanguage": "fr"
},
{
"id": 38,
"text": "Let's translate! <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://translate.material-ui.com/\">Ayuda a la comunidad a traducir la documentación al español.</a>. 🇪🇸",
"userLanguage": "es"
},
{
"id": 39,
"text": "Let's translate! <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://translate.material-ui.com/\">Helfen Sie der Community, die Dokumentation ins Deutsche zu übersetzen</a>. 🇩🇪",
"userLanguage": "de"
},
{
"id": 40,
"text": "Let's translate! <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://translate.material-ui.com/\">コミュニティがドキュメントを日本語に翻訳するのを手伝ってください</a>. 🇯🇵",
"userLanguage": "ja"
}
]
32 changes: 16 additions & 16 deletions docs/src/modules/components/AppFrame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,22 +51,22 @@ const languages = [
code: 'zh',
text: '🇨🇳 中文',
},
{
code: 'ru',
text: '🇷🇺 Русский',
},
{
code: 'pt',
text: '🇧🇷 Português',
},
{
code: 'fr',
text: '🇫🇷 Français',
},
{
code: 'es',
text: '🇪🇸 Español',
},
// {
// code: 'ru',
// text: '🇷🇺 Русский',
// },
// {
// code: 'pt',
// text: '🇧🇷 Português',
// },
// {
// code: 'fr',
// text: '🇫🇷 Français',
// },
// {
// code: 'es',
// text: '🇪🇸 Español',
// },
// {
// code: 'de',
// text: '🇩🇪 Deutsch',
Expand Down
7 changes: 6 additions & 1 deletion docs/src/modules/components/AppWrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import acceptLanguage from 'accept-language';
import { lightTheme, darkTheme, setPrismTheme } from '@material-ui/docs/MarkdownElement/prism';
import { updatePageContext } from 'docs/src/modules/styles/getPageContext';
import { getCookie } from 'docs/src/modules/utils/helpers';
import { ACTION_TYPES, LANGUAGES } from 'docs/src/modules/constants';
import { ACTION_TYPES, LANGUAGES, CODE_VARIANTS } from 'docs/src/modules/constants';

// Inject the insertion-point-jss after docssearch
if (process.browser && !global.__INSERTION_POINT__) {
Expand Down Expand Up @@ -44,13 +44,18 @@ class SideEffectsRaw extends React.Component {
(userLanguage && options.userLanguage !== userLanguage) ||
(codeVariant && options.codeVariant !== codeVariant)
) {
window.ga('set', 'dimension1', codeVariant);
window.ga('set', 'dimension2', userLanguage);
this.props.dispatch({
type: ACTION_TYPES.OPTIONS_CHANGE,
payload: {
userLanguage,
codeVariant,
},
});
} else {
window.ga('set', 'dimension1', CODE_VARIANTS.JS);
window.ga('set', 'dimension2', 'en');
}
}

Expand Down
13 changes: 5 additions & 8 deletions docs/src/modules/components/Demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,21 +48,17 @@ const styles = theme => ({
marginRight: 0,
},
},
demo: theme.mixins.gutters({
demo: {
borderRadius: theme.shape.borderRadius,
backgroundColor:
theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900],
display: 'flex',
justifyContent: 'center',
paddingTop: theme.spacing.unit * 2,
paddingBottom: theme.spacing.unit * 2,
padding: 20,
[theme.breakpoints.up('sm')]: {
paddingLeft: theme.spacing.unit * 3,
paddingRight: theme.spacing.unit * 3,
paddingTop: theme.spacing.unit * 6,
paddingBottom: theme.spacing.unit * 3,
padding: theme.spacing.unit * 3,
},
}),
},
demoHiddenHeader: {
paddingTop: theme.spacing.unit * 2,
[theme.breakpoints.up('sm')]: {
Expand Down Expand Up @@ -175,6 +171,7 @@ class Demo extends React.Component {
handleCodeLanguageClick = (event, codeVariant) => {
if (this.props.codeVariant !== codeVariant) {
document.cookie = `codeVariant=${codeVariant};path=/;max-age=31536000`;
window.ga('set', 'dimension1', codeVariant);

this.props.dispatch({
type: ACTION_TYPES.OPTIONS_CHANGE,
Expand Down
21 changes: 12 additions & 9 deletions docs/src/modules/components/HomeBackers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const styles = theme => ({
});

function HomeBackers(props) {
const classes = props.classes;
const { classes } = props;

return (
<div className={classes.root}>
Expand All @@ -38,25 +38,28 @@ Gold Sponsors are those who have pledged $500/month and more to Material-UI.
via [Patreon](https://www.patreon.com/oliviertassinari)

<p style="display: flex; justify-content: center;">
<a href="https://www.creative-tim.com/?utm_source=material-ui&utm_medium=docs&utm_campaign=homepage" rel="noopener" target="_blank" style="margin-right: 8px;">
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="creative-tim" href="https://www.creative-tim.com/?utm_source=material-ui&utm_medium=docs&utm_campaign=homepage" rel="noopener" target="_blank" style="margin-right: 16px;">
<img width="126" src="https://avatars1.githubusercontent.com/u/20172349?s=378" alt="creative-tim" title="Premium Themes">
</a>
<a href="https://bitsrc.io" rel="noopener" target="_blank" style="margin-right: 8px;">
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="bitsrc" href="https://bitsrc.io" rel="noopener" target="_blank" style="margin-right: 16px;">
<img width="96" src="https://avatars1.githubusercontent.com/u/24789812?s=192" alt="bitsrc" title="The fastest way to share code">
</a>
</p>

via [OpenCollective](https://opencollective.com/material-ui)

<p style="display: flex; justify-content: center;">
<a href="https://www.call-em-all.com" rel="noopener" target="_blank" style="margin-right: 8px;">
<p style="display: flex; justify-content: center; flex-wrap: wrap;">
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener" target="_blank" style="margin-right: 16px;">
<img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="callemall" title="The easy way to message your group">
</a>
<a href="https://localizejs.com" rel="noopener" target="_blank" style="margin-right: 8px;">
<img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2F629dea80-f1ae-11e8-b356-a5942970e22b.png&height=70" alt="localize" title="Application translation & localization platform">
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="localize" href="https://localizejs.com" rel="noopener" target="_blank" style="margin-right: 16px;">
<img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2F629dea80-f1ae-11e8-b356-a5942970e22b.png&height=65" alt="localize" title="Application translation & localization platform">
</a>
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="yakaz" href="https://yakaz.com" rel="noopener" target="_blank" style="margin-right: 16px;">
<img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Fb47b9630-1586-11e9-a4d4-47c0a7133bdc.png&height=80" alt="yakaz" title="Search classified ads">
</a>
<a href="https://yakaz.com" rel="noopener" target="_blank" style="margin-right: 8px;">
<img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Fb47b9630-1586-11e9-a4d4-47c0a7133bdc.png&height=70" alt="localize" title="Search classified ads">
<a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="zinggrid" href="https://www.zinggrid.com/" rel="noopener" target="_blank" style="margin-right: 16px;">
<img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2F453226e0-258a-11e9-ac89-996ff9caccb7.png&height=45" alt="zinggrid" title="Makes powerful grids easy">
</a>
</p>

Expand Down
3 changes: 3 additions & 0 deletions docs/src/modules/components/Tidelift.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@ function Tidelift(props) {

return (
<Link
data-ga-event-category="sponsors"
data-ga-event-action="logo"
data-ga-event-label="tidelift"
className={classNames(classes.root, 'mui-fixed')}
href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage"
target="_blank"
Expand Down
38 changes: 0 additions & 38 deletions docs/src/modules/translations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,41 +26,3 @@ const translations = {
};

export default translations;

// ,
// {
// "id": 34,
// "text": "Lets translate! <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://translate.material-ui.com/\">Ajude a comunidade a traduzir a documentação para o Português</a>. 🇧🇷",
// "userLanguage": "pt"
// },
// {
// "id": 35,
// "text": "Let's translate! <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://translate.material-ui.com/\">帮助 Material-UI 将文档翻译成中文</a>. 🇨🇳",
// "userLanguage": "zh"
// },
// {
// "id": 36,
// "text": "Let's translate! <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://translate.material-ui.com/\">Помогите сообществу перевести документацию на русский язык</a>. 🇷🇺",
// "userLanguage": "ru"
// },
// {
// "id": 37,
// "text": "Let's translate! <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://translate.material-ui.com/\">Aidez la communauté à traduire la documentation en français</a>. 🇫🇷",
// "userLanguage": "fr"
// },
// {
// "id": 38,
// "text": "Let's translate! <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://translate.material-ui.com/\">Ayuda a la comunidad a traducir la documentación al español.</a>. 🇪🇸",
// "userLanguage": "es"
// },
// {
// "id": 39,
// "text": "Let's translate! <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://translate.material-ui.com/\">Helfen Sie der Community, die Dokumentation ins Deutsche zu übersetzen</a>. 🇩🇪",
// "userLanguage": "de"
// },
// {
// "id": 40,
// "text": "Let's translate! <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://translate.material-ui.com/\">コミュニティがドキュメントを日本語に翻訳するのを手伝ってください</a>. 🇯🇵",
// "userLanguage": "ja"
// }
//
3 changes: 3 additions & 0 deletions docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ const useStyles = makeStyles(theme => ({
fabGreen: {
color: theme.palette.common.white,
backgroundColor: green[500],
'&:hover': {
backgroundColor: green[600],
},
},
}));

Expand Down
3 changes: 3 additions & 0 deletions docs/src/pages/demos/buttons/FloatingActionButtonZoom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ const styles = theme => ({
fabGreen: {
color: theme.palette.common.white,
backgroundColor: green[500],
'&:hover': {
backgroundColor: green[600],
},
},
});

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/demos/dividers/dividers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ The examples below show two ways of achieving this.

## Inset Dividers

The `inset` property has now been deprecated. You should now use `variant="inset"`
The `inset` property has now been deprecated. You should now use `variant="inset"`.

{{"demo": "pages/demos/dividers/InsetDividers.js"}}

Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/demos/menus/menus-de.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=3

## Change Transition

Use a different transition altogether.
Use a different transition.

{{"demo": "pages/demos/menus/FadeMenu.js"}}

Expand All @@ -74,4 +74,4 @@ For more advanced use cases you might be able to take advantage of:

There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases.

{{"demo": "pages/demos/menus/MenuPopupState.js"}}
{{"demo": "pages/demos/menus/MenuPopupState.js"}}
4 changes: 2 additions & 2 deletions docs/src/pages/demos/menus/menus-es.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=3

## Change Transition

Use a different transition altogether.
Use a different transition.

{{"demo": "pages/demos/menus/FadeMenu.js"}}

Expand All @@ -74,4 +74,4 @@ For more advanced use cases you might be able to take advantage of:

There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases.

{{"demo": "pages/demos/menus/MenuPopupState.js"}}
{{"demo": "pages/demos/menus/MenuPopupState.js"}}
4 changes: 2 additions & 2 deletions docs/src/pages/demos/menus/menus-fr.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=3

## Changer la transition

Use a different transition altogether.
Use a different transition.

{{"demo": "pages/demos/menus/FadeMenu.js"}}

Expand All @@ -74,4 +74,4 @@ For more advanced use cases you might be able to take advantage of:

There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases.

{{"demo": "pages/demos/menus/MenuPopupState.js"}}
{{"demo": "pages/demos/menus/MenuPopupState.js"}}
Loading