Add menu

bulma/components/components.sass

@@ -6,6 +6,7 @@
 @import table
 @import tabs
 @import media
+@import menu
 
 .block:not(:last-child)
   margin-bottom: 20px

bulma/components/menu.sass

@@ -1,9 +1,20 @@
-.menu
-  border: 1px solid $border
+.menu-icon
+  +fa(14px, 16px)
+  color: $text-light
+  float: left
+  margin: 0 4px 0 -2px
+  .fa
+    font-size: inherit
+    line-height: inherit
 
 .menu-heading
-  @extend .heading
+  background: $background
+  border-bottom: 1px solid $border
+  border-radius: 4px 4px 0 0
   color: $text-strong
+  font-size: $size-medium
+  font-weight: 300
+  padding: 10px
 
 .menu-list
   a
@@ -11,7 +22,28 @@
     &:hover
       color: $link
 
+.menu-tabs
+  display: flex
+  font-size: $size-small
+  padding: 5px 10px 0
+  justify-content: center
+  &:not(:last-child)
+    border-bottom: 1px solid $border
+  a
+    border-bottom: 1px solid $border
+    margin-bottom: -1px
+    padding: 5px
+    &.is-active
+      border-bottom-color: $link-active-border
+      color: $link-active
+
 .menu-block
+  color: $text-strong
+  display: block
+  line-height: 16px
+  padding: 10px
+  &:not(:last-child)
+    border-bottom: 1px solid $border
   .checkbox
     border: 1px solid transparent
     border-radius: $radius
@@ -23,3 +55,22 @@
       top: 9px
     &:hover
       border-color: $link
+
+a.menu-block:hover
+  background: $background
+
+.menu-checkbox
+  @extend .checkbox
+  display: block
+  padding: 9px 10px 9px 30px
+  &:not(:last-child)
+    border-bottom: 1px solid $border
+  input
+    left: 8px
+    top: 10px
+
+.menu
+  border: 1px solid $border
+  border-radius: 5px
+  &:not(:last-child)
+    margin-bottom: 20px