fix(overflow in dashboard, sidebar animation)

- add sidebar open close animation in broker control panel
- fix overflow issue in broker dashboard page

app/Http/Controllers/ExplorePageController.php

@@ -51,7 +51,7 @@ protected function deals(?ExplorePageFilters $sortBy)
             $query->orderBy('total_redirection', 'desc');
         } else {
             $query->orderByRaw(
-                '(COALESCE(total_likes, 0) / 70.0) + (COALESCE(total_redirection, 0) / 30.0) DESC'
+                '((COALESCE(total_likes, 0) * 70.0)/100.0) + ((COALESCE(total_redirection, 0) * 30.0)/100.0) DESC'
             );
         }
 

resources/js/nav-menu.js

@@ -4,13 +4,13 @@ const mobileMenu = document.getElementById('mobileMenu');
 const body = document.body;
 
 openBtn.addEventListener('click', () => {
-    mobileMenu.classList.remove('translate-x-[100vw]');
+    mobileMenu.classList.remove('translate-x-full');
     mobileMenu.classList.add('translate-x-0');
     body.style.overflow = 'hidden';
 })
 
 closeBtn.addEventListener('click', () => {
-    mobileMenu.classList.add('translate-x-[100vw]');
+    mobileMenu.classList.add('translate-x-full');
     mobileMenu.classList.remove('translate-x-0');
     body.style.overflow = 'visible';
 })

resources/js/sidebar.js

@@ -1,26 +1,23 @@
-const sidebar = document.getElementById('sidebar');
 const sidebarWrapper = document.getElementById('sidebarWrapper');
-const openBtn = document.getElementById('openSidebarBtn')
-const closeBtn = document.getElementById('closeSidebarBtn')
+const closeBtn = document.getElementById('closeSidebarBtn');
+const openBtn = document.getElementById('openSidebarBtn');
+const sidebarTexts = document.querySelectorAll('.sidebar-text');
+closeBtn.addEventListener('click', () => {
+    sidebarWrapper.classList.remove('w-64');
+    sidebarWrapper.classList.add('w-20');
 
-const classList = ['md:w-50', 'lg:w-60'];
+    closeBtn.classList.add('hidden');
+    openBtn.classList.remove('hidden');
 
-openBtn.addEventListener('click', () => openSidebar());
-closeBtn.addEventListener('click', () => closeSidebar());
+    sidebarTexts.forEach(el => el.classList.add('opacity-0'));
+});
 
-function openSidebar() {
-    classList.forEach(cl => sidebarWrapper.classList.toggle(cl))
+openBtn.addEventListener('click', () => {
+    sidebarWrapper.classList.remove('w-20');
+    sidebarWrapper.classList.add('w-64');
 
-    sidebar.classList.toggle('hidden');
+    openBtn.classList.add('hidden');
+    closeBtn.classList.remove('hidden');
 
-    closeBtn.classList.toggle('hidden')
-    openBtn.classList.toggle('hidden')
-}
-
-function closeSidebar() {
-    classList.forEach(cl => sidebarWrapper.classList.toggle(cl))
-    openBtn.classList.toggle('hidden')
-    closeBtn.classList.toggle('hidden')
-
-    sidebar.classList.toggle('hidden');
-}
+    sidebarTexts.forEach(el => el.classList.remove('opacity-0'));
+});

resources/views/components/dashboard/broker/layout.blade.php

@@ -1,10 +1,10 @@
 @props(['title' => ''])
 <x-layout :title="$title">
-    <div class="flex h-screen overflow-hidden">
-        <x-dashboard.broker.sidebar class="hidden shrink-0 md:w-50 lg:w-60 md:block md:h-screen"
+    <div class="flex h-screen overflow-x-hidden">
+        <x-dashboard.broker.sidebar class="hidden shrink-0 md:block md:h-screen"
                                     active-class="bg-linear-120 from-[#1a55ed] to-[#9b1cff] text-white"/>
         <section
-            class=" flex flex-col space-y-4 md:space-y-8 bg-[#F9FAFB] overflow-y-auto h-screen w-full">
+            class=" flex flex-col space-y-4 md:space-y-8 bg-[#F9FAFB] overflow-y-auto overflow-x-hidden h-screen w-full">
 
             {{$heading ?? ''}}
 

resources/views/components/dashboard/broker/navbar.blade.php

@@ -15,7 +15,7 @@
 </nav>
 
 <!-- mobile menu btn-->
-<div id='mobileMenu' class="translate-x-[100vw] absolute top-0 h-[101vh] overflow-y-hidden w-[101vw] bg-gray-200 text-xl z-1 p-10 transition-transform duration-500 ease-in-out">
+<div id='mobileMenu' class="fixed top-0 left-0 z-100 h-screen w-full translate-x-full bg-gray-200 p-10 text-xl transition-transform duration-500 ease-in-out overflow-y-auto">
     <div class="flex justify-between mb-8">
         <x-logo/>
         <x-ui.button id="closeBtn">

resources/views/components/dashboard/broker/sidebar/index.blade.php

@@ -1,54 +1,56 @@
 @props(['activeClass' => 'bg-gray-100 text-gray-900'])
