mirror of https://github.com/4xmen/xshop.git
parent
7daa9f4be4
commit
1a4ac2783c
@ -0,0 +1,102 @@
|
|||||||
|
<nav id="AplMenu">
|
||||||
|
<ul class="{{gfx()['container']}}">
|
||||||
|
<li class="icon-menu" id="logo-menu">
|
||||||
|
<a href="{{url('/')}}">
|
||||||
|
<img src="{{asset('upload/images/logo.svg')}}" alt="">
|
||||||
|
{{-- <i class="ri-apple-line "></i>--}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
@foreach(getMenuBySetting($data->area->name.'_'.$data->part.'_menu')->items as $item)
|
||||||
|
<li>
|
||||||
|
@if($item->meta == null)
|
||||||
|
<a href="{{$item->dest->webUrl()}}">
|
||||||
|
{{$item->title}}
|
||||||
|
</a>
|
||||||
|
@switch($item->menuable_type)
|
||||||
|
@case(\App\Models\Group::class)
|
||||||
|
@case(\App\Models\Category::class)
|
||||||
|
<div class="sub-menu">
|
||||||
|
<div class="{{gfx()['container']}}">
|
||||||
|
<div>
|
||||||
|
<h4>
|
||||||
|
{{$item->dest->name}}
|
||||||
|
</h4>
|
||||||
|
<ul>
|
||||||
|
@if($item->dest->children()->count() == 0)
|
||||||
|
@foreach($item->dest->published(5,'view') as $itm)
|
||||||
|
<li>
|
||||||
|
<a href="{{$itm->webUrl()}}">
|
||||||
|
{{\Illuminate\Support\Str::limit($itm->title,25)}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
@endforeach
|
||||||
|
@else
|
||||||
|
@foreach($item->dest->children as $itm)
|
||||||
|
<li>
|
||||||
|
<a href="{{$itm->webUrl()}}">
|
||||||
|
{{$itm->name}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
@endforeach
|
||||||
|
@endif
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>
|
||||||
|
{{__("Latest ")}} {{$item->dest->name}}
|
||||||
|
</h4>
|
||||||
|
<ul>
|
||||||
|
@foreach($item->dest->published(5) as $itm)
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="{{$itm->webUrl()}}">
|
||||||
|
{{\Illuminate\Support\Str::limit($itm->title,25)}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
@endforeach
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>
|
||||||
|
{{$item->dest->subtitle}}
|
||||||
|
</h4>
|
||||||
|
<p>
|
||||||
|
{{$item->dest->description}}
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@break
|
||||||
|
@default
|
||||||
|
|
||||||
|
@endswitch
|
||||||
|
@else
|
||||||
|
<a href="{{$item->meta}}">
|
||||||
|
{{$item->title}}
|
||||||
|
</a>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
</li>
|
||||||
|
@endforeach
|
||||||
|
|
||||||
|
<li class="icon-menu">
|
||||||
|
<a href="#">
|
||||||
|
<i class="ri-search-line"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="icon-menu">
|
||||||
|
<a href="#">
|
||||||
|
<i class="ri-shopping-bag-2-line"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li id="toggler-menu" class="icon-menu">
|
||||||
|
<a href="#">
|
||||||
|
<i class="ri-menu-line"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div id="reps-menu">
|
||||||
|
</div>
|
||||||
|
</nav>
|
@ -0,0 +1,14 @@
|
|||||||
|
const toggleSideMenu = function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
let txt = '<ul>';
|
||||||
|
document.querySelectorAll('#AplMenu > ul > li').forEach(function (el) {
|
||||||
|
if(!el.classList.contains('icon-menu')){
|
||||||
|
txt += el.outerHTML;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
txt += '</ul>';
|
||||||
|
document.querySelector('#reps-menu').innerHTML = txt;
|
||||||
|
};
|
||||||
|
document.addEventListener('DOMContentLoaded',function () {
|
||||||
|
document.querySelector('#toggler-menu').addEventListener('click',toggleSideMenu);
|
||||||
|
});
|
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"name": "AplMenu",
|
||||||
|
"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,31 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace Resources\Views\Segments;
|
||||||
|
|
||||||
|
use App\Models\Menu;
|
||||||
|
use App\Models\Part;
|
||||||
|
use App\Models\Setting;
|
||||||
|
|
||||||
|
class AplMenu
|
||||||
|
{
|
||||||
|
public static function onAdd(Part $part = null)
|
||||||
|
{
|
||||||
|
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area->name . '_' . $part->part.'_menu';
|
||||||
|
$setting->value = Menu::first()->id;
|
||||||
|
$setting->type = 'MENU';
|
||||||
|
$setting->size = 12;
|
||||||
|
$setting->title = $part->area->name . ' ' . $part->part .' menu';
|
||||||
|
$setting->save();
|
||||||
|
}
|
||||||
|
public static function onRemove(Part $part = null)
|
||||||
|
{
|
||||||
|
Setting::where('key',$part->area->name . '_' . $part->part.'_menu')->first()?->delete();
|
||||||
|
}
|
||||||
|
public static function onMount(Part $part = null)
|
||||||
|
{
|
||||||
|
return $part;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,149 @@
|
|||||||
|
#AplMenu {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 99;
|
||||||
|
background: #434344;
|
||||||
|
transition: 200ms;
|
||||||
|
|
||||||
|
#logo-menu{
|
||||||
|
a{
|
||||||
|
padding-top: 7px;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#toggler-menu,#reps-menu{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
background: #202124;
|
||||||
|
}
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
> li {
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
height: 47px;
|
||||||
|
|
||||||
|
div.sub-menu{
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
width: 100vw;
|
||||||
|
background: #202124;
|
||||||
|
left: 0;
|
||||||
|
max-height: 0;
|
||||||
|
transition: 900ms;
|
||||||
|
overflow: hidden;
|
||||||
|
.container{
|
||||||
|
display: grid;
|
||||||
|
grid-auto-columns: minmax(0, 1fr);
|
||||||
|
grid-auto-flow: column;
|
||||||
|
grid-gap: 1rem;
|
||||||
|
text-align: start;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
|
||||||
|
ul{
|
||||||
|
list-style: none;
|
||||||
|
padding: 0 1rem 0 1rem;
|
||||||
|
li{
|
||||||
|
margin: .75rem 0;
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h4{
|
||||||
|
padding-top: 2rem;
|
||||||
|
margin: .2rem;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
}
|
||||||
|
h3{
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
div.sub-menu{
|
||||||
|
max-height: 100vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 200;
|
||||||
|
color: white;
|
||||||
|
display: block;
|
||||||
|
padding: .7rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*-768px width*/
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
#toggler-menu{
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo-menu{
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
> li{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.icon-menu{
|
||||||
|
display: block;
|
||||||
|
padding: 0 1rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#reps-menu{
|
||||||
|
overflow-y: hidden;
|
||||||
|
color: white;
|
||||||
|
display: block;
|
||||||
|
ul{
|
||||||
|
li{
|
||||||
|
list-style: none;
|
||||||
|
padding: .5rem;
|
||||||
|
.sub-menu{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h3{
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue