657 lines
42 KiB
PHP
657 lines
42 KiB
PHP
@push('style_css')
|
|
<style>
|
|
.widthSearch {
|
|
width: 50px;
|
|
transition: all .3s ease;
|
|
}
|
|
|
|
.activSearch {
|
|
width: 100% !important;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.fixed.inset-0 {
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
|
|
.max-h-[80vh]::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.max-h-[80vh]::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.max-h-[80vh]::-webkit-scrollbar-thumb {
|
|
background: #888;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.max-h-[80vh]::-webkit-scrollbar-thumb:hover {
|
|
background: #555;
|
|
}
|
|
|
|
</style>
|
|
@endpush
|
|
|
|
<div x-data="headerPartials">
|
|
|
|
<header id="main_header" @keydown.window.escape=" showbackdrop = false , searchbar = false " @keydown.window.slash=" showbackdrop = true , searchbar = true , openinput() " @mouseleave="newsList = false , blogsList = false " class="z-[3000] w-full border-b translate-y-0 border-slate-200 bg-white px-6 sm:px-6 fixed h-[80px] lg:fixed top-0 ">
|
|
<!-- Desktop Navigation -->
|
|
<div class="max-w-5xl mx-auto justify-center h-full ">
|
|
<div x-cloak x-show="searchbar == false" class="flex items-center justify-between h-full w-full">
|
|
|
|
<a @mouseenter="newsList = false , blogsList = false" href="{{ route('index').'/' }}" wire:navigate class=" lg:me-0 pe-5 select-none sm:flex sm:gap-4 sm:items-center z-20">
|
|
<img style="width:50px;" src="{{ env('APP_URL_IMAGE').'images/static/logo.png' }}" alt="مجله خبری سرمایه گذاری اهرم ">
|
|
<span class="h-[30px] w-[2px] bg-gray-300 "></span>
|
|
</a>
|
|
|
|
<div @mouseenter="newsList = false , blogsList = false" class=" md:hidden flex items-center space-x-2 space-x-reverse" style="align-items: center">
|
|
<button id="buttonsideM" @click=" searchbar = true , showbackdrop = true , openinput() " class="bg-gray-100 flex h-10 items-center justify-center pb-1 px-2 rounded-full w-10 z-20" type="button ">
|
|
<svg height="20px" width="20px" class="cursor-pointer mt-1 fill-[#61676e] " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path d="M368 208A160 160 0 1 0 48 208a160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button @click="btntogglesidebar = !btntogglesidebar , btntogglesidebar == true ? document.getElementById('bodyStyle').classList.add('overflow-hidden') : document.getElementById('bodyStyle').classList.remove('overflow-hidden') , btntogglesidebar == true ? console.log('') : (document.getElementById('sideCategoryMobile').classList.add('translate-x-full') , document.getElementById('sideCategoryNotBlogMobile').classList.add('translate-x-full')) " type="button" :class="btntogglesidebar == true ? 'pe-[.4rem]' : 'pb-1 px-2'" class="bg-gray-100 duration-300 flex h-10 items-center justify-center rounded-full transition-transform w-10 z-20" id="btnToggleMenu">
|
|
<svg :class="btntogglesidebar && 'rotate-90'" class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#334155" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="3" y1="10" x2="21" y2="10"></line>
|
|
<line x1="3" y1="20" x2="21" y2="20"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
@php
|
|
$countshow2 = 0;
|
|
// foreach ($categories as $item) {
|
|
// if (count($item->blogs()->where('status', 1)->get()) > 0) {
|
|
// $countshow2++;
|
|
// }
|
|
// }
|
|
$countshow2 = $categories->filter(fn($cat) => $cat->blogs->isNotEmpty())->count();
|
|
@endphp
|
|
|
|
@if ($countshow2 > 0)
|
|
<div wire:ignore.self @mouseleave="open = false, showbackdrop2 = false" class="relative 2xl:relative text-[16px] group px-[.6rem] md:flex items-center gap-1 hidden menu-link">
|
|
<div @mousemove=" open = true, firstItemOpen = true, showbackdrop2 = true , openfirstpart()" class="flex items-center h-[76px]">
|
|
<a href="#" wire:navigate class="flex items-center">
|
|
<h3 class=" text-black">مطالب</h3>
|
|
</a>
|
|
</div>
|
|
<svg class="hoverCancel" fill="#000" style="width:12px; height:12px; left: -50%; top: 30%;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
|
|
</svg>
|
|
|
|
<div wire:ignore.self x-show="open" class="absolute w-[200px] -right-[10%] top-[100%] pt-2 px-2 z-10">
|
|
<div wire:ignore.self @mouseleave=" openfirstpart()" class="bg-white shadow-lg rounded-md flex flex-col pb-2">
|
|
@foreach($blogCategoriesTree as $index => $category)
|
|
<div wire:ignore.self @mouseenter="newsList = false, blogsList = false, open = true @if ($index === 3 ) , openfirstpart() @else , closefirst() @endif " @if ($index===3 ) @else @mouseleave=" open = false" @endif x-data="{ open: false }" class="w-full h-[45px] text-[16px] {{ $index === 3 ? 'pt-2' : '' }} group md:flex items-center gap-1 hidden !text-gray-900 menu-link">
|
|
<div wire:ignore.self class="flex justify-between items-center w-full px-[.6rem]">
|
|
<a href="{{ route('CategoryBlog.index', ['slug' => $category->slug]).'/' }}" wire:navigate class="flex items-center">
|
|
<h3 class="block px-3 py-1 text-sm rounded mb-1">
|
|
{{ $category->title }}
|
|
</h3>
|
|
</a>
|
|
@if($category->children->isNotEmpty())
|
|
<svg class="hoverCancel" fill="#000" style="width:12px; height:12px; left: -50%; top: 30%; transform:rotate(90deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
|
|
</svg>
|
|
@endif
|
|
</div>
|
|
@if($category->children->isNotEmpty())
|
|
@php
|
|
$cats[] = $category->id;
|
|
@endphp
|
|
<div wire:ignore.self x-show="open" id="{{ $index === 3 ? 'needopen' : '' }}" class="px-4 max-h-[800px] grid grid-cols-2 gap-1 absolute right-[90%] min-h-[86%] top-[2.2%] z-10" style="width: max-content;">
|
|
<div wire:ignore.self class="flex flex-col overflow-auto max-h-[800px] bg-white shadow-lg rounded-md p-2 border min-w-[200px] w-[800px]">
|
|
<div wire:ignore class="">
|
|
@foreach($category->children->sortByDesc('priority') as $child)
|
|
@include('livewire.partials._nested_index', ['category' => $child, 'topLevelCategory' => $category])
|
|
@endforeach
|
|
</div>
|
|
@if(in_array($category->id, $loadedCategories))
|
|
<div class="mt-auto pt-2">
|
|
<div class="z-50 mb-4 w-fit flex items-center gap-2">
|
|
<h2 class="text-[14px] text-[#16205b] font-bold">
|
|
<span>برخی از مطالب این بخش</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<div wire:ignore.self class="grid grid-cols-2 items-start gap-2 relative pb-1 min-h-[210px]" x-show="!loadingStates['{{ $category->id }}'] && (!dynamicBlogs['{{ $category->id }}'] || dynamicBlogs['{{ $category->id }}'].length === 0)">
|
|
@forelse($categoryBlogs[$category->id] ?? [] as $blog)
|
|
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px]">
|
|
<a href="{{ route('detail', ['slug' => $blog->slug]) . '/' }}" wire:navigate class="relative w-[100px] h-[80px]">
|
|
<img class="w-[100px] h-[80px] border rounded-xl" src="{{ env('APP_URL_IMAGE').'images/'.$blog->image }}" alt="{{ $blog->subject }}">
|
|
</a>
|
|
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
|
<a style="line-height:28px" href="{{ route('detail', ['slug' => $blog->slug]) . '/' }}" wire:navigate class="text-[#005eb9] text-start font-bold text-[14px]">
|
|
{!! $blog->subject !!}
|
|
</a>
|
|
<div class="text-xs text-gray-400 flex flex-col justify-center text-[12px]">
|
|
{{ jdate($blog->published_at)->ago() }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="col-span-2 text-center py-4 text-gray-500">
|
|
هیچ مطلبی یافت نشد
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
|
|
<div class="grid grid-cols-2 items-start gap-2 relative pb-1 ">
|
|
|
|
<template x-if="loadingStates['{{ $category->id }}']">
|
|
<template x-for="(text, index) in displayTexts['{{ $category->id }}'] || []" :key="index">
|
|
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px]">
|
|
<div class="relative w-[100px] h-[80px] bg-gray-200 rounded-xl animate-pulse"></div>
|
|
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
|
<a style="line-height:28px" class="text-[#005eb9] text-start font-bold text-[14px]" x-text="text"></a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
<template x-if="!loadingStates['{{ $category->id }}'] && dynamicBlogs['{{ $category->id }}'] && dynamicBlogs['{{ $category->id }}'].length > 0">
|
|
<template x-for="blog in dynamicBlogs['{{ $category->id }}']" :key="blog.slug">
|
|
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px]">
|
|
<a :href="'/mag/' + blog.slug + '/'" wire:navigate class="relative w-[100px] h-[80px]">
|
|
<img class="w-[100px] h-[80px] border rounded-xl" :src="blog.image" :alt="blog.subject">
|
|
</a>
|
|
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
|
<a style="line-height:28px" :href="'/mag/' + blog.slug + '/'" wire:navigate class="text-[#005eb9] text-start font-bold text-[14px]" x-html="blog.subject"></a>
|
|
<div class="text-xs text-gray-400 flex flex-col justify-center text-[12px]">
|
|
<span x-text="new Date(blog.published_at).toLocaleDateString('fa-IR')"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="mt-auto pt-2">
|
|
<div class="z-50 mb-4 w-fit flex items-center gap-2">
|
|
<h2 class="text-[14px] text-[#16205b] font-bold">
|
|
<span>برخی از مطالب این بخش</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4" x-show="!loadingStates['{{ $category->id }}'] && (!dynamicBlogs['{{ $category->id }}'] || dynamicBlogs['{{ $category->id }}'].length === 0)">
|
|
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] animate-pulse">
|
|
<div class="w-[100px] h-[80px] bg-gray-200 rounded-xl"></div>
|
|
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
|
<div class="h-4 bg-gray-200 rounded"></div>
|
|
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] animate-pulse">
|
|
<div class="w-[100px] h-[80px] bg-gray-200 rounded-xl"></div>
|
|
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
|
<div class="h-4 bg-gray-200 rounded"></div>
|
|
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if ($category->slug == 'financial-markets')
|
|
<div class="flex flex-col border-t pt-2">
|
|
<div class="z-50 mb-4 w-fit flex items-center gap-2 gap-y-3">
|
|
<h2 class="text-[14px] text-[#16205b] font-bold">برترین مطالب این بخش</h2>
|
|
</div>
|
|
<div class="grid grid-cols-10 items-center gap-1 justify-evenly mt-2 mb-4">
|
|
<a href="{{route('detail' , ['slug' => 'what-is-ethereum']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
|
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-ethereum.svg'}}" alt="">
|
|
<h5 class="text-[14px]">اتریوم</h5>
|
|
</a>
|
|
<a href="{{route('detail' , ['slug' => 'what-is-bitcoin']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
|
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-bitcoin.svg'}}" alt="">
|
|
<h5 class="text-[14px]">بیتکوین</h5>
|
|
</a>
|
|
<a href="{{route('detail' , ['slug' => 'what-is-solana']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
|
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-solana.svg'}}" alt="">
|
|
<h5 class="text-[14px]">سولانا</h5>
|
|
</a>
|
|
<a href="{{route('detail' , ['slug' => 'what-is-tether']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
|
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-tether.svg'}}" alt="">
|
|
<h5 class="text-[14px]">تتر</h5>
|
|
</a>
|
|
<a href="{{route('detail' , ['slug' => 'what-is-bnb']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
|
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-bnb.svg'}}" alt="">
|
|
<h5 class="text-[14px]">بی ان بی</h5>
|
|
</a>
|
|
<a href="{{route('detail' , ['slug' => 'what-is-cardano']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
|
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-cardano.svg'}}" alt="">
|
|
<h5 class="text-[14px]">کاردانو</h5>
|
|
</a>
|
|
<a href="{{route('detail' , ['slug' => 'what-is-sui']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
|
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-sui.svg'}}" alt="">
|
|
<h5 class="text-[14px]">سویی</h5>
|
|
</a>
|
|
<a href="{{route('detail' , ['slug' => 'what-is-chainlink']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
|
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-chainlink.svg'}}" alt="">
|
|
<h5 class="text-[14px]">چینلینک</h5>
|
|
</a>
|
|
<a href="{{route('detail' , ['slug' => 'what-is-tron']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
|
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-tron.svg'}}" alt="">
|
|
<h5 class="text-[14px]">ترون</h5>
|
|
</a>
|
|
<a href="{{route('detail' , ['slug' => 'what-is-dogecoin']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
|
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-dogecoin.svg'}}" alt="">
|
|
<h5 class="text-[14px]">دوجکوین</h5>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@if ($category->slug == 'companies')
|
|
<div class="flex flex-col border-t pt-2">
|
|
<div class="z-50 mb-4 w-fit flex items-center gap-2 gap-y-3">
|
|
<h2 class="text-[14px] text-[#16205b] font-bold">برترین مطالب این بخش</h2>
|
|
</div>
|
|
<div class="grid grid-cols-8 items-center gap-1 justify-evenly mt-2 mb-4">
|
|
|
|
<a href="{{route('detail' , ['slug' => 'what-is-nvidia']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
|
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-nvidia.svg'}}" alt="">
|
|
<h5 class="text-[14px]">انویدیا</h5>
|
|
</a>
|
|
<a href="{{route('detail' , ['slug' => 'what-is-apple']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
|
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-apple.svg'}}" alt="">
|
|
<h5 class="text-[14px]">اپل</h5>
|
|
</a>
|
|
<a href="{{route('detail' , ['slug' => 'what-is-google']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
|
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-google.svg'}}" alt="">
|
|
<h5 class="text-[14px]">گوگل</h5>
|
|
</a>
|
|
<a href="{{route('detail' , ['slug' => 'what-is-tesla']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
|
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-tesla.svg'}}" alt="">
|
|
<h5 class="text-[14px]">تسلا</h5>
|
|
</a>
|
|
<a href="{{route('detail' , ['slug' => 'what-is-meta']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
|
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-meta.svg'}}" alt="">
|
|
<h5 class="text-[14px]">متا</h5>
|
|
</a>
|
|
<a href="{{route('detail' , ['slug' => 'what-is-microsoft']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
|
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-microsoft.svg'}}" alt="">
|
|
<h5 class="text-[14px]">مایکروسافت</h5>
|
|
</a>
|
|
<a href="{{route('detail' , ['slug' => 'what-is-amazon']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
|
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-amazon.svg'}}" alt="">
|
|
<h5 class="text-[14px]">آمازون</h5>
|
|
</a>
|
|
<a href="{{route('detail' , ['slug' => 'what-is-mcdonalds']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
|
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-mcdonalds.svg'}}" alt="">
|
|
<h5 class="text-[14px]">مکدونالد</h5>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@php
|
|
$countshow = 0;
|
|
// foreach ($categoriesNotBlog as $item) {
|
|
// if (count($item->blogs()->where('status', 1)->get()) > 0) {
|
|
// $countshow++;
|
|
// }
|
|
// }
|
|
$countshow = $categoriesNotBlog->filter(fn($cat) => $cat->blogs->isNotEmpty())->count();
|
|
@endphp
|
|
|
|
@if ($countshow > 0)
|
|
<div @mouseenter="newsList = false , blogsList = false , showbackdrop2 = false , document.querySelector('body').classList.remove('overflow-hidden') " x-data="{ open: false }" class="relative py-6 2xl:relative text-[16px] group px-[.6rem] md:flex items-center gap-1 hidden menu-link">
|
|
<div @mouseenter="open = true" @mouseleave="open = false" lass="flex items-center ">
|
|
<a href="#" wire:navigate class="flex items-center">
|
|
<h3 class=" text-black ">
|
|
اخبار
|
|
</h3>
|
|
</a>
|
|
</div>
|
|
<div x-transition x-show="open" @mouseenter="open = true" @mouseleave="open = false" class="absolute w-[200px] -right-[10%] top-[65%] py-9 px-2 z-10 ">
|
|
<div class="bg-white shadow-lg border rounded-md flex flex-col gap-3 py-2 ">
|
|
@foreach ($categoriesNotBlog->sortByDesc('priority') as $item)
|
|
@if (count($item->blog_category()) > 0)
|
|
@if (!is_null($item->parent_id))
|
|
{{-- @php--}}
|
|
{{-- $parent = App\Models\Category::where( 'id', $item->parent_id, )->first();--}}
|
|
{{-- @endphp--}}
|
|
<a href="{{ route('NewsCategory.show', ['slug' => $item->slug]).'/' }}" wire:navigate class="block px-3 py-1 text-sm hover:bg-gray-100 rounded mb-1">
|
|
{{ $item->fparent->title }} {{ $item->title }}
|
|
</a>
|
|
@endif
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
<svg x-transition class="hoverCancel" fill="#000" style="width:12px; height:12px; left: -50%; top: 30%;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
|
|
</svg>
|
|
</div>
|
|
@endif
|
|
|
|
<a @mouseenter="newsList = false , blogsList = false , showbackdrop2 = false , document.querySelector('body').classList.remove('overflow-hidden') " href="{{ route('dictionary.main') . '/' }}" wire:navigate class="menu-link text-black px-[.6rem] py-4 hidden lg:block text-[16px] ">فرهنگ لغت</a>
|
|
|
|
<div @mouseenter="newsList = false , blogsList = false" class="hidden md:flex ms-auto items-center gap-3">
|
|
<button id="buttonside" @click=" searchbar = true , showbackdrop = true , openinput() " class="relative w-[70%] cursor-pointer ">
|
|
<input @click=" searchbar = true , showbackdrop = true , openinput() " style=" border:none ; box-shadow: none;" autocomplete="off" type="text" class="block pe-4 py-3 text-sm text-gray-900 border mx-auto border-gray-300 cursor-pointer ps-10 ring-0 rounded-lg rounded-t-none md:rounded-t-lg rounded-b-none md:rounded-b-lg bg-gray-100 w-full focus:outline-none focus:ring-0 border-b disabled" placeholder="جستجوی مطالب و اخبار">
|
|
<div class="cursor-pointer z-[3500] me-2 pb-1 absolute top-[0.48rem] right-2 w-[30px] h-[30px] rounded-md bg-gray-200">
|
|
<div class="text-gray-500 font-bold text-[20px] pt-0.5">/</div>
|
|
</div>
|
|
</button>
|
|
|
|
<a x-data="{ menuMore: false }" @mousemove="menuMore = true " @mouseout=" newsList = false , blogsList = false " href="https://ahrominvest.ir/app" class="py-6 relative group">
|
|
<svg class="w-[25px] h-[25px] mx-1 fill-[#334155]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path d="M280 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 270.1-95-95c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L239 369c9.4 9.4 24.6 9.4 33.9 0L409 233c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-95 95L280 24zM128.8 304L64 304c-35.3 0-64 28.7-64 64l0 80c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-80c0-35.3-28.7-64-64-64l-64.8 0-48 48L448 352c8.8 0 16 7.2 16 16l0 80c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-80c0-8.8 7.2-16 16-16l112.8 0-48-48zM432 408a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z">
|
|
</path>
|
|
</svg>
|
|
<ul style=" right: -250%; " :class="menuMore || 'hidden'" class="mega-menu-container my-2 w-40 overflow-hidden rounded-xl bg-white py-2 shadow group-hover:absolute group-hover:block top-14 hidden">
|
|
<div class=" text-center items-center justify-center flex flex-col border-slate-300 pt-2 pb-1 px-2 space-y-1">
|
|
<div class="flex flex-nowarp gap-2 items-center">
|
|
<img src="https://ahrominvest.ir/page/qr.svg" class="w-34 h-34" alt="" srcset="">
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-black flex justify-center">برای دانلود اسکن کنید!</p>
|
|
</div>
|
|
</div>
|
|
</ul>
|
|
</a>
|
|
<div id="header_btn_chat2" class="w-[25px] h-[25px] mx-1">
|
|
<svg class="w-[25px] h-[25px] fill-[#334155] " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path d="M48 256C48 141.1 141.1 48 256 48s208 93.1 208 208l0 144.1c0 22.1-17.9 40-40 40L313.6 440c-8.3-14.4-23.8-24-41.6-24l-32 0c-26.5 0-48 21.5-48 48s21.5 48 48 48l32 0c17.8 0 33.3-9.7 41.6-24l110.4 .1c48.6 0 88.1-39.4 88.1-88L512 256C512 114.6 397.4 0 256 0S0 114.6 0 256l0 40c0 13.3 10.7 24 24 24s24-10.7 24-24l0-40zm112-32l0 112c-17.7 0-32-14.3-32-32l0-48c0-17.7 14.3-32 32-32zM80 256l0 48c0 44.2 35.8 80 80 80l16 0c17.7 0 32-14.3 32-32l0-144c0-17.7-14.3-32-32-32l-16 0c-44.2 0-80 35.8-80 80zm272-32c17.7 0 32 14.3 32 32l0 48c0 17.7-14.3 32-32 32l0-112zm80 32c0-44.2-35.8-80-80-80l-16 0c-17.7 0-32 14.3-32 32l0 144c0 17.7 14.3 32 32 32l16 0c44.2 0 80-35.8 80-80l0-48z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div @click=" showbackdrop = false , searchbar = false" wire:ignore x-show="showbackdrop" x-cloak style="z-index: 1000 ; backdrop-filter: brightness(0.5); filter: blur(8px);" class="fixed top-0 right-0 h-screen w-screen ">
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
@if ($countshow > 0)
|
|
<div @mouseenter="newsList = false" wire:ignore x-show="newsList" x-cloak style="z-index: 1000 ; backdrop-filter: brightness(0.5); " class="absolute right-0 h-screen w-screen ">
|
|
</div>
|
|
@endif
|
|
@if ($countshow2 > 0)
|
|
<div @mouseenter="blogsList = false" wire:ignore x-show="blogsList" x-cloak style="z-index: 1000 ; backdrop-filter: brightness(0.5); " class="absolute right-0 h-screen w-screen ">
|
|
|
|
</div>
|
|
@endif
|
|
</header>
|
|
|
|
<div wire:ignore x-show="showbackdrop2" x-cloak style="z-index: 100 ; backdrop-filter: brightness(0.5); filter: blur(4px);" class="fixed top-0 right-0 h-screen w-screen ">
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@script
|
|
<script>
|
|
Alpine.data('headerPartials', () => ({
|
|
isFixed: false
|
|
, btntogglesidebar: false
|
|
, newsList: false
|
|
, searchbar: false
|
|
, showbackdrop: false
|
|
, showbackdrop2: false
|
|
, opend: false
|
|
, open: false
|
|
, blogsList: false
|
|
, menuMore: false
|
|
, firstItemOpen: true
|
|
, text: ''
|
|
, hoveredSubMenuIndex: null,
|
|
|
|
loadingStates: {}
|
|
, loadingNested: ''
|
|
, loadingFetch: false
|
|
, textRotationIntervals: {}
|
|
, tempBlogsByCat: {}
|
|
, displayTexts: {}
|
|
, dynamicBlogs: {}
|
|
, currentLoadingAnimation: null
|
|
, currentLoadingCategory: null
|
|
, activeTab: 'posts'
|
|
, selectedCategory: null,
|
|
|
|
openinput() {
|
|
this.$nextTick(() => {
|
|
let search = document.getElementById("inputFieldsearch");
|
|
if (search) {
|
|
search.focus();
|
|
console.log("Input focused:", search);
|
|
} else {
|
|
console.error("Input element not found!");
|
|
}
|
|
});
|
|
},
|
|
|
|
closefirst() {
|
|
setTimeout(() => {
|
|
const prevOpenItem = document.querySelector('[id=\'needopen\']');
|
|
prevOpenItem.style.display = 'none';
|
|
}, 1);
|
|
},
|
|
|
|
init() {
|
|
let prevScrollpos = window.pageYOffset;
|
|
window.addEventListener('scroll', () => {
|
|
const currentScrollPos = window.pageYOffset;
|
|
prevScrollpos = currentScrollPos;
|
|
});
|
|
|
|
this.$watch('activeTab', (value) => {
|
|
console.log('value');
|
|
@this.set('activeTab', value);
|
|
@this.resetCategory();
|
|
this.selectedCategory = null;
|
|
@this.searchBox();
|
|
});
|
|
|
|
this.$watch('selectedCategory', (value) => {
|
|
if (value) {
|
|
console.log(value, this.activeTab);
|
|
@this.selectCategory(value);
|
|
}
|
|
});
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const categoryId = entry.target.getAttribute('data-category-id');
|
|
if (categoryId) {
|
|
this.$wire.loadCategoryData(categoryId);
|
|
}
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.1
|
|
});
|
|
|
|
document.querySelectorAll('[data-category-id]').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
|
|
const cats = @json($cats);
|
|
cats.forEach(id => {
|
|
this.$wire.loadCategoryData(id);
|
|
})
|
|
|
|
this.$wire.getLastNewsPosts(0)
|
|
},
|
|
|
|
handleCategoryHover(categoryId, index) {
|
|
this.newsList = false;
|
|
this.blogsList = false;
|
|
this.open = true;
|
|
|
|
if (!this.$wire.loadedCategories.includes(categoryId)) {
|
|
this.$wire.loadCategoryData(categoryId);
|
|
}
|
|
|
|
if (index !== 3) {
|
|
this.closefirst();
|
|
}
|
|
},
|
|
|
|
checkInputLength() {
|
|
if (document.getElementById('inputFieldsearch').value.length >= 3) {
|
|
this.showbackdrop = true;
|
|
this.$wire.searchBox();
|
|
} else {
|
|
this.$wire.refreshsearch();
|
|
}
|
|
},
|
|
|
|
setactiveTab(value) {
|
|
@this.set('activeTab', value);
|
|
@this.resetCategory();
|
|
this.selectedCategory = null;
|
|
@this.searchBox();
|
|
},
|
|
|
|
openfirstpart() {
|
|
setTimeout(() => {
|
|
console.log('openfirstpart');
|
|
const prevOpenItem = document.querySelector('[id=\'needopen\']');
|
|
prevOpenItem.style.display = '';
|
|
}, 1);
|
|
|
|
},
|
|
|
|
fetchCategoryBlogs(subCatId, topLevelCatId) {
|
|
if (this.loadingStates[topLevelCatId]) return;
|
|
|
|
this.loadingFetch = true;
|
|
fetch(`{{url('api/category-blogs/${subCatId}')}}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
|
|
if (data.blogs && data.blogs.length >= 4) {
|
|
this.dynamicBlogs[topLevelCatId] = [];
|
|
this.loadingStates[topLevelCatId] = true;
|
|
this.loadingNested = subCatId;
|
|
this.startLoadingAnimation(data.blogs, topLevelCatId);
|
|
} else {
|
|
// this.dynamicBlogs[topLevelCatId] = [];
|
|
this.loadingStates[topLevelCatId] = false;
|
|
this.loadingNested = '';
|
|
this.loadingFetch = false;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
this.loadingStates[topLevelCatId] = false;
|
|
this.loadingNested = '';
|
|
this.loadingFetch = false;
|
|
});
|
|
},
|
|
|
|
startLoadingAnimation(blogs, topLevelCatId) {
|
|
this.tempBlogsByCat[topLevelCatId] = blogs;
|
|
|
|
this.displayTexts[topLevelCatId] = Array(4).fill().map(() => {
|
|
return this.tempBlogsByCat[topLevelCatId][Math.floor(Math.random() * this.tempBlogsByCat[topLevelCatId].length)].subject;
|
|
});
|
|
|
|
if (this.textRotationIntervals[topLevelCatId]) clearInterval(this.textRotationIntervals[topLevelCatId]);
|
|
this.textRotationIntervals[topLevelCatId] = setInterval(() => {
|
|
this.displayTexts[topLevelCatId] = (this.displayTexts[topLevelCatId] || []).map(() => {
|
|
return this.tempBlogsByCat[topLevelCatId][Math.floor(Math.random() * this.tempBlogsByCat[topLevelCatId].length)].subject;
|
|
});
|
|
}, 30);
|
|
|
|
const randomBlogs = [];
|
|
const blogsCopy = [...this.tempBlogsByCat[topLevelCatId]];
|
|
for (let i = 0; i < 4; i++) {
|
|
const randomIndex = Math.floor(Math.random() * blogsCopy.length);
|
|
randomBlogs.push(blogsCopy.splice(randomIndex, 1)[0]);
|
|
}
|
|
|
|
const imageLoadPromises = randomBlogs.map(blog => new Promise(resolve => {
|
|
const img = new Image();
|
|
img.src = blog.image;
|
|
img.onload = resolve;
|
|
img.onerror = resolve;
|
|
}));
|
|
const minDelayPromise = new Promise(resolve => setTimeout(resolve, 200));
|
|
|
|
Promise.all([...imageLoadPromises, minDelayPromise]).then(() => {
|
|
clearInterval(this.textRotationIntervals[topLevelCatId]);
|
|
this.dynamicBlogs[topLevelCatId] = randomBlogs;
|
|
this.loadingStates[topLevelCatId] = false;
|
|
this.loadingNested = '';
|
|
});
|
|
|
|
this.loadingFetch = false;
|
|
},
|
|
|
|
showLoadingAnimation(categoryId, containerId) {
|
|
if (this.currentLoadingAnimation) {
|
|
this.currentLoadingAnimation.destroy();
|
|
this.currentLoadingAnimation = null;
|
|
}
|
|
|
|
// if (this.currentLoadingCategory === categoryId) {
|
|
// this.currentLoadingCategory = null;
|
|
// return;
|
|
// }
|
|
|
|
this.currentLoadingCategory = categoryId;
|
|
|
|
const animationPath = '{{ asset("loti/star-magic.json") }}';
|
|
|
|
const animationContainer = document.getElementById(containerId);
|
|
|
|
animationContainer.innerHTML = '';
|
|
|
|
const animDiv = document.createElement('div');
|
|
animDiv.id = `lottie-anim-${categoryId}`;
|
|
animDiv.style.width = '20px';
|
|
animDiv.style.height = '20px';
|
|
animationContainer.appendChild(animDiv);
|
|
|
|
this.currentLoadingAnimation = lottie.loadAnimation({
|
|
container: animDiv
|
|
, renderer: 'svg'
|
|
, loop: true
|
|
, autoplay: true
|
|
, path: animationPath
|
|
});
|
|
|
|
this.currentLoadingAnimation.setSpeed(1.5);
|
|
}
|
|
, }));
|
|
|
|
</script>
|
|
@endscript
|