Create ButtonDropdown component and use it in layout view
MODIFY
resources/assets/js/app.js
resources/assets/js/app.js
@@ -4,6 +4,7 @@ window.Vue = require('vue')
Vue.component('chrome-picker', require('vue-color').Chrome)
+Vue.component('button-dropdown', require('./components/ButtonDropdown.vue'))
Vue.component('datepicker', require('./components/DatePicker.vue'))
Vue.component('barchart', require('./components/BarChart.vue'))
Vue.component('dropdown', require('./components/Dropdown.vue'))

ADD
resources/assets/js/components/ButtonDropdown.vue
+<template>
+ <div class="dropdown" v-click-outside="closeMenu">
+ <div class="button-dropdown row">
+ <div class="button-dropdown__section row__column">
+ <slot name="button" style="color: #FFF;"></slot>
+ </div>
+ <div class="button-dropdown__section row__column row__column--compact">
+ <button @click="toggleMenu">
+ <i class="fas fa-caret-down fa-sm"></i>
+ </button>
+ </div>
+ </div>
+ <div
+ class="dropdown__menu"
+ v-show="showMenu"
+ >
+ <slot name="menu"></slot>
+ </div>
+ </div>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ showMenu: false
+ }
+ },
+
+ methods: {
+ toggleMenu() {
+ this.showMenu = !this.showMenu
+ },
+
+ closeMenu() {
+ this.showMenu = false
+ }
+ }
+ }
+</script>

MODIFY
resources/assets/sass/app.scss
resources/assets/sass/app.scss
@@ -88,3 +88,45 @@ canvas {
font-size: 14px;
font-style: italic;
}
+
+.button-dropdown {
+ border-radius: $dimensions-box-border-radius;
+
+ .button-dropdown__section {
+ &:first-child {
+ border-top-left-radius: $dimensions-box-border-radius;
+ border-bottom-left-radius: $dimensions-box-border-radius;
+ }
+
+ &:last-child {
+ border-top-right-radius: $dimensions-box-border-radius;
+ border-bottom-right-radius: $dimensions-box-border-radius;
+ }
+
+ &:hover {
+ background: rgba(0, 0, 0, .1);
+ }
+
+ a, button {
+ display: block;
+ padding: 5px 10px;
+ color: #FFF;
+ font-size: 14px;
+ font-weight: 600;
+ }
+
+ button {
+ height: 100%;
+ background: none;
+ border: none;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &:focus {
+ outline: 0;
+ }
+ }
+ }
+}

MODIFY
resources/assets/sass/components/input.scss
resources/assets/sass/components/input.scss
@@ -141,11 +141,14 @@ button.button {
}
}
+.button, .button-dropdown {
+ background: $colors-primary;
+}
+
.button {
padding: 10px 20px;
display: inline-block;
font-size: 14px;
font-weight: 600;
color: #FFF;
- background: $colors-primary;
}

MODIFY
resources/views/layout.blade.php
resources/views/layout.blade.php
</ul>
<ul class="navigation__menu">
<li>
- <dropdown>
- <span slot="button">
- <i class="far fa-plus"></i> <i class="fas fa-caret-down fa-sm"></i>
- </span>
+ <button-dropdown>
+ <a slot="button" href="/transactions/create">{{ __('actions.create') }} {{ __('models.transaction') }}</a>
<ul slot="menu" v-cloak>
- <li>
- <a href="/transactions/create">{{ __('actions.create') }} {{ __('models.transaction') }}</a>
- </li>
<li>
<a href="/tags/create">{{ __('actions.create') }} {{ __('models.tag') }}</a>
</li>
<a href="/imports/create">{{ __('actions.create') }} {{ __('models.import') }}</a>
</li>
</ul>
- </dropdown>
+ </button-dropdown>
</li>
<li>
<a href="/activities">

Create ButtonDropdown component and use it in layout view