mirror of https://github.com/4xmen/xshop.git
added theme part sarv menu
parent
24bb2f8e56
commit
50e5d053fb
@ -0,0 +1,167 @@
|
|||||||
|
<section class="SarvMenu live-setting" data-live="{{$data->area_name.'_'.$data->part}}">
|
||||||
|
<div class="{{gfx()['container']}}">
|
||||||
|
<div class="sarv-row">
|
||||||
|
<div>
|
||||||
|
<img src="{{asset('upload/images/logo.svg')}}" alt="{{config('app.name')}}">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<form action="{{route('client.search')}}">
|
||||||
|
<div class="form-control omg-search">
|
||||||
|
<i class="ri-search-2-line"></i>
|
||||||
|
<input type="text" name="q" class="live-search" placeholder="{{__("Search")}}...">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<nav class="no-view">
|
||||||
|
<ul>
|
||||||
|
@foreach(getMenuBySettingItems($data->area_name.'_'.$data->part.'_menu') as $item)
|
||||||
|
<li>
|
||||||
|
@if($item->meta == null)
|
||||||
|
<a href="{{$item->webUrl()}}">
|
||||||
|
{{$item->title}}
|
||||||
|
</a>
|
||||||
|
@switch($item->menuable_type)
|
||||||
|
@case(\App\Models\Group::class)
|
||||||
|
@case(\App\Models\Category::class)
|
||||||
|
<div class="sub-menu main-dir">
|
||||||
|
<h6 class="p-3">
|
||||||
|
<a href="{{$item->webUrl()}}">
|
||||||
|
{{$item->title}}
|
||||||
|
</a>
|
||||||
|
</h6>
|
||||||
|
<ul>
|
||||||
|
@foreach($item->dest->children()->where('hide',false)->get() as $itm)
|
||||||
|
<li>
|
||||||
|
<a href="{{$itm->webUrl()}}">
|
||||||
|
<i class="{{$itm->icon}}"></i>
|
||||||
|
<b>
|
||||||
|
{{$itm->name}}
|
||||||
|
</b>
|
||||||
|
<i class="ri-arrow-down-s-line"></i>
|
||||||
|
</a>
|
||||||
|
<ul>
|
||||||
|
@foreach($itm->children()->where('hide',false)->get() as $im)
|
||||||
|
<li>
|
||||||
|
<a href="{{$im->webUrl()}}">
|
||||||
|
<i class="{{$im->icon}}"></i> {{$im->name}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
@endforeach
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
@endforeach
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
@break
|
||||||
|
@default
|
||||||
|
|
||||||
|
@endswitch
|
||||||
|
@else
|
||||||
|
<a href="{{$item->webUrl()}}">
|
||||||
|
{{$item->title}}
|
||||||
|
</a>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
</li>
|
||||||
|
@endforeach
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="sarv-btn-container">
|
||||||
|
|
||||||
|
@if(auth('customer')->check())
|
||||||
|
<a href="{{route('client.profile')}}" class="btn btn-outline-primary">
|
||||||
|
<i class="ri-user-line"></i>
|
||||||
|
{{__("Profile")}}
|
||||||
|
</a>
|
||||||
|
@else
|
||||||
|
<a href="{{route('client.sign-in')}}" class="btn btn-outline-primary">
|
||||||
|
<i class="ri-user-line"></i>
|
||||||
|
<span>
|
||||||
|
{{__("Login")}} / {{__('Register')}}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
@endif
|
||||||
|
<a href="{{ route('client.card') }}" class="btn btn-outline-primary live-card-show"
|
||||||
|
data-url="{{route('client.card.items')}}">
|
||||||
|
<i class="ri-shopping-bag-2-line"></i>
|
||||||
|
<span class="badge bg-danger card-count">
|
||||||
|
@if(cardCount() > 0)
|
||||||
|
{{cardCount()}}
|
||||||
|
@endif
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a class="btn btn-outline-primary" id="sarv-toggle" href="#">
|
||||||
|
<i class="ri-menu-line"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<a href="{{getSetting($data->area_name.'_'.$data->part.'_link')}}" class="float-end mb-2 no-view">
|
||||||
|
<i class="{{getSetting($data->area_name.'_'.$data->part.'_icon')}}"></i>
|
||||||
|
{{getSetting($data->area_name.'_'.$data->part.'_title')}}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form action="{{route('client.search')}}">
|
||||||
|
<div class="form-control mobile-search">
|
||||||
|
<i class="ri-search-2-line"></i>
|
||||||
|
<input type="text" name="q" class="live-search" placeholder="{{__("Search")}}...">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div id="sarv-responsive-menu">
|
||||||
|
<nav class="nested-list">
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
@foreach(getMenuBySettingItems($data->area_name.'_'.$data->part.'_menu') as $item)
|
||||||
|
<li>
|
||||||
|
@if($item->meta == null)
|
||||||
|
<a href="{{$item->webUrl()}}">
|
||||||
|
{{$item->title}}
|
||||||
|
</a>
|
||||||
|
@switch($item->menuable_type)
|
||||||
|
@case(\App\Models\Group::class)
|
||||||
|
@case(\App\Models\Category::class)
|
||||||
|
<ul>
|
||||||
|
@foreach($item->dest->children()->where('hide',false)->get() as $itm)
|
||||||
|
<li>
|
||||||
|
<a href="{{$itm->webUrl()}}">
|
||||||
|
<b>
|
||||||
|
{{$itm->name}}
|
||||||
|
</b>
|
||||||
|
</a>
|
||||||
|
@if($itm->children()->where('hide',false)->count() > 0)
|
||||||
|
<ul>
|
||||||
|
@foreach($itm->children()->where('hide',false)->get() as $im)
|
||||||
|
<li>
|
||||||
|
<a href="{{$im->webUrl()}}">
|
||||||
|
{{$im->name}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
@endforeach
|
||||||
|
</ul>
|
||||||
|
@endif
|
||||||
|
</li>
|
||||||
|
@endforeach
|
||||||
|
</ul>
|
||||||
|
@break
|
||||||
|
@default
|
||||||
|
|
||||||
|
@endswitch
|
||||||
|
@else
|
||||||
|
<a href="{{$item->webUrl()}}">
|
||||||
|
{{$item->title}}
|
||||||
|
</a>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
</li>
|
||||||
|
@endforeach
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</div>
|
@ -0,0 +1,19 @@
|
|||||||
|
window.addEventListener('load', function () {
|
||||||
|
window.addEventListener('scroll',function (e) {
|
||||||
|
if (window.scrollY > 100){
|
||||||
|
document.querySelector('.SarvMenu').classList.add('fixed');
|
||||||
|
}else{
|
||||||
|
document.querySelector('.SarvMenu').classList.remove('fixed');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelector('#sarv-toggle').addEventListener('click',function () {
|
||||||
|
document.querySelector('#sarv-responsive-menu').style.display = 'flex';
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelector('#sarv-responsive-menu').addEventListener('click',function (e) {
|
||||||
|
if (e.target == this){
|
||||||
|
document.querySelector('#sarv-responsive-menu').style.display = 'none';
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"name": "SarvMenu",
|
||||||
|
"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": []
|
||||||
|
}
|
@ -0,0 +1,94 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace Resources\Views\Segments;
|
||||||
|
|
||||||
|
use App\Models\Menu;
|
||||||
|
use App\Models\Part;
|
||||||
|
use App\Models\Setting;
|
||||||
|
|
||||||
|
class SarvMenu
|
||||||
|
{
|
||||||
|
public static function onAdd(Part $part = null)
|
||||||
|
{
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area_name . '_' . $part->part.'_title';
|
||||||
|
$setting->value = __("Download app");
|
||||||
|
$setting->size = 4;
|
||||||
|
$setting->type = 'TEXT';
|
||||||
|
// $setting->data = json_encode(['xmin' => 2, 'xmax' => 90]);
|
||||||
|
$setting->title = $part->area_name . ' ' . $part->part. ' title';
|
||||||
|
$setting->save();
|
||||||
|
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area_name . '_' . $part->part.'_link';
|
||||||
|
$setting->value = __("link");
|
||||||
|
$setting->size = 4;
|
||||||
|
$setting->type = 'TEXT';
|
||||||
|
// $setting->data = json_encode(['xmin' => 2, 'xmax' => 90]);
|
||||||
|
$setting->title = $part->area_name . ' ' . $part->part. ' link';
|
||||||
|
$setting->save();
|
||||||
|
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area_name . '_' . $part->part.'_icon';
|
||||||
|
$setting->value = 'ri-mobile-download-line' ;
|
||||||
|
$setting->size = 4;
|
||||||
|
$setting->type = 'ICON';
|
||||||
|
// $setting->data = json_encode(['xmin' => 2, 'xmax' => 90]);
|
||||||
|
$setting->title = $part->area_name . ' ' . $part->part. ' icon';
|
||||||
|
$setting->save();
|
||||||
|
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area_name . '_' . $part->part.'_menu';
|
||||||
|
$setting->value = Menu::first()->id;
|
||||||
|
$setting->type = 'MENU';
|
||||||
|
$setting->size = 4;
|
||||||
|
$setting->title = $part->area_name . ' ' . $part->part .' menu';
|
||||||
|
$setting->save();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area_name . '_' . $part->part.'_color';
|
||||||
|
$setting->value = '#dddddd';
|
||||||
|
$setting->type = 'COLOR';
|
||||||
|
$setting->data = json_encode(['name' => 'sarv -color']);
|
||||||
|
$setting->size = 4;
|
||||||
|
$setting->title = $part->area_name . ' ' . $part->part .' menu text color';
|
||||||
|
$setting->save();
|
||||||
|
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area_name . '_' . $part->part.'_bg';
|
||||||
|
$setting->value = '#ffffff';
|
||||||
|
$setting->type = 'COLOR';
|
||||||
|
$setting->data = json_encode(['name' => 'sarv-bg']);
|
||||||
|
$setting->size = 4;
|
||||||
|
$setting->title = $part->area_name . ' ' . $part->part .' background color';
|
||||||
|
$setting->save();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
public static function onRemove(Part $part = null)
|
||||||
|
{
|
||||||
|
Setting::where('key',$part->area_name . '_' . $part->part.'_title')->first()?->delete();
|
||||||
|
Setting::where('key',$part->area_name . '_' . $part->part.'_icon')->first()?->delete();
|
||||||
|
Setting::where('key',$part->area_name . '_' . $part->part.'_link')->first()?->delete();
|
||||||
|
Setting::where('key',$part->area_name . '_' . $part->part.'_color')->first()?->delete();
|
||||||
|
Setting::where('key',$part->area_name . '_' . $part->part.'_bg')->first()?->delete();
|
||||||
|
Setting::where('key',$part->area_name . '_' . $part->part.'_menu')->first()?->delete();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
public static function onMount(Part $part = null)
|
||||||
|
{
|
||||||
|
return $part;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,256 @@
|
|||||||
|
#sarv-toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.SarvMenu {
|
||||||
|
|
||||||
|
top: -150px;
|
||||||
|
transition: 400ms;
|
||||||
|
background: var(--sarv-bg);
|
||||||
|
color: var(--sarv-color);
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--sarv-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.omg-search {
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-search {
|
||||||
|
position: relative;
|
||||||
|
top: -1rem;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control {
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
input {
|
||||||
|
border: 0;
|
||||||
|
background: #dddddd00;
|
||||||
|
width: calc(100% - 35px);
|
||||||
|
outline: none;
|
||||||
|
padding: .35rem 1rem;
|
||||||
|
margin-bottom: -5px;
|
||||||
|
position: relative;
|
||||||
|
top: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 25px;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sarv-row {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 20fr 8fr;
|
||||||
|
grid-gap: 1rem;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.sarv-btn-container {
|
||||||
|
display: grid;
|
||||||
|
grid-gap: .5rem;
|
||||||
|
grid-template-columns: 5fr 2fr;
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-size: 15px;
|
||||||
|
border-color: var(--sarv-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
> ul {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: start;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
> li {
|
||||||
|
transition: 400ms;
|
||||||
|
padding: 1rem 1rem .5rem 1rem;
|
||||||
|
border-bottom: 2px transparent solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-menu {
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
position: absolute;
|
||||||
|
background: var(--sarv-bg);
|
||||||
|
top: 90%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 99;
|
||||||
|
column-count: 4;
|
||||||
|
border-radius: var(--xshop-border-radius);
|
||||||
|
font-size: 14px;
|
||||||
|
max-height: 0;
|
||||||
|
transition: 500ms;
|
||||||
|
transition-delay: .3s;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding: 0 1rem;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
padding: .25rem .5rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
inset-inline-start: -.4rem;
|
||||||
|
content: '\EA63';
|
||||||
|
font-family: "remixicon" !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li:hover {
|
||||||
|
border-bottom-color: var(--sarv-color);
|
||||||
|
|
||||||
|
.sub-menu {
|
||||||
|
max-height: 90vh;
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.fixed {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 555;
|
||||||
|
|
||||||
|
.no-view {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-search {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#sarv-responsive-menu {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 9999;
|
||||||
|
top: 0;
|
||||||
|
background: #0d0d0d44;
|
||||||
|
backdrop-filter: blur(7px);
|
||||||
|
display: none;
|
||||||
|
align-items: end;
|
||||||
|
|
||||||
|
nav {
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--sarv-bg);
|
||||||
|
color: var(--sarv-color);
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
|
||||||
|
ul{
|
||||||
|
background: #00000022;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
border-top: 1px solid var(--sarv-color);
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: 1rem;
|
||||||
|
display: block;
|
||||||
|
color: var(--sarv-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
i{
|
||||||
|
font-size: 35px;
|
||||||
|
position: relative;
|
||||||
|
top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*-1000px width*/
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
#sarv-toggle {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.SarvMenu {
|
||||||
|
|
||||||
|
.mobile-search {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav, .omg-search, .float-end {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sarv-row {
|
||||||
|
grid-template-columns: 2fr 1fr 5fr;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sarv-btn-container {
|
||||||
|
grid-template-columns: 5fr 3fr 2fr !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//#sarv-responsive-menu {
|
||||||
|
// display: flex;
|
||||||
|
//}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*-450px width*/
|
||||||
|
@media (max-width: 450px) {
|
||||||
|
.SarvMenu {
|
||||||
|
a span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sarv-btn-container {
|
||||||
|
grid-template-columns: 3fr 3fr 3fr !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
border-color: transparent !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
Binary file not shown.
After Width: | Height: | Size: 3.9 KiB |
Loading…
Reference in New Issue