Init navbar

sass/components/_all.sass

@@ -8,6 +8,7 @@
 @import "message.sass"
 @import "modal.sass"
 @import "nav.sass"
+@import "navbar.sass"
 @import "pagination.sass"
 @import "panel.sass"
 @import "tabs.sass"

sass/components/navbar.sass

@@ -0,0 +1,103 @@
+$navbar-color: $grey-dark !default
+$navbar-background: $white !default
+$navbar-dropdown-background: $white !default
+
+$navbar-height: 3.25rem !default
+
+.navbar
+  background-color: $navbar-background
+  min-height: $navbar-height
+  position: relative
+
+.navbar-brand
+  align-items: stretch
+  height: $navbar-height
+  display: flex
+
+.navbar-burger
+  +hamburger($navbar-height)
+  margin-left: auto
+
+.navbar-item,
+.navbar-link
+  align-items: center
+  color: $navbar-color
+  display: flex
+  line-height: 1.5
+  padding: 0.5rem 1rem
+  position: relative
+
+a.navbar-item,
+.navbar-link
+  &:hover
+    background-color: $background
+
+.navbar-item
+  // border-right: 1px solid $border
+  flex-grow: 0
+  flex-shrink: 0
+  img
+    max-height: 1.75rem
+  &.has-dropdown
+    align-items: stretch
+    padding: 0
+    &::after
+      +arrow($input-arrow)
+      margin-top: -0.375em
+      right: 1.125em
+      top: 50%
+
+.navbar-content
+  flex-grow: 1
+  flex-shrink: 1
+
+.navbar-link
+  padding-right: 2.5em
+
+.navbar-dropdown
+  background-color: $navbar-dropdown-background
+  border-bottom-left-radius: $radius-large
+  border-bottom-right-radius: $radius-large
+  // border-top: 1px solid $border
+  box-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+  font-size: 0.875rem
+  left: 0
+  min-width: 100%
+  padding-bottom: 0.25rem
+  padding-top: 0.25rem
+  position: absolute
+  top: 100%
+  z-index: 20
+  .navbar-item
+    padding: 0.375rem 1rem
+
+.navbar-divider
+  background-color: $border
+  border: none
+  display: block
+  height: 1px
+  margin: 0.25rem 0
+
++mobile
+  .navbar-menu
+    background-color: $background
+    padding: 0.5rem 0
+
++tablet
+  .navbar,
+  .navbar-menu,
+  .navbar-start,
+  .navbar-end
+    align-items: stretch
+    display: flex
+  .navbar-burger
+    display: none
+  .navbar-menu
+    flex-grow: 1
+    flex-shrink: 0
+  .navbar-start
+    justify-content: flex-start
+    margin-right: auto
+  .navbar-end
+    justify-content: flex-end
+    margin-left: auto