added hidden sidebar theme part

optimized pages thumb image

resources/views/segments/product_grid/DefaultProductGrid/DefaultProductGrid.blade.php

@@ -1,4 +1,4 @@
-<div class="DefaultProductGrid">
+<div class="DefaultProductGrid xshop-product-item">
     <a class="fav-btn" data-slug="{{$product->slug}}" data-is-fav="{{$product->isFav()}}"
        data-bs-custom-class="custom-tooltip"
        data-bs-toggle="tooltip" data-bs-placement="auto" title="{{__("Add to / Remove from favorites")}}">
@@ -12,7 +12,7 @@
         <i class="ri-scales-3-line"></i>
     </a>
     <a href="{{$product->webUrl()}}">
-        <img src="{{$product->imgUrl()}}" alt="{{$product->name}}" loading="lazy">
+        <img src="{{$product->thumbUrl()}}" alt="{{$product->name}}" loading="lazy">
         <h3>
             {{$product->name}}
         </h3>

resources/views/segments/product_grid/MinooProductGrid/MinooProductGrid.blade.php

@@ -1,7 +1,7 @@
-<div class="MinooProductGrid">
+<div class="MinooProductGrid xshop-product-item">
     <a href="{{$product->webUrl()}}">
-        <img src="{{$product->imgUrl()}}" alt="{{$product->name}}" loading="lazy">
+        <img src="{{$product->thumbUrl()}}" alt="{{$product->name}}" loading="lazy">
-        <img src="{{$product->imgUrl2()}}" class="img-2" alt="{{$product->name}}" loading="lazy">
+        <img src="{{$product->thumbUrl2()}}" class="img-2" alt="{{$product->name}}" loading="lazy">
         <div class="">
             <div class="btns">
                 <a href="{{ route('client.product-card-toggle',$product->slug) }}"

resources/views/segments/product_grid/ShivaProductGrid/ShivaProductGrid.blade.php

@@ -1,4 +1,4 @@
-<section class='ShivaProductGrid'>
+<section class='ShivaProductGrid xshop-product-item'>
     <a class="fav-btn" data-slug="{{$product->slug}}" data-is-fav="{{$product->isFav()}}"
        data-bs-custom-class="custom-tooltip"
        data-bs-toggle="tooltip" data-bs-placement="auto" title="{{__("Add to / Remove from favorites")}}">
@@ -12,7 +12,7 @@
         <i class="ri-scales-3-line"></i>
     </a>
     <a href="{{$product->webUrl()}}">
-        <img src="{{$product->imgUrl()}}" alt="{{$product->name}}" loading="lazy">
+        <img src="{{$product->thumbUrl()}}" alt="{{$product->name}}" loading="lazy">
         <h3>
             {{$product->name}}
         </h3>

resources/views/segments/products_page/ProductGridHiddenSidebar/ProductGridHiddenSidebar.blade.php

@@ -0,0 +1,28 @@
+<section class='ProductGridHiddenSidebar'>
+    <div class="{{gfx()['container']}}">
+        <h1>
+            {{$title}}
+
+            <div class="btn btn-dark" id="filter-btn-show" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="custom-tooltip"
+                 data-bs-title="{{__("Sort & filter")}}">
+                <i class="ri-sort-desc"></i>
+            </div>
+        </h1>
+
+        <div id="hidden-sidebar">
+            @include('segments.products_page.ProductGridHiddenSidebar.inc.product-sidebar-filter')
+        </div>
+
+        <div class="py-3">
+            <div class="row">
+                @foreach($products as $product)
+                    <div class="col-md-4 p-2">
+                        @include(\App\Models\Area::where('name','product-grid')->first()->defPart(),compact('product'))
+                    </div>
+                @endforeach
+            </div>
+            {{$products->withQueryString()->links()}}
+
+        </div>
+    </div>
+</section>

resources/views/segments/products_page/ProductGridHiddenSidebar/ProductGridHiddenSidebar.js

@@ -0,0 +1,10 @@
+document.addEventListener('DOMContentLoaded',function () {
+    document.querySelector('#filter-btn-show')?.addEventListener('click',function () {
+      document.querySelector('#hidden-sidebar').style.display = 'block';
+    });
+    document.querySelector('#hidden-sidebar')?.addEventListener('click',function (e) {
+        if (e.target  == document.querySelector('#hidden-sidebar') ) {
+            document.querySelector('#hidden-sidebar').style.display = 'none';
+        }
+    });
+});

resources/views/segments/products_page/ProductGridHiddenSidebar/ProductGridHiddenSidebar.json

@@ -0,0 +1,10 @@
+{
+    "name": "ProductGridHiddenSidebar",
+    "version": "1.0",
+    "author": "xStack",
+    "email": "xshop@xstack.ir",
+    "license": "GPL-3.0-or-later",
+    "url": "https:\/\/xstack.ir",
+    "author_url": "https:\/\/4xmen.ir",
+    "packages": []
+}

resources/views/segments/products_page/ProductGridHiddenSidebar/ProductGridHiddenSidebar.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+
+class ProductGridHiddenSidebar
+{
+    public static function onAdd(Part $part = null)
+    {
+
+    }
+    public static function onRemove(Part $part = null)
+    {
+
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}

resources/views/segments/products_page/ProductGridHiddenSidebar/ProductGridHiddenSidebar.scss

@@ -0,0 +1,53 @@
+.ProductGridHiddenSidebar {
+
+
+
+    // scss
+    h1 {
+        font-size: 27px;
+        text-align: center;
+        background: var(--xshop-secondary);
+        color: var(--xshop-diff2);
+        margin: 1rem 0;
+        padding: .5rem;
+        font-weight: 200;
+        position: relative;
+
+        .btn {
+            position: absolute;
+            inset-inline-end: 0;
+            top: 0;
+            bottom: 0;
+            width: 75px;
+            i{
+                font-size: 25px;
+            }
+        }
+    }
+    #hidden-sidebar{
+        background: #ffffff44;
+        backdrop-filter: grayscale(1);
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        display: none;
+        z-index: 999;
+
+        aside{
+            width: 300px;
+            max-width: 95%;
+            background: var(--xshop-background);
+            position: absolute;
+            inset-inline-start: 0;
+            padding: 1rem;
+            box-sizing: border-box;
+            top: 0;
+            bottom: 0;
+            overflow-y: auto;
+            padding-top: 3rem;
+        }
+
+    }
+}

resources/views/segments/products_page/ProductGridHiddenSidebar/inc/product-sidebar-filter.blade.php

@@ -0,0 +1,16 @@
+<aside class="mt-2">
+    <div class="side-item">
+        <h4>
+            {{__("Filter")}}
+        </h4>
+        <div class="side-data">
+            <meta-filter
+                props-api-link="{{route('v1.category.prop','')}}/"
+                @if(isset($category))
+                    category="{{$category->id}}"
+                @endif
+            >
+            </meta-filter>
+        </div>
+    </div>
+</aside>