Merge pull request #84 from devaslanphp/dev

Design enhancement: Main menu

Author: heloufir

package-lock.json

@@ -28,6 +28,7 @@
         "flowbite": "^1.5.3",
         "jquery": "^3.6.1",
         "magnific-popup": "^1.1.0",
-        "sass": "^1.54.9"
+        "sass": "^1.54.9",
+        "tippy.js": "^6.3.7"
     }
 }

package.json

@@ -3,6 +3,9 @@ import './bootstrap';
 import jQuery from '$';
 import 'flowbite';
 
+import tippy from 'tippy.js';
+import 'tippy.js/dist/tippy.css';
+
 import '@fortawesome/fontawesome-free/scss/fontawesome.scss';
 import '@fortawesome/fontawesome-free/scss/brands.scss';
 import '@fortawesome/fontawesome-free/scss/regular.scss';
@@ -67,3 +70,10 @@ window.unsecuredCopyToClipboard = function (text) {
     }
     document.body.removeChild(textArea);
 }
+
+// Tippy helper
+window.makeTippy = function (selector, title) {
+    tippy(selector, {
+        content: title,
+    });
+}

resources/js/app.js

@@ -38,21 +38,36 @@
                         <li>
                             <a
                                 href="{{ route($key) }}"
+                                id="{{ $key }}"
                                 class="relative flex items-center justify-between gap-2 py-2 px-3 text-base rounded-lg dark:text-white {{ (Route::is($key) || Route::is($key . '.*')) ? 'text-white bg-primary-500 font-medium' : 'text-gray-500 font-normal hover:bg-gray-100 dark:hover:bg-gray-700' }}">
-                                <span>@lang($value['title'])</span>
                                 <div class="relative">
                                     <i class="fa {{ $value['icon'] }}"></i>
                                     @if($value['show_notification_indicator'] && auth()->user()->unreadNotifications()->count())
                                         <i class="fa fa-circle fa-beat-fade {{ (Route::is($key) || Route::is($key . '.*')) ? 'text-white' : 'text-primary-500' }} absolute -right-1" style="font-size: .4rem; --fa-beat-fade-opacity: .65; --fa-beat-fade-scale: 1.075;"></i>
                                     @endif
                                 </div>
+                                @if((Route::is($key) || Route::is($key . '.*')))
+                                    <span>@lang($value['title'])</span>
+                                @endif
                             </a>
                         </li>
                     @endif
                 @endforeach
             </ul>
         </div>
     </div>
+
+    @push('scripts')
+        <script>
+            window.addEventListener('load', () => {
+                @foreach($menu as $key => $value)
+                    @if(!(Route::is($key) || Route::is($key . '.*')))
+                        window.makeTippy('#{{ $key }}', '{{ $value['title'] }}');
+                    @endif
+                @endforeach
+            })
+        </script>
+    @endpush
 </nav>
 {{--