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