Initial commit

resources/views/livewire/partials/_nested_index.blade.php

@@ -0,0 +1,56 @@
+{{-- _nested_index.blade.php --}}
+
+@if($category->children->isNotEmpty())
+<div class="mb-1  border-b pb-2 ">
+    <div class="flex items-center justify-between cursor-pointer mb-2     py-1 rounded">
+        <a href="{{ route('CategoryBlog.index', ['slug' => $category->slug]).'/' }}" wire:navigate class="   text-sm font-medium gap-1  flex items-center  mt-1  ">
+            @if (!is_null($category->image_url))
+            <img class="w-8 h-8 rounded" src="{{asset('image').'/'.$category->image_url}}" alt="">
+            @endif
+            <span>{{ $category->title }}</span>
+        </a>
+
+
+        <button x-show="loadingNested != {{$category->id}}" type="button" :disabled="loadingFetch" class="flex items-center justify-center rounded-full bg-gray-100 p-2 me-2 cursor-pointer" @click.prevent=" fetchCategoryBlogs('{{ $category->id }}', '{{ $topLevelCategory->id }}'); showLoadingAnimation('{{ $category->id }}', 'loading-anim-{{ $category->id }}') ">
+            <img class="w-5 h-5" src="{{asset('image/wizard-stick.svg')}}" alt="">
+        </button>
+        <div id="loading-anim-{{$category->id}}" class="flex items-center justify-center rounded-full bg-gray-100 p-2 me-2 cursor-pointer" x-show="loadingNested == {{$category->id}}">
+        </div>
+    </div>
+
+    <div class="pl-4  flex items-center gap-2 ">
+
+        @foreach($category->children->sortByDesc('priority') as $child)
+        <a href="{{ route('CategoryBlog.index', ['slug' => $child->slug]).'/' }}" wire:navigate class="  text-sm font-medium gap-1  flex items-center bg-gray-100 rounded-lg px-1 py-1 mt-1  ">
+            @if (!is_null($child->image_url))
+            <img class="w-8 h-8 rounded" src="{{asset('image').'/'.$child->image_url}}" alt="">
+            @endif
+            <span>{{ $child->title }}</span>
+        </a>
+        @if($child->children->isNotEmpty())
+        <div class="pl-4    ">
+            @foreach($child->children->sortByDesc('priority') as $grandchild)
+            <a href="{{ route('CategoryBlog.index', ['slug' => $grandchild->slug]) .'/'}}" wire:navigate
+                class="block px-3 py-1  text-sm  rounded mb-1">
+                {{ $grandchild->title }}
+            </a>
+            @endforeach
+        </div>
+        @endif
+        @endforeach
+    </div>
+</div>
+@else
+<div class="  border-b  flex justify-between items-center mb-1 mt-1 py-1 ">
+    <a href="{{ route('CategoryBlog.index', ['slug' => $category->slug]).'/' }}" wire:navigate
+        class=" block  text-sm    w-full  ">
+        <span>{{ $category->title }}</span>
+    </a>
+
+    <button x-show="loadingNested != {{$category->id}}" type="button" :disabled="loadingFetch" class="flex items-center justify-center rounded-full bg-gray-100 p-2 me-2 cursor-pointer" @click.prevent=" fetchCategoryBlogs('{{ $category->id }}', '{{ $topLevelCategory->id }}'); showLoadingAnimation('{{ $category->id }}', 'loading-anim-{{ $category->id }}') ">
+        <img class="w-5 h-5" src="{{asset('image/wizard-stick.svg')}}" alt="">
+    </button>
+    <div id="loading-anim-{{$category->id}}" class="flex items-center justify-center rounded-full bg-gray-100 p-2 me-2 cursor-pointer" x-show="loadingNested == {{$category->id}}">
+    </div>
+</div>
+@endif