How do I build a drawer in Material Components Web?

Question

I am just getting into Material Components for the Web and I want to have a website sort of like this, although I tried the code from the docs (that is obviously not complete) and got this. How can I get something like the example?

Answer 1

MDC-Web provides a drawer component but not an app’s layout where this drawer can iterate with the content, so you should compose the required layout yourself. And, apart from that, you will need the sort of CSS reset to style some elements consistently across browsers. This is not an incompleteness of library, but its philosophy - to provide only Material Design components rather than “all-in-one” solution for developers. This quote is taken from one of their GitHub issues:

The goal isn't to be a framework and do a lot of little functions for developers. It's simply to provide the Material Design Specification's components to the web in a re-usable way. That's it. Anything that is beyond that goes beyond the scope of what the project is trying to achieve.

So, in the provided link from MDC-Web, you can see that there are CSS styles applied to elements like html, body and their layout. Namely, this:

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.demo-content {
  display: flex;
  flex: 1 1 auto;
  height: 100%;
  box-sizing: border-box;
}

.demo-main {
  padding: 16px;
}

You can view the demo on Codepen and ask me if you need a further clarification.