-<div id="sidebarWrapper" {{$attributes->merge([ 'class' => 'border-r border-r-gray-300 '])}}>
+
+<div id="sidebarWrapper" {{$attributes->merge([ 'class' => 'border-r border-r-gray-300 transition-all duration-300 ease-in-out w-64 relative'])}}>
     <div class="hidden md:flex h-screen items-center">
-        <div id="sidebar" class="flex flex-col p-4 pt-6 justify-between font-medium w-full h-full">
+        <div id="sidebar" class="flex flex-col p-4 pt-6 justify-between font-medium h-full w-full overflow-hidden transition-all duration-300 ease-in-out">
             <div class="">
-                <div class="flex space-x-3 border-b border-b-gray-300 pb-6">
+                <div class="flex space-x-4 border-b border-b-gray-300 pb-6">
                     <x-logo/>
-                    <a href="{{route('home')}}" class="">
+                    <a href="{{route('home')}}" class="whitespace-nowrap">
                         <p class="text-2xl font-bold">DealHub</p>
                         <p class="text-accent-600 text-sm">Broker Panel</p>
                     </a>
                 </div>
-                <div class="pt-6 flex flex-col space-y-3">
+
+                <div class="pt-6 flex flex-col space-y-3 whitespace-nowrap">
                     <x-dashboard.broker.sidebar.item :link="route('broker.dashboard')">
-                        <x-heroicon-o-squares-2x2 class="w-5"/>
-                        <p>Dashboard</p>
+                        <x-heroicon-o-squares-2x2 class="min-w-5 w-5"/>
+                        <p class="sidebar-text transition-opacity duration-300 ease-in-out ">Dashboard</p>
                     </x-dashboard.broker.sidebar.item>
 
                     <x-dashboard.broker.sidebar.item :link="route('broker.deals.create')">
-                        <x-heroicon-o-plus class="w-5"/>
-                        <p>Create Deals</p>
+                        <x-heroicon-o-plus class="w-5 min-w-5"/>
+                        <p class="sidebar-text transition-opacity duration-300 ease-in-out ">Create Deals</p>
                     </x-dashboard.broker.sidebar.item>
 
                     <x-dashboard.broker.sidebar.item :link="route('broker.deals.index')">
-                        <x-heroicon-o-document-text class="w-5"/>
-                        <p>All Deals</p>
+                        <x-heroicon-o-document-text class="w-5 min-w-5"/>
+                        <p class="sidebar-text transition-opacity duration-300 ease-in-out">All Deals</p>
                     </x-dashboard.broker.sidebar.item>
                 </div>
             </div>
 
             <div class="">
                 <x-dashboard.broker.sidebar.item :link="route('broker.profile.show', auth()->user()->id)">
-                    <x-heroicon-o-user class="w-5"/>
-                    <p>Profile</p>
+                    <x-heroicon-o-user class="w-5 min-w-5"/>
+                    <p class="sidebar-text transition-opacity duration-300 ease-in-out">Profile</p>
                 </x-dashboard.broker.sidebar.item>
 
                 <form method="post" action="{{route('logout')}}">
                     @csrf
                     @method('delete')
-                    <button class="py-3 px-4 border border-white hover:bg-red-50 hover:border-red-200 rounded-xl w-full mt-4 active:scale-80 cursor-pointer transition-all duration-300 ease-in-out">
-                        <div class="flex space-x-2 items-center text-red-500">
-                            <x-heroicon-o-arrow-right-start-on-rectangle class="w-6"/>
-                            <p>Logout</p>
+                    <button class="py-3 pl-3 border border-white hover:bg-red-50 hover:border-red-200 rounded-xl w-full mt-4 transition-all">
+                        <div class="flex space-x-3 items-center text-red-500">
+                            <x-heroicon-o-arrow-right-start-on-rectangle class="w-5 min-w-5"/>
+                            <p class="sidebar-text transition-opacity duration-300 ease-in-out">Logout</p>
                         </div>
                     </button>
                 </form>
             </div>
         </div>
 
-        {{-- Open / Close button--}}
-        <div class="text-gray-500 cursor-pointer hover:text-gray-900">
+        {{-- Toggle Button --}}
+        <div class="text-gray-500 cursor-pointer hover:text-gray-900 rounded-full p-1.5 bg-white border border-gray-300 absolute -right-3.5 top-21">
             <x-heroicon-c-chevron-left id="closeSidebarBtn" class="w-4"/>
             <x-heroicon-c-chevron-right id="openSidebarBtn" class="w-4 hidden"/>
         </div>

resources/views/components/dashboard/broker/sidebar/item.blade.php

@@ -1,5 +1,5 @@
 @props([ 'link' => ''])
 @aware(['activeClass' => 'bg-gray-100 text-gray-900'])
-<a href="{{$link}}" {{$attributes->class(["flex space-x-3 items-center py-3 px-4 rounded-xl hover:bg-gray-100 border border-white ease-in-out transition-all duration-300 active:scale-80 hover:border-gray-300", $activeClass => url()->current() == $link])}} >
+<a href="{{$link}}" {{$attributes->class(["flex space-x-3 items-center pl-3 py-3 rounded-xl hover:bg-gray-100 border border-transparent ease-in-out transition-all duration-300 active:scale-80 hover:border-gray-300", $activeClass => url()->current() == $link])}} >
     {{$slot}}
 </a>