mirror of https://github.com/4xmen/xshop.git
added Deeba menu part
fixed menu item lang bug url optimized menu item url function fixed some ui bug other theme part [responsive] update composer description added generatorpull/49/head
parent
ebd75dbc11
commit
b583f31627
@ -0,0 +1,39 @@
|
||||
<nav id='DeebaMenu'>
|
||||
<div class="{{gfx()['container']}}">
|
||||
<ul>
|
||||
@php($items = getMenuBySetting($data->area->name.'_'.$data->part.'_menu')->items)
|
||||
@php($menuShow = false)
|
||||
@foreach($items as $i => $item)
|
||||
{{-- find center --}}
|
||||
@if(!$menuShow && ($i > (count($items) / 2) -1 ) )
|
||||
@php($menuShow = true)
|
||||
<li id="deeba-logo-main">
|
||||
<a href="#">
|
||||
<img src="{{asset('upload/images/logo.png')}}" alt="">
|
||||
</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
<li>
|
||||
<a href="{{$item->webUrl()}}">
|
||||
{{$item->title}}
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
<li id="deeba-toggle">
|
||||
<a >
|
||||
<i class="ri-menu-line"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul id="deeba-sided">
|
||||
@foreach(getMenuBySetting($data->area->name.'_'.$data->part.'_menu')->items as $item)
|
||||
<li>
|
||||
<a href="{{$item->webUrl()}}">
|
||||
{{$item->title}}
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</nav>
|
||||
@ -0,0 +1,14 @@
|
||||
const scrollBreakpoint = window.innerHeight * 0.7;
|
||||
window.addEventListener('scroll',function () {
|
||||
if (window.scrollY > scrollBreakpoint){
|
||||
document.querySelector('#DeebaMenu').classList.add('active')
|
||||
}else{
|
||||
document.querySelector('#DeebaMenu').classList.remove('active')
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('load',function () {
|
||||
document.querySelector('#deeba-toggle')?.addEventListener('click',function () {
|
||||
document.querySelector('#deeba-sided').classList.toggle('show');
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "DeebaMenu",
|
||||
"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 DeebaMenu
|
||||
{
|
||||
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,124 @@
|
||||
#DeebaMenu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
transition: 500ms;
|
||||
background: #11111100;
|
||||
backdrop-filter: blur(0);
|
||||
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
li {
|
||||
transition: 500ms;
|
||||
flex: 1;
|
||||
|
||||
a {
|
||||
padding: 1rem;
|
||||
display: block;
|
||||
|
||||
color:var(--xshop-primary);
|
||||
|
||||
&:hover {
|
||||
background: var(--xshop-secondary);
|
||||
color: var(--xshop-diff2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#deeba-logo-main {
|
||||
flex-grow: 2;
|
||||
transition: 500ms;
|
||||
|
||||
|
||||
a {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
#deeba-toggle,.fixed-center{
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active{
|
||||
|
||||
ul{
|
||||
height: 3.5rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
background: #11111133;
|
||||
position: fixed;
|
||||
backdrop-filter: blur(7px);
|
||||
#deeba-logo-main img{
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
#deeba-sided{
|
||||
opacity: .9;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
inset-inline-end: -300px;
|
||||
top: 3.5rem;
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
height: calc(100vh - 3.5rem);
|
||||
width: 270px;
|
||||
z-index: 999;
|
||||
background: var(--xshop-secondary);
|
||||
display: block;
|
||||
|
||||
li{
|
||||
display: block;
|
||||
a{
|
||||
color: var(--xshop-diff2);
|
||||
transition: 300ms;
|
||||
&:hover{
|
||||
background: var(--xshop-primary);
|
||||
color: var(--xshop-diff);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/*-1024px width*/
|
||||
@media (max-width: 1024px) {
|
||||
#DeebaMenu{
|
||||
li{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#deeba-toggle,.fixed-center{
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
//.fixed-center{
|
||||
// visibility: hidden;
|
||||
//}
|
||||
#deeba-logo-main{
|
||||
display: block;
|
||||
flex-grow: 8;
|
||||
}
|
||||
.show{
|
||||
inset-inline-end: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 297 KiB |
Loading…
Reference in New Issue