From 68e576e60d9cd8fa9250a7f147151079708a17a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=BCneyt=20=C5=9Eent=C3=BCrk?= <cneytsenturk@gmail.com>
Date: Fri, 22 Nov 2024 17:44:25 +0000
Subject: [PATCH] dashboard slider styling..

---
 .../assets/js/views/common/dashboards.js      | 35 ++++++++++++++-
 .../views/common/dashboards/show.blade.php    | 44 +++++++++++--------
 2 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/resources/assets/js/views/common/dashboards.js b/resources/assets/js/views/common/dashboards.js
index 944109395..ebd0c647e 100644
--- a/resources/assets/js/views/common/dashboards.js
+++ b/resources/assets/js/views/common/dashboards.js
@@ -77,6 +77,19 @@ const dashboard = new Vue({
         scrollRight.addEventListener('click', () => scrollToItem('right'));
 
         function scrollToItem(direction) {
+            if (direction == 'right') {
+                scrollLeft.classList.add('text-purple');
+                scrollLeft.classList.remove('text-purple-200');
+                scrollLeft.removeAttribute('disabled');
+            }
+
+            if (direction == 'left') {
+                scrollRight.classList.add('text-purple');
+                scrollRight.classList.remove('text-purple-200');
+
+                scrollRight.removeAttribute('disabled');
+            }
+
             const visibleItems = Array.from(slider.children);
             const sliderRect = slider.getBoundingClientRect();
 
@@ -88,10 +101,29 @@ const dashboard = new Vue({
 
             const nextIndex = direction === 'right' ? currentIndex + 1 : currentIndex - 1;
 
+            if (nextIndex == 0) {
+                scrollLeft.classList.add('text-purple-200');
+                scrollLeft.classList.remove('text-purple');
+
+                scrollLeft.setAttribute('disabled', 'disabled');
+            }
+
             if (nextIndex >= 0 && nextIndex < visibleItems.length) {
                 const nextItem = visibleItems[nextIndex];
 
-                slider.scrollBy({ left: nextItem.getBoundingClientRect().left - sliderRect.left, behavior: 'smooth' });
+                slider.scrollBy({ 
+                    left: nextItem.getBoundingClientRect().left - sliderRect.left,
+                    behavior: 'smooth'
+                });
+            }
+
+            const tolerance = 5; // Pixel tolerance
+
+            if (slider.scrollLeft + slider.clientWidth >= slider.scrollWidth - tolerance) {
+                scrollRight.classList.add('text-purple-200');
+                scrollRight.classList.remove('text-purple');
+
+                scrollRight.setAttribute('disabled', 'disabled');
             }
         }
 
@@ -101,6 +133,7 @@ const dashboard = new Vue({
 
             if (sliderWidth <= 850) {
                 slider.parentElement.classList.remove('w-9/12', 'w-8/12');
+
                 scrollLeft.classList.add('hidden');
                 scrollRight.classList.add('hidden');
             } else {
diff --git a/resources/views/common/dashboards/show.blade.php b/resources/views/common/dashboards/show.blade.php
index 7081c0a65..5d0d9e25a 100644
--- a/resources/views/common/dashboards/show.blade.php
+++ b/resources/views/common/dashboards/show.blade.php
@@ -114,24 +114,30 @@
     <x-slot name="content">
         <div class="flex flex-col lg:flex-row justify-between items-start border-b pt-8">
             <div class="flex">
-                <button type="button" id="dashboard-left" class="material-icons-outlined text-purple bg-body -mr-3">chevron_left</button>
-    
-                <div id="dashboard-slider" class="flex space-x-10 overflow-scroll hide-scroll-bar">
-                    @foreach ($user_dashboards as $user_dashboard)
-                        <li 
-                            id="show-dashboard-switch-{{ $user_dashboard->id }}"
-                            class="relative flex-auto px-4 text-sm text-center pb-2 pt-1 cursor-pointer transition-all whitespace-nowrap list-none tabs-link"
-                            x-bind:class="active != 'show-dashboard-switch-{{ $user_dashboard->id }}' ? 'text-black' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
-                            style="margin-left:10px !important;"
-                        >
-                            <a href="{{ route('dashboards.switch', $user_dashboard->id) }}">
-                                {{ $user_dashboard->name }}
-                            </a>
-                        </li>
-                    @endforeach
-                </div>
-    
-                <button type="button" id="dashboard-right" class="material-icons-outlined text-purple bg-body mr-1">chevron_right</button>
+                @if ($user_dashboards->count() > 1)
+                    <button type="button" id="dashboard-left" disabled="disabled" class="material-icons-outlined text-purple-200 bg-body -mr-3 mr-1">chevron_left</button>
+
+                    <div id="dashboard-slider" class="flex space-x-10 overflow-scroll hide-scroll-bar">
+                        @foreach ($user_dashboards as $user_dashboard)
+                            <li 
+                                id="show-dashboard-switch-{{ $user_dashboard->id }}"
+                                class="relative flex-auto px-2 text-sm text-center pb-2 pt-1 cursor-pointer transition-all whitespace-nowrap list-none tabs-link"
+                                x-bind:class="active != 'show-dashboard-switch-{{ $user_dashboard->id }}' ? 'text-black' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
+                                @if ($loop->first)
+                                style="margin-left:0px !important;"
+                                @else
+                                style="margin-left:10px !important;"
+                                @endif
+                            >
+                                <a href="{{ route('dashboards.switch', $user_dashboard->id) }}">
+                                    {{ $user_dashboard->name }}
+                                </a>
+                            </li>
+                        @endforeach
+                    </div>
+
+                    <button type="button" id="dashboard-right" class="material-icons-outlined text-purple bg-body ml-1 mr-1">chevron_right</button>
+                @endif
             </div>
 
             <div class="flex col-span-3 ml-6 text-right">
@@ -164,4 +170,4 @@
     </x-slot>
 
     <x-script folder="common" file="dashboards" />
-</x-layouts.admin>
\ No newline at end of file
+</x-layouts.admin>