MithrilMdl - Drawer

MithrilJs using MithrilMdl Components. Drawer Menu

by Ardian Shala

HTML

<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://cdn.rawgit.com/oardi/mithrilmdl/b6a41e1f/dist/mithrilmdl.js"></script>

CSS

@import url(//fonts.googleapis.com/icon?family=Material+Icons);

Babel + JSX

/* @jsx m */
const { Mdl } = window.mithrilmdl;

class App {

	constructor() {
  }

	view() {
		return (
			<Mdl.Layout>

				<Mdl.LayoutHeader>
					<div class="mdl-layout__header-row">
						<Mdl.LayoutTitle title="App Title" />
					</div>
				</Mdl.LayoutHeader>
        
        <Mdl.LayoutDrawer title="MithrilMdl">
					<Mdl.List>
            <Mdl.ListItem>Menu Item 1</Mdl.ListItem>
            <Mdl.ListItem color="grey"><Mdl.Icon color="primary" icon="add" /> Colored Menu Item 2</Mdl.ListItem>
            <Mdl.ListItem color="accent">
                <Mdl.ListItemPrimaryContent>
                Complex Menu Item 
                </Mdl.ListItemPrimaryContent>
                <Mdl.ListItemSecondaryAction>
			            <Mdl.Icon icon="star" />
		            </Mdl.ListItemSecondaryAction>
              </Mdl.ListItem>
          </Mdl.List>
				</Mdl.LayoutDrawer>

				<Mdl.LayoutContent>

					<Mdl.Grid>
						<Mdl.Cell>
						  Click the Menu Icon to open the Drawer
						</Mdl.Cell>
					</Mdl.Grid>

				</Mdl.LayoutContent>

			</Mdl.Layout>
		)
	}
}

m.mount(document.body, App);