mirror of https://github.com/4xmen/xshop.git
added side menu
parent
40e0201cc6
commit
1482829b32
@ -0,0 +1,29 @@
|
|||||||
|
<nav id='SideMenu' style="---side-bg: {{getSetting($data->area->name.'_'.$data->part.'_bg')}};">
|
||||||
|
<div class="text-center py-3" id="side-menu-logo">
|
||||||
|
<a href="{{url('/')}}">
|
||||||
|
<img src="{{asset('upload/images/logo.svg')}}" alt="">
|
||||||
|
{{-- <i class="ri-apple-line "></i>--}}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div id="side-menu-btn">
|
||||||
|
<i class="ri-menu-line"></i>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
@foreach(getMenuBySetting($data->area->name.'_'.$data->part.'_menu')->items as $item)
|
||||||
|
<li>
|
||||||
|
@if($item->meta == null)
|
||||||
|
<a href="{{$item->dest->webUrl()}}">
|
||||||
|
{{$item->title}}
|
||||||
|
</a>
|
||||||
|
@else
|
||||||
|
<a href="{{$item->meta}}">
|
||||||
|
{{$item->title}}
|
||||||
|
</a>
|
||||||
|
@endif
|
||||||
|
</li>
|
||||||
|
@endforeach
|
||||||
|
</ul>
|
||||||
|
<div class="p-2" id="side-menu-content">
|
||||||
|
{!! getSetting($data->area->name.'_'.$data->part.'_text') !!}
|
||||||
|
</div>
|
||||||
|
</nav>
|
@ -0,0 +1,31 @@
|
|||||||
|
/**
|
||||||
|
* trim char
|
||||||
|
* @param s String
|
||||||
|
* @param c char
|
||||||
|
* @returns {*}
|
||||||
|
*/
|
||||||
|
function trimer (s, c) {
|
||||||
|
if (c === "]") c = "\\]";
|
||||||
|
if (c === "^") c = "\\^";
|
||||||
|
if (c === "\\") c = "\\\\";
|
||||||
|
return s.replace(new RegExp(
|
||||||
|
"^[" + c + "]+|[" + c + "]+$", "g"
|
||||||
|
), "");
|
||||||
|
}
|
||||||
|
document.addEventListener('DOMContentLoaded',function () {
|
||||||
|
|
||||||
|
// make current page
|
||||||
|
document.querySelectorAll('#SideMenu li').forEach(function (el) {
|
||||||
|
if (trimer(el.querySelector('a').getAttribute('href'),'/') == trimer( window.location.href,'/')){
|
||||||
|
el.classList.add('current-page');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (document.querySelectorAll('#SideMenu li.current-page').length == 0){
|
||||||
|
document.querySelector('#SideMenu li:first-child').classList.add('current-page');
|
||||||
|
}
|
||||||
|
|
||||||
|
// toggle menu for reposive
|
||||||
|
document.querySelector('#side-menu-btn').addEventListener('click',function () {
|
||||||
|
this.closest('nav').querySelector('ul').classList.toggle('active');
|
||||||
|
});
|
||||||
|
});
|
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"name": "SideMenu",
|
||||||
|
"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,52 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace Resources\Views\Segments;
|
||||||
|
|
||||||
|
use App\Models\Menu;
|
||||||
|
use App\Models\Part;
|
||||||
|
use App\Models\Setting;
|
||||||
|
|
||||||
|
class SideMenu
|
||||||
|
{
|
||||||
|
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();
|
||||||
|
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area->name . '_' . $part->part.'_text';
|
||||||
|
$setting->value = 'lorem ipsum';
|
||||||
|
$setting->type = 'EDITOR';
|
||||||
|
$setting->size = 12;
|
||||||
|
$setting->title = $part->area->name . ' ' . $part->part .' text';
|
||||||
|
$setting->save();
|
||||||
|
|
||||||
|
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area->name . '_' . $part->part.'_bg';
|
||||||
|
$setting->value = '#ececec';
|
||||||
|
$setting->type = 'COLOR';
|
||||||
|
$setting->size = 3;
|
||||||
|
$setting->title = $part->area->name . ' ' . $part->part .' background';
|
||||||
|
$setting->save();
|
||||||
|
}
|
||||||
|
public static function onRemove(Part $part = null)
|
||||||
|
{
|
||||||
|
Setting::where('key',$part->area->name . '_' . $part->part.'_menu')->first()?->delete();
|
||||||
|
Setting::where('key',$part->area->name . '_' . $part->part.'_text')->first()?->delete();
|
||||||
|
Setting::where('key',$part->area->name . '_' . $part->part.'bg')->first()?->delete();
|
||||||
|
}
|
||||||
|
public static function onMount(Part $part = null)
|
||||||
|
{
|
||||||
|
return $part;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,108 @@
|
|||||||
|
#SideMenu {
|
||||||
|
// scss
|
||||||
|
position: fixed;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
z-index: 8;
|
||||||
|
background: var(---side-bg);
|
||||||
|
width: 20rem;
|
||||||
|
bottom: 0;
|
||||||
|
top: 0;
|
||||||
|
inset-inline-start: 0;
|
||||||
|
img{
|
||||||
|
width: 50% !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
ul{
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
li{
|
||||||
|
transition: 600ms;
|
||||||
|
a{
|
||||||
|
padding: .75rem 1rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
background: var(--xshop-secondary);
|
||||||
|
a{
|
||||||
|
color: var(--xshop-diff);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.current-page{
|
||||||
|
background: var(--xshop-primary);
|
||||||
|
a{
|
||||||
|
color: var(--xshop-diff);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#side-menu-btn{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main{
|
||||||
|
position: relative;
|
||||||
|
inset-inline-start: 20rem;
|
||||||
|
width: calc(100% - 20rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*-1024px width*/
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
main{
|
||||||
|
position: static;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#SideMenu{
|
||||||
|
inset-inline-start: 0;
|
||||||
|
width: 100%;
|
||||||
|
bottom: auto;
|
||||||
|
overflow: visible !important;
|
||||||
|
//position: relative;
|
||||||
|
|
||||||
|
#side-menu-logo{
|
||||||
|
float: left;
|
||||||
|
img{
|
||||||
|
width: auto !important;
|
||||||
|
height: 48px !important;
|
||||||
|
margin-right: 1rem;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul{
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: var(--xshop-background);
|
||||||
|
li{
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
&.active{
|
||||||
|
display: block ;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#side-menu-btn{
|
||||||
|
display: block !important;
|
||||||
|
float: right;
|
||||||
|
padding: 1.7rem 2rem;
|
||||||
|
&:hover{
|
||||||
|
background: var(--xshop-primary);
|
||||||
|
color: var(--xshop-diff);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#side-menu-content{
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in New Issue