Add support for dropdowns in navigation
MODIFY
resources/assets/sass/app.scss
resources/assets/sass/app.scss
@@ -101,3 +101,32 @@ canvas {
}
}
}
+
+.dropdown {
+ position: relative;
+}
+
+ul.dropdown__list {
+ position: absolute;
+ top: 60px;
+ right: 16px;
+ padding: 10px 0;
+ display: none;
+ flex-direction: column;
+ min-width: 140px;
+ list-style: none;
+ background: #FFF;
+ box-shadow: 0 0 10px rgba(0, 0, 0, .1);
+ border-radius: 5px;
+
+ li a {
+ padding: 5px 10px;
+ display: block;
+ white-space: nowrap;
+
+ &:hover {
+ color: #FFF;
+ background: $colors-primary;
+ }
+ }
+}

MODIFY
resources/assets/sass/components/navigation.scss
resources/assets/sass/components/navigation.scss
justify-content: space-between;
}
- ul {
+ .navigation__menu {
margin: 0 -16px;
list-style: none;
display: flex;
- li {
+ > li {
padding: 28px 16px;
- a {
+ > a {
color: $colors-text;
&:hover, &.active {

MODIFY
resources/views/layout.blade.php
resources/views/layout.blade.php
@if (Auth::check())
<div class="navigation">
<div class="wrapper">
- <ul>
+ <ul class="navigation__menu">
<li>
<a href="/dashboard" {!! (Request::path() == 'dashboard') ? 'class="active"' : '' !!}><i class="fa fa-home"></i> @lang('general.dashboard')</a>
</li>
<a href="/reports" {!! (Request::path() == 'reports') ? 'class="active"' : '' !!}><i class="fa fa-pie-chart"></i> Reports</a>
</li>
</ul>
- <ul>
+ <ul class="navigation__menu">
+ <li class="dropdown">
+ <a href="#" class="dropdown__toggle">
+ <i class="fa fa-plus"></i> <i class="fa fa-caret-down"></i>
+ </a>
+ <ul class="dropdown__list">
<li>
- <a href="/settings" {!! (Request::path() == 'settings') ? 'class="active"' : '' !!}><i class="fa fa-cog"></i> @lang('general.settings')</a>
+ <a href="/earnings/create">New earning</a>
</li>
<li>
- <a href="/logout"><i class="fa fa-power-off"></i> @lang('general.logout')</a>
+ <a href="/spendings/create">New spending</a>
+ </li>
+ </ul>
+ </li>
+ <li class="dropdown">
+ <a href="#" class="dropdown__toggle">
+ <i class="fa fa-user"></i> <i class="fa fa-caret-down"></i>
+ </a>
+ <ul class="dropdown__list">
+ <li>
+ <a href="/settings">Settings</a>
+ </li>
+ <li>
+ <a href="/logout">Log out</a>
+ </li>
+ </ul>
</li>
</ul>
</div>
</div>
<script src="/js/app.js"></script>
@yield('scripts')
+ <script>
+ var dropdowns = document.querySelectorAll('.dropdown__toggle');
+
+ for (var i = 0; i < dropdowns.length; i ++) {
+ var a = dropdowns[i];
+
+ trigger(a);
+ }
+
+ function trigger(el) {
+ el.addEventListener('click', function (e) {
+ e.preventDefault();
+
+ closeAll(el);
+
+ var parent = e.target.parentNode;
+
+ if (parent.nodeName != 'LI') {
+ parent = parent.parentNode;
+ }
+
+ var x = parent.querySelector('.dropdown__list');
+
+ if (x.style.display == 'flex') {
+ x.style.display = 'none';
+ } else {
+ x.style.display = 'flex';
+ }
+ });
+ }
+
+ function closeAll(skip) {
+ for (var i = 0; i < dropdowns.length; i ++) {
+ if (dropdowns[i] != skip) {
+ dropdowns[i].parentNode.querySelector('.dropdown__list').style.display = 'none';
+ }
+ }
+ }
+ </script>
</body>
</html>

Add support for dropdowns in navigation