Doesn't work without JavaScript?

[JaneSmith]

I was interested in trying out this project, as I was under the impression that it works without JavaScript. However, it seems like that isn't actually the case? The official website seems to be broken when JavaScript is blocked - the sidebar menu won't toggle and the pop-up menu in the top-right corner won't function either. Does this not make use of progressive enhancement?

[amorey]

The official website uses JavaScript to implement features that are outside of the scope of MUI (e.g. collapsible side menu, front page header scroll effect). In terms of the MUI library itself, here's the list of components that require JavaScript:

• Dropdowns
• Overlays
• Button ripples
• Select
• Tabs
• Textfields with floating labels

If you want to use progressive enhancement on your site you can get pretty far with MUI components that don't use JS and MUI's CSS helpers: https://www.muicss.com/docs/v1/css-js/css-helpers

[JaneSmith]

Thanks for your response. Unfortunately the collapsible side menu is very important to me (and I would expect it to be a critical feature for most). It's my understanding that this can be done without JavaScript by using checkboxes, e.g. as seen here: https://squidfunk.github.io/mkdocs-material/

But Mui doesn't support this, right? That's sad, but thanks for clearing that up.

[amorey]

MUI is designed to be lightweight so components like collapsible menus are outside the scope of the library. However, MUI has a very small footprint so it's easy to integrate it with other CSS frameworks or to add your own custom features on top of it. For example, here is a code snippet that implements the method we use to animate the menu items:

<style>
  #sidenav ul {
    list-style: none;
  }
</style>
<script>
  jQuery(function($) {
    var $sidenav = $('#sidenav'),
        $titleEls = $('strong', $sidenav);

    $titleEls
      .filter(':not(.active)')
      .next()
      .hide();

    $titleEls.on('click', function() {
      $(this).next().slideToggle(200);
    });
  });
</script>
<nav id="sidenav">
  <ul>
    <li>
      <strong>Item 1</strong>
      <ul>
        <li>Item 1a</li>
        <li>Item 1b</li>
      </ul>
    </li>
    <li>
      <strong>Item 2</strong>
      <ul>
        <li>Item 2a</li>
        <li>Item 2b</li>
      </ul>
    </li>
  </ul>
</nav>

https://jsfiddle.net/muicss/3w934g8g/

[englishextra]

@amorey Here's pure JS code for sidedrawer example https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html:

var isBindedClass = "is-binded";

var sidedrawer = document[getElementById]("sidedrawer") || "";

var handleMenuButton = function (evt) {
	evt.stopPropagation();
	evt.preventDefault();
	var hideSidedrawerClass = "hide-sidedrawer";
	var activeClass = "active";
	if (sidedrawer) {
		if (!docBody[classList].contains(hideSidedrawerClass)) {
			docBody[classList].add(hideSidedrawerClass);
		} else {
			docBody[classList].remove(hideSidedrawerClass);
		}
		if (!sidedrawer[classList].contains(activeClass)) {
			sidedrawer[classList].add(activeClass);
		} else {
			sidedrawer[classList].remove(activeClass);
		}
	}
};
var toggleSidedrawerVisibility = function () {
	var menuButtons = document[getElementsByClassName]("sidedrawer-toggle") || "";
	if (menuButtons) {
		for (var i = 0, l = menuButtons[_length]; i < l; i += 1) {
			if (!menuButtons[i].classList.contains(isBindedClass)) {
				menuButtons[i][_addEventListener]("click", handleMenuButton);
				menuButtons[i].classList.contains(isBindedClass);
			}
		}
	}
};
toggleSidedrawerVisibility();

var handleSidedrawerCategoryLink = function (evt) {
	evt.stopPropagation();
	evt.preventDefault();
	var _this = this;
	if (_this.nextElementSibling.style.display === "none") {
		_this.nextElementSibling.style.display = "block";
	} else {
		_this.nextElementSibling.style.display = "none";
	}
};
var toggleSidedrawerCategoryItemsVisibility = function () {
	var sidedrawerCategories = sidedrawer ? sidedrawer[getElementsByTagName]("strong") || "" : "";
	if (sidedrawerCategories) {
		for (var i = 0, l = sidedrawerCategories[_length]; i < l; i += 1) {
			if (!sidedrawerCategories[i].classList.contains(isBindedClass) &&
				sidedrawerCategories[i].nextElementSibling.nodeName.toLowerCase() === "ul" &&
				sidedrawerCategories[i].nextElementSibling.nodeType === 1
				) {
					sidedrawerCategories[i].nextElementSibling.style.display = "none";
					sidedrawerCategories[i][_addEventListener]("click", handleSidedrawerCategoryLink);
					sidedrawerCategories[i].classList.contains(isBindedClass);
			}
		}
	}
};
toggleSidedrawerCategoryItemsVisibility();

var handleDropdownButton = function (evt) {
	evt.stopPropagation();
	evt.preventDefault();
	var _this = this;
	if (_this.nextElementSibling.style.display === "none") {
		_this.nextElementSibling.style.display = "block";
	} else {
		_this.nextElementSibling.style.display = "none";
	}
};
var toggleDropdownsVisibility = function () {
	var links = document[getElementsByTagName]("a") || "";
	var dropdownButtons = [];
	for (var j = 0, m = links[_length]; j < m; j += 1) {
		if (links[j].dataset.muiToggle) {
			dropdownButtons.push(links[j]);
		}
	}
	if (dropdownButtons) {
		for (var i = 0, l = dropdownButtons[_length]; i < l; i += 1) {
			if (!dropdownButtons[i].classList.contains(isBindedClass) &&
				dropdownButtons[i].nextElementSibling.nodeName.toLowerCase() === "ul" &&
				dropdownButtons[i].nextElementSibling.nodeType === 1
				) {
					dropdownButtons[i].nextElementSibling.style.display = "none";
					dropdownButtons[i][_addEventListener]("click", handleDropdownButton);
					dropdownButtons[i].classList.contains(isBindedClass);
			}
		}
	}
};
toggleDropdownsVisibility();

[Rob-pw]

I think there's a misunderstanding here, the 'burger menu' or 'off canvas side navigation menu' or collapsible side menu already exists on the MUICSS.com site, but as was the core of the issue does not function when JavaScript is disabled, @JaneSmith mentioned "this can be done without JavaScript by using checkboxes, e.g. as seen here: https://squidfunk.github.io/mkdocs-material/" which is true though the implementation may differ.

• @JaneSmith, do you suppose this is within your reach to attempt a pull request?

[englishextra]

@Rob-pw I add my 2 cents

here is what you talk about https://mildrenben.github.io/surface/

But the problem is that some devs would like to always keep the sidenav hidden

In case of MUICSS the whole logic of opening or closing is very complicated

But It turns out that you would end up to use JS to gain more control of sidenav behaviour.

Here's my dev repo https://github.com/englishextra/serguei-muicss-dev and a production site https://englishextra.gitlab.io/

BTW I tried https://github.com/material-components/material-components-web, and https://github.com/mildrenben/surface, and eventually I stopped by https://github.com/muicss/mui