From cee87df542279650d0e8b382c233518b14231011 Mon Sep 17 00:00:00 2001
From: merve karaman <107546467+mervekaraman@users.noreply.github.com>
Date: Thu, 10 Oct 2024 21:09:33 +0300
Subject: [PATCH 1/2] Dashboard slider style

---
 resources/assets/js/mixins/global.js          | 26 +++++++++++
 .../views/common/dashboards/show.blade.php    | 46 +++++++++----------
 2 files changed, 48 insertions(+), 24 deletions(-)

diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js
index fc66494b7..192e7ef9e 100644
--- a/resources/assets/js/mixins/global.js
+++ b/resources/assets/js/mixins/global.js
@@ -258,8 +258,34 @@ export default {
             }
         }
         //swiper slider for long tabs items
+
+        const slider = document.getElementById('dashboard-slider');
+        const scrollLeft = document.getElementById('dashboard-left');
+        const scrollRight = document.getElementById('dashboard-right');
+        
+        scrollLeft.addEventListener('click', () => scrollToItem('left'));
+        scrollRight.addEventListener('click', () => scrollToItem('right'));
+
+        function scrollToItem(direction) {
+            const visibleItems = Array.from(slider.children);
+            const sliderRect = slider.getBoundingClientRect();
+
+            const currentIndex = visibleItems.findIndex(item => {
+                const itemRect = item.getBoundingClientRect();
+                return itemRect.left >= sliderRect.left && itemRect.right <= sliderRect.right;
+            });
+
+            const nextIndex = direction === 'right' ? currentIndex + 1 : currentIndex - 1;
+            if (nextIndex >= 0 && nextIndex < visibleItems.length) {
+                const nextItem = visibleItems[nextIndex];
+                slider.scrollBy({ left: nextItem.getBoundingClientRect().left - sliderRect.left, behavior: 'smooth' });
+            }
+        }
+        // Dashboard slider
     },
 
+
+
     methods: {
         // Check Default set notify > store / update action
         checkNotify: function () {
diff --git a/resources/views/common/dashboards/show.blade.php b/resources/views/common/dashboards/show.blade.php
index 81f5c1023..4d5c09cbe 100644
--- a/resources/views/common/dashboards/show.blade.php
+++ b/resources/views/common/dashboards/show.blade.php
@@ -106,31 +106,29 @@
     @endsection
 
     <x-slot name="content">
-        <div class="justify-between items-start border-b pt-8 grid sm:grid-cols-12">
-            <div class="space-x-10 col-span-9 -mx-8">
-                <x-tabs active="show-dashboard-switch-{{ $dashboard->id }}" class="mt-1">
-                    <x-slot name="navs">
-                        @foreach ($user_dashboards as $user_dashboard)
-                            <li 
-                                class="relative flex-auto px-4 text-sm text-center pb-2 cursor-pointer transition-all whitespace-nowrap tabs-link"
-                                id="show-dashboard-switch-{{ $user_dashboard->id }}"
-                                data-id="show-dashboard-switch-{{ $user_dashboard->id }}"
-                                data-tabs="{{ $user_dashboard->id }}"
-                                data-tabs-slide
-                                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'"
-                            >
-                                <a href="{{ route('dashboards.switch', $user_dashboard->id) }}">
-                                    {{ $user_dashboard->name }}
-                                </a>
-                            </li>
-                        @endforeach
-                    </x-slot>
-
-                    <x-slot name="content"></x-slot>
-                </x-tabs>
+        <div class="flex flex-col lg:flex-row justify-between items-start border-b pt-8">
+            <div class="flex w-9/12">
+                <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>
             </div>
 
-            <div class="col-span-3 ml-6 text-right">
+            <div class="flex flex-col lg:flex-row col-span-3 ml-6 text-right">
                 @can('create-common-widgets')
                     <x-button
                         type="button"
@@ -160,4 +158,4 @@
     </x-slot>
 
     <x-script folder="common" file="dashboards" />
-</x-layouts.admin>
+</x-layouts.admin>
\ No newline at end of file

From c7049427af4ace896c7d3424d35f97b670cc27f5 Mon Sep 17 00:00:00 2001
From: merve karaman <107546467+mervekaraman@users.noreply.github.com>
Date: Thu, 10 Oct 2024 21:15:42 +0300
Subject: [PATCH 2/2] Action buttons style fixed

---
 resources/views/common/dashboards/show.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/common/dashboards/show.blade.php b/resources/views/common/dashboards/show.blade.php
index 4d5c09cbe..235e84fad 100644
--- a/resources/views/common/dashboards/show.blade.php
+++ b/resources/views/common/dashboards/show.blade.php
@@ -143,7 +143,7 @@
                 @endcan
 
                 @can('create-common-dashboards')
-                    <x-link href="{{ route('dashboards.create') }}" override="class" class="relative flex-auto px-3 pb-2.5 h-8 text-purple text-sm font-medium tabs-link" id="show-more-actions-new-dashboard">
+                    <x-link href="{{ route('dashboards.create') }}" override="class" class="relative flex-auto px-3 pt-1 h-8 text-purple text-sm font-medium tabs-link" id="show-more-actions-new-dashboard">
                         {{ trans('general.title.new', ['type' => trans_choice('general.dashboards', 1)]) }}
                     </x-link>
                 @endcan