Added menu component.

README.md

@@ -52,6 +52,7 @@ Vue.use(MaterialComponentsVue)
 * [ ] Slots for components with text / labels
 * [ ] Better implementation for css class binding in slot e.g. ListItem?
 * [x] Usage description
+* [ ] Build each component as asset
 * [ ] Implement all missing components
 * [ ] Adding testframework to project
 * [ ] Use 'ref' inside components instead of IDs?
@@ -63,19 +64,20 @@ Vue.use(MaterialComponentsVue)
 
 ### Ready to use components
 * Button
+* Card
 * Checkbox
 * Dialog
-* Card
+* Drawer --> TemporaryDrawer
 * Fab
 * FormField
 * Icon
 * IconToggle
-* Drawer --> TemporaryDrawer
+* LayoutGrid
+* List
+* Menu
 * Snackbar
 * Switch
 * Toolbar --> Fixed & Waterfall
-* LayoutGrid
-* List
 * Textfield
 
 ### Missing components
@@ -86,6 +88,5 @@ Vue.use(MaterialComponentsVue)
 * SelectMenu
 * Slider
 * Progress
-* Menus
 * Tabs
 * Typography

src/Menu/Menu.vue

@@ -0,0 +1,70 @@
+<template>
+    <div class="mdc-simple-menu" :class="classes" :id="id" tabindex="-1">
+        <slot />
+    </div>
+</template>
+
+<script>
+import MDCSimpleMenu from '@material/menu'
+
+export default {
+    props: {
+        id: {
+            type: String,
+            required: false
+        },
+        open: {
+            type: Boolean,
+            required: true
+        },
+        fromTopToLeft: {
+            type: Boolean,
+            required: false
+        },
+        fromTopToRight: {
+            type: Boolean,
+            required: false
+        },
+        fromBottomLeft: {
+            type: Boolean,
+            required: false
+        },
+        fromBottomRight: {
+            type: Boolean,
+            required: false
+        }
+    },
+    data() {
+        return {
+            mdcSimpleMenu: null
+        }
+    },
+    mounted() {
+        this.mdcSimpleMenu = new MDCSimpleMenu(this.$el)
+
+        if (this.$slots.default)
+            this.$slots.default.map((n) => {
+                n.elm.classList.add('mdc-simple-menu__items')
+            })
+    },
+    destroyed() {
+        this.mdcSimpleMenu.destroy()
+    },
+    computed: {
+        classes() {
+            return {
+                'mdc-simple-menu--open': this.open,
+                'mdc-simple-menu--open-from-top-left': this.fromTopLeft,
+                'mdc-simple-menu--open-from-top-right': this.fromTopRight,
+                'mdc-simple-menu--open-from-bottom-left': this.fromBottomLeft,
+                'mdc-simple-menu--open-from-bottom-right': this.fromBottomRight
+            }
+        }
+    }
+
+}
+</script>
+
+<style lang="scss">
+@import "@material/menu/mdc-menu";
+</style>

src/Menu/MenuAnchor.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="mdc-menu-anchor">
+        <slot />
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+@import "@material/menu/mdc-menu";
+</style>

src/Menu/index.js

@@ -0,0 +1,11 @@
+import Menu from './Menu'
+import MenuAnchor from './MenuAnchor'
+
+export { Menu, MenuAnchor }
+
+export default {
+  install (vm) {
+    vm.component('m-menu', Menu)
+    vm.component('m-menu-anchor', MenuAnchor)
+  }
+}

src/index.js

@@ -8,6 +8,7 @@ import Icon from './Icon'
 import IconToggle from './IconToggle'
 import LayoutGrid from './LayoutGrid'
 import List from './List'
+import Menu from './Menu'
 import Snackbar from './Snackbar'
 import Switch from './Switch'
 import TemporaryDrawer from './Drawer'
@@ -26,6 +27,7 @@ const plugin = {
     vue.use(IconToggle)
     vue.use(LayoutGrid)
     vue.use(List)
+    vue.use(Menu)
     vue.use(Snackbar)
     vue.use(Switch)
     vue.use(TemporaryDrawer)